본문 바로가기

programming study/JavaScript

 (186)
[드림코딩 by 엘리] JavaScript 기초 강의(2) (ES5+) 본 내용은 해당 강의 토대로 작성 variable 변수: 변경될 수 있는 값 let ES6에서 추가된 변수 선언 키워드 Mutable var 그 이전에 사용하였던 변수 선언 키워드 사용하지 말 것 선언 전에 값을 할당한다거나, 출력할 수 있어 예상치 못한 오류 발생의 원인이 되기 쉬움(var hoisting) Block scope가 없음 let name = 'jaemin'; console.log(name); // jaemin 출력 name = 'siru'; console.log(name); // siru 출력 메모리: 애플리케이션마다 사용할 수 있는 메모리가 할당되어 있음 let을 사용해서 변수를 정의하게 되면 메모리 한 부분을 가르킬 수 있는 포인터가 생김 추후, 다른 값을 넣게 되면 다른 값을 저장할..
[드림코딩 by 엘리] JavaScript 기초 강의(1) (ES5+) 본 내용은 해당 강의 토대로 작성 console console.log('Hello World'); console: WEB API 중 하나 Appication Programming Interface Node.js , 브라우저에서 사용 가능 브라우저가 제공하는 함수 JavaScript의 공식사이트 developer.mozilla.org async vs defer header 태그에 script태그를 넣은 경우 parsing HTML blocked parsing HTML -> Page is ready fetching js / excuting js parsing HTML 사용자가 HTML 파일을 다운로드 받았을 때, 브라우저가 한 줄씩 분석한다. 그 후 이해한 것을 CSS와 병합해서 DOM 요소로 변환한다. 도..
JavaScript 노트 (02) jQuery 메소드 활용 메소드 활용하여 동적인 화면 만들기 보여지는 화면 아래 구하기(좌표) $(window).scrollTop() + $(window).height(); scrollTop(): 선택된 요소의 수직 스크롤 바의 위치 height():선택된 요소의 길이 가장 위 + 보여지는 화면의 길이 = 보여지는 화면 아래 요소의 중간점 구하기(좌표) element.position().top + element.outerHeight() / 2; position() : 부모 엘리먼트를 기준으로 요소가 위치한 좌표값 outerHeight(): 선택된 요소의 패딩, 테두리를 포함한 높이를 리턴 예시 function scrollHandler() { const scrollBottom = $(window).scro..
[코드잇] jQuery 활용하기 (2) (2021.2.27) 본 내용은 해당 강의 토대로 작성 이벤트 01. 이벤트 객체 파라미터 $('document').on('keydown', keyboardInput); // 이벤트 등록 function keyboardInput(e){ console.log(e.key); } 위와 같이 이벤트 등록 시, 이벤트 핸들러 함수를 호출하는 코드가 자바스크립트 내부에 이미 구현되어 있다. 함수 선언 시, 파라미터를 넣는 것만으로 이벤트 객체의 전달이 가능하다. 02. $(document).ready 와 익명함수 ready 이벤트 script 태그를 body 마지막 부분에 쓰는 이유 코드는 위에서 아래로 읽히는데 모든 DOM 객체가 준비가 되야 하므로 script 태그를 head 태그에 넣는 경우 $(document).ready(fun..
[코드잇] jQuery 활용하기 (1) (2021.2.26) 본 내용은 해당 강의 토대로 작성 jQuery I 01. DOM pt.1 문서 객체 모델(Document Object Model, DOM) 브라우저가 HTML 문서를 정리하여 객체로 만들고 보여준다. 태그의 부모 - 자식 관계로 객체가 만들어짐 02. DOM pt.2 Document: 최상위 객체 DOM 트리에 접근을 가능하게 한다. 메소드를 이용하여 객체 접근 03. jQuery 사용해보기 $('selector').method(); dot(.)을 기준으로 두 부분으로 나눌 수 있다. selector: 요소를 선택하는 부분 CSS의 선택자 태그 명 가상 클래스와 같은 복잡한 선택자도 가능 method: 요소에 대해 동작하는 부분 04. jQuery 내부 살펴보기 jQuery는 JavaScript의 라이브..
[코드잇] jQuery 시작하기 (2021.2.26) 본 내용은 해당 강의 토대로 작성 jQuery 01. jQuery JavaScript를 간단하게 사용할 수 있게하는 라이브러리 적용하기 1. jQuery CDN 2. jQuery 코드 다운로드 jQuery 사이트 다운로드 후, 아래를 코드 입력 문법 $('selector').attr('property', 'property value'); $('selector').css('property', 'property value'); attr: 속성을 바꾸는 메소드 첫 번째 파라미터: 속성 두 번째 파라미터: 속성값 css: style을 설정하는 메소드 첫 번째 파라미터: 속성 두 번째 파라미터: 속성값 02. 이벤트 HTML 요소들에게 일어날 수 있는 일들 요소를 클릭 페이지 로딩이 끝남 키보드를 입력 마우스의 ..
JavaScript 노트 (01) Math 절댓값 (Absolute Number) Math.abs(number); number: 양수 혹은 음수 최댓값 (Maximum) Math.max(num1, num2, num3, num4, num5); 여러 파라미터 중, 가장 큰 값을 리턴 최솟값 (Minimum) Math.min(num1, num2, num3, num4, num5); 거듭제곱 (Exponentiation) Math.pow(x, y); xy 리턴 제곱근 (Square Root) Math.sqrt(x); x의 제곱근 리턴 반올림 (Round) Math.round(x); 정수로 반올림하여 리턴 버림과 올림 (Floor and Ceil) Math.floor(x); Math.ceil(y); floor: 버림 ceil: 올림 난수 (Rand..
[코드잇] 인터랙티브 자바스크립트 (4) (2021.2.24) 본 내용은 해당 강의 토대로 작성 다양한 이벤트 알아보기 01. 마우스 버튼 이벤트 MouseEvent.button 0: 마우스 왼쪽 버튼 1: 마우스 휠 2: 마우스 오른쪽 버튼 3: X1 (일반적으로 브라우저 뒤로 가기 버튼) 4: X2 (일반적으로 브라우저 앞으로 가기 버튼) 노트북의 경우: 0, 2만 있음 마우스 이동과 관련된 이벤트에서는 이 값이 0이다. MouseEvent.type click: 마우스 왼쪽 버튼 contextmenu: 마우스 오른쪽 버튼 dbclick: 동일한 위치에서 빠르게 두번 click할 때 mousedown: 마우스 버튼을 누른 순간 mouseup: 마우스 버튼을 눌렀다 뗀 순간 한 동작에 두 개 이상의 이벤트가 발생할 수 있다. 더블클릭의 경우 mousedown -> ..

티스토리툴바