본문 바로가기

JavaScript5

[JavaScript] 배열 메소드 자바스크립트의 배열(Array)에 내장된 다양한 메소드들에 대해 알아보겠습니다. forEach 메소드 forEach는 호출 시 argument로 콜백함수를 작성해주면 그 콜백함수로 배열의 요소를 순서대로 하나씩 전달하면서 매번 함수를 실행시키는 방식으로 동작하는 메소드입니다. 콜백함수: 다른 함수의 파라미터로 전달된 함수 const members = ["KM", "JH", "JS"]; members.forEach((member, index, arr) => { console.log(index, member, arr); }); /* 0 KM ["KM", "JH", "JS"] 1 JH ["KM", "JH", "JS"] 2 JS ["KM", "JH", "JS"] */ 콜백함수의 첫번째 파라미터는 배열의 요소, .. 2021. 12. 28.
[JavaScript] 트렌디한 자바스크립트 표기법 최신 버전의 자바스크립트의 특성을 이해하고 문법을 공부한 후, 실제 코드에 적용해 좀 더 깔끔하고 효율적으로 코드를 작성하는 방법에 대해 알아봅시다. 2015년 ES6버전의 자바스크립트가 나온 후로 자바스크립트는 매년 새로운 기능이 추가되거나 기존 기능이 삭제되면서 업데이트 되고 있습니다. 따라서 현재 코딩하고 있는 자바스크립트 코드와 서비스가 배포될 브라우저의 호환성을 체크하는 것이 중요합니다. 공식 ECMA-262문서: https://www.ecma-international.org/publications-and-standards/standards/ecma-262/ ECMA-262 - Ecma International ECMAScript® 2020 language specification, 11th e.. 2021. 12. 11.
[JS] 이벤트 핸들링 자바스크립트로 만들 수 있는 이벤트 핸들러 중심으로 내용을 정리해 보았습니다. 이벤트와 관련된 용어들의 차이는 다음과 같습니다. 이벤트 : 버튼 클릭, 키보드 입력 같은 웹 페이지에서 일어나는 모든 사건입니다. 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일입니다. 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드입니다. 이벤트 핸들러 간단한 예시로, 어떤 버튼을 누를때 마다 특정 행동을 하는 이벤트를 이렇게 onclick 속성에 직접 새로운 값을 할당하는 방식으로 만들 수 있습니다. let btn = document.querySelector("#myBtn"); btn.onclick = function(){ console.log("Hello World"); }; .. 2021. 11. 8.
[JS] DOM 객체와 요소노드 Vanilla Javascript HTML과 CSS로 웹 페이지를 꾸미고 나면, Vue나 React같은 다양한 프레임워크로 기존의 CSS만으로는 구현할 수 없는 신기한 반응형 웹 동작을 구현할 수 있습니다. 하지만 그런 도구 없이 순수 자바스크립트로도 가능한데요, 추가적인 라이브러리 없이 자바스크립트만으로 웹 동작을 코딩하는 것을 vanilla javascript라고 합니다. vanilla javascript를 공부하면 자바스크립트에 대해 좀 더 깊고 자세히 이해할 수 있게 되고, 추후 공부할 다른 프레임워크에도 빠르게 적응할 수 있게 됩니다. 자바스크립트 파일 연결하기 HTML파일 내에서 자바스크립트 파일과 연결하는 코드를 추가할 수 있습니다. ... 이렇게 body태그 내부의 script태그의 src.. 2021. 11. 6.
[JavaScript] 자바스크립트 기초 자바스크립트 기초 문법에 대해 정리해보았습니다. 출력 한줄에 한 코딩만 작성할 경우 세미콜론(;)을 붙이지 않아도 되지만 한줄에 여러 내용을 작성할 경우 ;로 구분을 해줘야 합니다. /*여러줄의 주석입니다*/ console.log('Hello World!'); console.log('Hello ' + 'World!'); // Hello World! console.log(10+5)// 15 console.log(2 ** 3);// 8 // 문자열로써 '나 "를 사용하고 싶다면 앞에 백슬래시를 넣어줍니다 console.log("He said \"I\'m fine\"");// He said "I'm fine" // 백틱(`)을 써도 됩니다 console.log(`He said \"I\'m fine\"`);//.. 2021. 10. 28.

티스토리툴바