Study/JavaScript16 [JS] Ch 3. JS 함수 * 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다. * 강의명 ) 프론트엔드 개발 초격차 패키지 Online 함수 복습 함수의 결과가 반복적으로 사용될 땐 변수에 담아서 사용하는 것이 유용 함수가 단일적으로 사용될 땐 바로 호출해서 사용 이후에 나오는 함수 표현과 함수 선언의 차이에 유의! 화살표 함수 // 그냥 함수 const double = function(x) { return x * 2 } console.log('double: ', double(7)) // 화살표 함수 const doubleArrow = (x) => { return x * 2 } console.log('doubleArrow: ', doubleArrow(7)) 화살표 함수는 기본적인 로직을 축약형으로 줄일 수 있음.. 2023. 8. 3. [JS] Ch 2. JS 시작하기 * 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다. * 강의명 ) 프론트엔드 개발 초격차 패키지 Online 01. ECMAScript 개요 및 프로젝트 초기화 ECMA: JS 표준화 기구 open with liveserver가 아닌 방식으로 웹에 띄우기 02. 데이터 타입 확인 명령어 뒤에 세미콜론(;) 안 붙여도 되긴 함 한 줄에 한 개의 명령만 작성 // typeof로는 구분할 수 없는 데이터 타입을 구분해주는 함수 function getType(data) { return Object.prototype.toString.call(data).slice(8, -1) } 산출, 할당 연산자 산술 연산자(arithmetic operator) +, -, *, /, % 할당 연산자(assig.. 2023. 8. 3. [JS] Ch 1. Node.js * 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다. * 강의명 ) 프론트엔드 개발 초격차 패키지 Online 개요 및 설치 크롬 V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 NVM: Node Version Manager NVM 사용법 $nvm install 노드js버전 짝수 버전이 좀 더 안정적인 버전 NPM 개요 Node Package Manager: 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리 알고 쓰자 package.json 알고 쓰자 package.json package.json이 하는 역할과 설정법에 대해 알아보자! hoya-kim.github.io [Node.js] lodash란? [Node.js] lodash란? lodash란? .. 2023. 8. 3. [JS] 06 이벤트와 이벤트 처리기 문서 로딩 이벤트 이벤트 이벤트가 발생하는 순간 abort 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 error 문서가 정확히 로딩되지 않았을 때 load 문서 로딩이 끝났을 때 resize 문서 화면의 크기가 바뀌었을 때 scroll 문서 화면이 스크롤 되었을 때 unload 문서를 벗어날 때 마우스 이벤트 이벤트 이벤트가 발생하는 순간 click 사용자가 HTML 요소를 클릭했을 때 dbclick 사용자가 HTML 요소를 더블클릭했을 때 mousedown 사용자가 요소에서 마우스 버튼을 눌렀을 때 mousemove 사용자가 요소에서 마우스 포인터를 움직일 때 mouseover 마우스 포인터를 요소 위로 옮길 때 mouseout 마우스 포인터가 요소를 벗어날 때 mouseup 요소 위에 올려.. 2023. 1. 26. [JS] 05-2 웹 요소에 접근하기 '웹 요소에 접근한다': JS에서 웹 문서에 있는 이미지나 텍스트, 표 등 특정 요소를 찾아가는 것을 의미 웹 요소에 접근할 때 자주 사용하는 CSS 선택자 선택자 기능 사용 예 타입 선택자 특정 태그를 사용한 모든 요소 p { ... } class 선택자 클래스명을 사용하는 특정 부분 .accent { ... } id 선택자 id명을 사용하는 특정 부분 #container { ... } 하위 선택자 A 요소의 하위에 있는 모든 B 요소 from input { ... } 자식 선택자 A 요소의 하위에 있는 요소 중 자식 레벨의 B 요소 ul > li { ... } 메서드 method: 객체에 포함된 함수 선택자를 사용해 웹 요소에 접근할 때는 querySelector() 함수나 querySelectorA.. 2023. 1. 23. [JS] 05-1 DOM과 DOM 트리 DOM (Document Object Model) 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법 DOM에서는 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 텍스트나 이미지, 표 등 모든 요소도 각각 객체로 정의함 웹 문서와 그 안의 요소들을 객체로 인식하고 조절하므로 '문서 객체 모델'이라고 함 웹 문서 객체들도 객체이므로 프로퍼티와 메서드를 갖고 있음 DOM 트리 웹 문서는 여러 가지 태그가 서로 포함 관계를 갖고 있는데, 이러한 포함 관계로 인해 각 태그 간에는 '부모'와 '자식' 관계가 생김 DOM을 활용해 웹 문서의 요소를 부모와 자식으로 구분해서 표시하다 보면 나무 모양을 띄는데 이것을 'DOM 트리'라고 부름 2023. 1. 18. 이전 1 2 3 다음
