• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

Javascript29

728x90
[Javascript] ECMAScript 버전별 출시 연도와 추가된 주요 기능들 ECMAScript의 다양한 버전과 그 특징을 보여주는 표입니다. ECMAScript 버전 출시 연도 주요 기능 1 1997 기본 문법, 변수, 함수, 객체 2 1999 클래스, 이터레이터, 정규식 3 2001 프로토타입 상속, 객체 지향 프로그래밍 5 2009 함수 표현식, 제네릭 함수, 람다 함수 6 2015 모듈, 클래스, 타입스크립트 7 2016 async/await, 화살표 함수, 전역 컨텍스트 8 2017 스프레드 연산자, 템플릿 문자열, 옵셔널 체크 9 2018 BigInt, String.prototype.includes(), String.prototype.matchAll() 10 2019 Object.entries(), Object.values(), Object.fromEntries() 1..
[IT뉴스]2022년까지 프론트엔드 프레임워크와 라이브러리 프론트엔드 프레임워크와 라이브러리가 너무 많다보니, 공부할게 참 많네요. ㅎ 2022년에는 어떤 프레임워크를 많이 사용하고 있는지 39,471명이 설문조사에 참여했습니다. (통계를 보니 60%이상이 미국사람이네요.) 다음은 시간에 따른 인지도, 사용량, 관심도, 만족도 비율에 따른 통계자료입니다. 인지도 인지도는 해당 프레임워크나 라이브러리를 들어본적이 있는가? 입니다. React와 Vue.js가 1,2위를 달리고있네요. 통계를 보니 저도 한번도 듣지도 못한 프레임워크가 많네요. 사용량 사용량은 다시 사용할 예정 + 다시 사용안한다는 통계치입니다. React가 앞도적으로 수치가 높습니다. 뭐 거의 프론트엔트 프레임워크의 대장이라고 할수 있겠네요. 관심도 관심도는 배우길 원하거나 관심없다는 통계입니다. S..
[Javascript]ECMAScript6(ES6)에 추가된 문법 ES6 (ECMAScript 2015)은 ECMAScript 언어의 6번째 버전입니다. ES6는 많은 새로운 문법과 기능을 도입하여 JavaScript를 더욱 강력하고 유연한 언어로 만들었습니다. ES6에 추가된 주요 문법 몇 가지를 살펴보겠습니다. let, const 키워드: 기존 var 키워드 대신에 let과 const 키워드가 추가되었습니다. let은 블록 스코프 변수를 선언할 때 사용하며, const는 상수를 선언할 때 사용합니다. let x = 10; x = 20; // 가능 const y = 10; y = 20; // 불가능 화살표 함수: 화살표 함수는 함수를 더 간결하게 작성할 수 있도록 해줍니다. 이전에는 함수를 선언할 때 function 키워드를 사용해야 했지만, 화살표 함수에서는 이 키..
[javascript]모던 자바스크립트란? "모던 자바스크립트"는 ES6(ECMAScript 2015) 버전 이상의 자바스크립트를 지칭하는 용어입니다. 이전 버전의 자바스크립트에서는 사용할 수 없었던 기능들이 추가되어, 개발자들은 더욱 편리하고 간결한 코드를 작성할 수 있게 되었습니다. 모던 자바스크립트에서 추가된 기능 중 가장 대표적인 것은 "let"과 "const" 키워드를 이용한 변수 선언 방식입니다. 이전에는 "var" 키워드만을 사용하여 변수를 선언할 수 있었지만, "let"과 "const" 키워드는 블록 스코프(block scope)를 가지기 때문에 변수의 유효 범위(scope)가 더욱 명확해졌습니다. 또한, "const" 키워드로 선언된 변수는 상수를 표현하기에 적합합니다. 그 외에도 모던 자바스크립트에서는 템플릿 리터럴(templa..
[javascript]javascript 연산자 JavaScript는 여러 종류의 연산자를 제공합니다. 각 연산자는 다양한 작업을 수행하며, 피연산자를 사용하여 연산을 수행합니다. 다음은 JavaScript에서 사용할 수 있는 주요 연산자의 목록입니다. 산술 연산자 덧셈 (+) 뺄셈 (-) 곱셈 (*) 나눗셈 (/) 나머지 (%) 거듭제곱 (**) 할당 연산자 대입 (=) 덧셈 후 대입 (+=) 뺄셈 후 대입 (-=) 곱셈 후 대입 (*=) 나눗셈 후 대입 (/=) 나머지 후 대입 (%=) 비교 연산자 같음 (==) 같지 않음 (!=) 일치 (===) 불일치 (!==) 크기 비교 (> / >= / >) 그 외 쉼표 (,) 삭제 (delete) void 이러한 연산자들을 조합하여 변수의 값을 계산하거나, 조건문과 반복문 등을 작성할 수 있습니다.
[Typescript]javascript와 typescript 차이점과 사용방법 javascript와 typescript 차이점 JavaScript는 스크립트 언어로, 다양한 플랫폼에서 동작하는 클라이언트 측 및 서버 측 애플리케이션을 작성하는 데 사용됩니다. JavaScript는 가볍고 동적이며 쉽게 배울 수 있으며 웹 페이지의 동작 및 사용자 인터페이스를 개선하는 데 사용됩니다. TypeScript는 JavaScript의 슈퍼셋으로, 정적 타입 언어입니다. TypeScript는 JavaScript 코드와 함께 사용되며, JavaScript와 마찬가지로 TypeScript 코드는 JavaScript로 컴파일되어 실행됩니다. TypeScript는 개발자가 개발하고 유지 관리하는 대규모 애플리케이션을 보다 쉽게 작성하고 관리할 수 있도록 해줍니다. TypeScript는 정적 타입 검사..
[VS Code]Visual Studio Code javascript 확장 익스텐션 code runner 설치 및 사용방법 Visual Studio Code에서 javascript 출력을 도와주는 code runner 확장 익스텐션 입니다. "code runner" 이라고 확장 익스텐션 검색창에 입력하시면 첫번째 나오는 확장프로그램입니다. 설치를 하시고, js 파일을 만드셔서 아래 문구를 작성해보세요. var a='hello world'; console.log(a); 그리고 단축키 + 마우스 우클릭으로 "code run"을 눌러 확인해보세요. 윈도우 : ctrl + alt + n 맥 : control + optiion + n 하단 출력부분에 출력이 됩니다. 크롬 개발자 도구로 하셔도 되지만, vs code로 바로 확인이 가능합니다.
[Javascript]arrow function 화살표 함수 ESNest 에서는 function 키워드 외에도 화살표 => 로 함수를 선언할 수 있다. function add(a, b){ return a + b; } // 화살표 함수 const add = (a, b) => a + b 간단한 함수는 화살표 함수를 사용함으로해서 소스를 간결하게 만들수 있다.
[javascript]유튜브 탭메뉴 별로 다르게 호출 (반응형포함) 하나의 영역에서 탭을 누르면 유튜브 영상이 탭별로 다르게 노출되게 하는 방법입니다. 먼저 script 를 사이에 삽입합니다. // youtube function getVidID(param) { var r = /(?:watch\?v=(.*)|youtu\.be\/(.*))/g; var match = r.exec(param); return match[1] ? match[1] : match[2]; } var frameBase = ''; var vidObj = [ "https://youtu.be/ktmvMZyVzWk", // data-idx 0 주소 "https://youtu.be/Decc1Apa-bU", // data-idx 1 주소 "https://youtu.be/DRJBGE-Zqj8", // data-idx..
반응형