javascript
1.[Javascript] 변수선언(scope, hoisting)
졸업 작품을 위한 팀 프로젝트에서 처음으로 자바스크립트를 제대로 사용하게 되었을 때 많이 당황했던 기억이 난다. 자바스크립트에 대한 지식이 거의 없었고, 무엇보다 변수를 선언하려는데 어떤 차이점이 있는지 잘 몰랐기 때문이다. 당시엔 팀 프로젝트 결과물 제출이 시급했
2.[Javascript] 변수선언(var, let, const)
자바스크립트에는 변수를 선언하는 세 가지 방법이 있다.var, let, const가 그 방법이다.하지만 각각의 장단점이 있으므로 이것들이 서로 어떻게 다른지 알면 좋다.var: var는 소규모나 빠른 개발을 위해서는 좋다고 할 수 있으며 함수레벨 스코프를 가진다.또한
3.[Javascript] 웹브라우저가 스크립트를 해석하는 과정
//CSS분석기웹 브라우저는 <!DOCTYPE html>를 보고 이 문서가 웹 문서라는 것을 알게 된다. 그리고 <html></html>사이에 있는 내용을 HTML표준에 맞춰 읽기 시작한다.웹 문서에서 HTML 태그의 순서, 포함 관계를 파악한다. &l
4.[Javascript] JS스타일 가이드
구글과 에어비앤비의 자바스크립트 ㅌ스타일 가이드를 참고하여 작성하면 좋을 것.코드를 보기 좋게 들여쓰기 하기: Tab/Space bar를 눌러 공백을 만든다.: Tab은 시스템 환경마다 다르게 보일 수 있으므로, 자바스크립트 스타일 가이드에서는 Space bar를 눌러
5.[Javascript] JS용어와 기본 입출력 방법
식: 표현식이라고도 함.: 연삭식, 실제 값, 함수 실행하는 것도 식이 됨.: 즉, 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있으며, 식은 변수에 저장된다.문: 명령: 문의 끝에는 세미콜론(;)을 붙여서 구분한다.: 제어문, 조건문 등이 그 예이다. 알림창
6.[Javascript] 변수와 변수선언규칙
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 \[변수와 변수선언규칙\] 변수 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터 : 한 번 지정하면 바뀌지 않는 데이터는 상수라고 함. 변수 선언 규칙 변수를 사용하려면 변수를 구별할 수
7.[Javascript] 자료형
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 \[자료형\] 기본 유형 숫자형 : 따옴표 없이 숫자로만 표기 문자열 : 작은 따옴표나 큰 따옴표로 묶어서 나타냄. : 숫자를 따옴표로 묶으면 문자로 인식 논리형 : 참과 거짓이
8.[Javascript] 예약어
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 \[예약어\] var 함수 레벨 재할당, 재선언 가능 함수 안에서 var 예약어를 빼고 선언하는 경우 전역 변수가 된다. 호이스팅: 자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수를 따로
9.[Javascript] 연산자
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 \[연산자\] 산술 연산자 수학 계산 시 사용하는 연산자. (+, -, \*, /, %, ++, --) 할당 연산자 연산식 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자. 대입 연산자라고도 함. (=
10.[Javascript] DOM이벤트처리기
기존 이벤트 처리기 지정 방법은 HTML이 주인이 되어 자바스크립트 함수를 불러왔다.DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와 이벤트 처리기를 연결한다.즉, HTML과 자바스크립트 중 어느 쪽을 중심으로 잡는가에 따라 지정하는 방법이 다르다.
11.[Javascript] 이벤트와 이벤트처리기
click: 사용자가 HMTL 요소를 클릭할 때 발생dblclick: 사용자가 HTML요소를 더블 클릭할 때 발생mousedown: 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생mousemove: 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생
12.[Javascript] 함수 표현식
이름이 없는 함수 이름이 없는데 어떻게 실행해야할까? 변수에 할당한다. 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다. 함수를 식 형태로 선언하므로 마지막에 세미콜론을 붙여주어야 한다. =>표기법을 사용해 함수 선언을 좀 더 간단하게 작성할 수
13.[Javascript] 객체
자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다는 것으로 이해하면 쉽다.문서객체모델(DOM): 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지, 링크, 텍스트 필드 등도 모두 객체이다. 일반적으로 웹 문서에 삽입하는 요소는 documen
14.[Javascript] 내장객체 - Array객체
배열을 다루는 내장 객체.length 프로퍼티 사용 예시Array 객체 메서드concat: 기존 배열에 요소를 추가해 새로운 배열을 만듦.every: 배열의 모든 요소가 주어진 함수에 대해 참이면 true 반환, 그렇지 않으면 false 반환filter: 배열 요소 중
15.[Javascript] 내장객체 - Date객체
현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고, 특정일까지 얼마 남았는지 알려주는 등 여러 가지로 응용할 수 있다.YYYY-MM-DD 형식YYYY-MM-DDTHH 형식: 연도, 월, 일 다음에 시간을 표시하는 형식: 맨 끝에 Z를 붙이면 UTC(국제표준시)로
16.[Javascript] 내장객체 - Math객체
E: 오일러 상수PI: 원주율 파이 (약 3.141592)SQRT2: 루트2 (약 1.414213)SQRT1_2: 1/루트2 (약 0.707106)LN2: loge(2) (약 0.693147)LN10: loge(10) (약 2.302585)LOG2E: log2(e) (
17.[Javascript] 브라우저 객체
웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고, 밑으로 하위 요소에 해당하는 객체들이 나타난다.하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며 각각 다른 하위 객체를 지닌다.window : 브라우저 창이 열릴 때마다 하나씩 만들어짐.
18.[Javascript] 브라우저 관련 객체-window객체
window객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 있어 자바스크립트의 모든 객체는 window객체 안에 포함된다.window객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다. 프로퍼티를 사용하려면 window.fu
19.[Javascript] 브라우저 관련 객체-navigator객체
웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온오프라인 등의 여러 정보가 담겨 있음. 이 정보는 사용자가 수정할 수 없으며, 가져와서 보여 줄 수만 있음.chrome 브라우저에서 Ctrl+Shift+J를 눌러 콘솔창을 열고 navigator를 입력한 후 Ent
20.[Javascript] 브라우저 관련 객체-history객체
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 \[브라우저 관련 객체-history객체\] history 객체 history객체에는 브라우저에서 '뒤로'나 '앞으로' 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다. 브라우저 히스
21.[Javascript] 브라우저 관련 객체-location객체
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [브라우저 관련 객체-location객체] location 객체 브라우저의 주소 표시줄과 관련됨. location 객체에는 현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에
22.[Javascript] 브라우저 관련 객체-screen객체
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 \[브라우저 관련 객체-screen객체\] screen 객체 사용자의 화면 크기나 정보를 알아낼 때 사용함 screen 객체 프로퍼티 availHeight: UI영역(윈도우 작업 표시줄이나 Mac의 독)
23.[Javascript] setInterval()과 setTimeout()
function을 time마다 실행한다.time의 단위는 ms이다.function을 time 이후에 실행한다.time의 단위는 ms이다.
24.[Javascript] localStorage
로그인 같은 기능을 간단히 구현할 때 LocalStorage에 해당 Key값과 value값을 추가하거나 뺄 수 있다.