HighLight in your life~

웹 브라우저에서 동작하는 스크립트 언어
HTML 요소 조작, 사용자 입력 처리 가능
가장 인기있는 프로그래밍 언어
 - 앱 개발, 서버측 프로그램 개발, 사물인터넷 개발 등, 다양한 방면에서 이용됨

----------------------------------------------------------------------------------------------

자바스크립트 장점
- 웹 브라우저에서 코드 작성 및 실행가능
- DB부터 앱까지 모두 개발 가능
- 타 언어에 비해 배우기 쉬움

----------------------------------------------------------------------------------------------

구글 크롬 실행
- 크롬 실행 후 키보드의 F12 키 클릭
- Console 탭에서 Javascript 작성 및 실행 가능
- 줄을 바꾸려면 Shift + Enter 를 입력

변수란?
- 어떤 값을 저장하는 임시저장 공간
- 프로그램에서 값을 저장해야 할 때 사용

형식
var {변수명} = {저장할 값}

값 출력
console.log({출력할 값}) 입력 후 Enter

연산자 기호
더하기: +
빼기: -
곱하기: *
나누기: /

연산순수
- 수학과 동일
- 덧셈, 뺄샘보다는 곱셈 나눗셈 먼저 실행
- 왼쪽에서 오른쪽을 계산
- 중괄호, 대괄호 등은 구분하지 않고 (, ) 만 사용

문자열 합치기 : 문자열 합치기 연산 가능
 +연산자로 문자도 연결 가능
 +연산자 여러 번 사용 가능

비교연산자
같다, 다르다 : ==, !=
초과, 미만 : >, <
이상, 이하 : >=, <=

let speed = 100
speed == 120
speed != 0

var speed1 = 80
var speedLimit1 = 100
var speedViolatoin1  = speed1 >= speedLimit1
console.log(speedViolatoin1)

********************
*Javascript 함수
********************

jQuery의 정의를 알 수 있다.
jQuery의 기본함수를 적용할 수 있다.

*함수의 정의
- 특정 기능을 하는 구문(알고리즘, 로직)을 독립된 형태로 만드는 것
- 변수에 저장할 수 있는 한가지 자료형

*함수 구조 형식
var {함수명} = function() {//저장할 코드}
축약 형식 : function{함수명}() {//저장할 코드}

*함수 실행
{함수명}() 로 저장된 코드를 실행

var sayHello = function(){
console.log('Hello~');
}

sayHello();
sayHello();
sayHello();

*함수 축약형식
//같은코드
function sayHello(){
console.log('Hello~');
}

*함수에 값 전달하기
- 함수에 저장된 코드를 실행할 때 값을 전달할 수 있음
- 매개변수 사용 함수 셩힉
- 값1, 값2, ... 매개변수
- 코드 블럭 안에서 전달 받은 값 사용 가능
- 함수에 전달하는 값을 함수 인자라고 함

function square(x) {
console.log(x*x);
}

square(2);


function square(x) {
return x*x;
  //실행되지 않음
console.log(x);
}

var value = square(4);
console.log(value);
console.log(square(square(2)));

--------------------------------------------------------------------------------------

function operator(x, y, func) {
return func(x, y);
}

function add(a, b) { return a+b;}
function subtract(a, b) { return a-b;}

console.log(operator(4, 2, add));
console.log(operator(4, 2, subtract));

--------------------------------------------------------------------------------------

setTimeout 함수
- 형식 : setTimeout(함수, 지연 시간);
- 특정 시간이 흐른 후 코드를 실행하고 싶을 때 사용
- 첫번째 인자로 실행할 함수를 받고 두번째 인자로 지연될 시간을 밀리초(1/1000) 단위로 받음

--------------------------------------------------------------------------------------

*****************
Array.forEach
*****************

function throwBall(ball){
//공을 던지는 함수
console.log(ball + '을(를) 던졌다!');
}

var balls = ['축구공', '야구공', '배구공', '농구공'];

balls.forEach(throwBall);

--------------------------------------------------------------------------------------

*****************
Array.map
*****************

var numbers = [1, 2, 3, 4, 5];
var twice = numbers.map(function(value, index){
return value*2;
});

console.log(twice);

--------------------------------------------------------------------------------------

*****************
Array.filter
*****************

var numbers = [1, 2, 3, 4, 5];
var even = numbers.map(function(value, index){
return value%2 == 0;
});

console.log(even);

--------------------------------------------------------------------------------------

*****************************
자바스크립트 이벤트
*****************************
- 사용자의 입력을 처리
- HTML 태그 마다 다양한 이벤트가 발생됨
- click, focus(선택), blur(선택해지) 등
- 이벤트 처리기는 이벤트 발생 시 실행할 함수를 전달받음

--------------------------------------------------------------------------------------

*****************************
이벤트 처리기 등록
*****************************
- 자바스크립트로 html 요소를 선택한 뒤 addEventListener 함수를 호출
- 형식
  addEventListener(이벤트이름, 실행할 함수)
  첫 번째 인자-이벤트의 이름
  두 번째 인자-이벤트가 발생했을 때 실행할 함수

--------------------------------------------------------------------------------------

*****************************
Click 이벤트
*****************************
- HTML 요소를 마우스로 클릭하거나 터치 디바이스에서 터치시 발생
- 마우스 이벤트 중 하나로 mousedown, mouseup 이벤트 발생 후에 발생됨
- 버튼 뿐만 아니라 모든 HTML요소에서 이벤트가 발생되고 이벤트 처리기를 등록할 수 있음

--------------------------------------------------------------------------------------

*자바스크립트 조건문
- jQuery ToDo list를 기초 활용할 수 있다.
- html과 css를 활용하여 Todo list를 구성할 수 있다.

*조건문
- 조건에 따라 코드 블록의 실행 여부 결정
- if(조건){//코드 블록}
- switch(조건){//코드 블록}

*속도위반 검사하기

var speed1 = 100;
var speed2 = 60;

if(speed1 > 80) {
console.log('1: 속도위반');
}

if(speed2 > 80) {
console.log('2: 속도위반');
}

----------------------------------------------------------------------------

*학생이 수강 중인지 검사하기
- 학생 이름을 입력 받아 수강 중인지 검사하는 프로그램 작성
- 입력을 받으려면 prompt() 사용
- 배열에 값이 있는지 검사: {배열}.includes({값})

----------------------------------------------------------------------------

*if ... else문

var students = ["홍길동", "이순신", "데이비드"];
var name = prompt("이름을 입력하세요.");

if(students.includes(name)){
console.log(name + ' 학생은 수강중입니다.');
} else {
console.log(name + ' 학생은 수강중이 아닙니다.');
}

----------------------------------------------------------------------------

*성적 계산하기

var score = prompt("성적을 입력하세요");
if(score >= 90){
console.log("A");
} else if(score >= 80) {
console.log("B");
} else if(score >= 70) {
console.log("C");
} else {
console.log("D");
}

----------------------------------------------------------------------------

*switch문

----------------------------------------------------------------------------

*break문


----------------------------------------------------------------------------

*자바스크립트
1. 자바스크립트 객체의 개념을 알고 활용할 수 있다.
2. 중첩객체와 내장객체 중 math와 date를 알 수 있다.
3. 전자시계를 만들있다.

- 기능이 유사한 것들 모아둔 집합체
- 객체의 구성: 속성, 메소드
- 하나의 배열에 복합 데이터를 저장
- 객체는 키와 값의 쌍으로 복합 정보를 저장
- 객체 저장 형식
- 객체의 한 키/값 쌍을 프로퍼티라고 함

1. 노드에 접근하기

1. 문서 객체 모델이란 : 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

- 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리함

- (예시) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체

2. DOM 트리

- 웹 문서에 있는 오쇼들 간의 부모, 자식 관계를 계층 구조로 표시한 것

- 나무 형태가 되기 때문에 "DOM 트리"라고 한다.

- 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목

- 루트 노드(root node) : DOM 트리의 시작 부분(html)

3. DOM을 구성하는 원칙

- 모든 HTML 태그는 요소(element) 노드

- 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text) 노드

- 태그의 속성은 요소 노드의 자식 노드인 속성(attribute) 노드

- 주석은 주석(comment) 노드

3. DOM 요소에 접근하고 속성 가져오기

*DOM 요소에 접근하기 : 웹 문서에서 원하는 요소를 찾아가는 것을 "접근한다(access)" 고 함.

*getAttribute() 메서드 : 속성 노드의 값을 가져옴

*setAttribute() 메서도 : 속성 노드의 값을 바꿈

4. DOM에서 이벤트 처리하기

1. window : 브라우저 창이 열릴 때매다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 있다.

1-1. window 객체의 프로퍼티 : 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용

A. document : 브라우저 창에 표시된 웹 문서에 접근할 수 있다.

B. frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환한다.

C. innerHeight : 내용 영역의 높이를 나타낸다.

D. innerWidth : 내용 영역의 너비를 나타낸다.

E. localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환

F. location : window 객체의 위치 또는 현재 URL 나타낸다.

G. name : 브라우저 창의 이름을 가져오거나 수정

H. outerHeight : 브라우저 창의 바깥 높이를 나타낸다.

I. outerWidth : 브라우저 창의 바깥 너비를 나타낸다.

J. pageXOffset : 스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같다.

K. pageYOffset : 스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같다.

L. parent : 현재 창이나 서브 프레임의 부모이다.

M. screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타낸다.

N. screenY : 브라우저 창의 왼쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타낸다.

O. scrollX : 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타낸다.

P. scrollY : 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타낸다.

sessionStorage : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환한다.

1-2. window 객체의 메서드 : window 객체는 기본 객체이므로 'window.' 를 생략하고 메서드 이름만 사용해도

alert() : 알림 창을 표시한다.

blur() : 현재 창에서 포커스를 제거한다.

close() : 현재 창을 닫는다.

confirm() : [확인], [취소] 버튼이 있는 확인 창을 표시한다.

focus() : 현재 창에 포커스를 부여한다.

moveBy() : 현재 창을 지정한 크기만큼 이동한다.

moveTo() : 현재 창을 지정한 좌표로 이동한다.

open() : 새로운 창을 Open한다.

postMessage() : 메시지를 다른 창으로 전달한다.

print() : 현재 문서를 인쇄한다.

prompt() : 프롬프트 창에 입력한 텍스트를 반환한다.

resizeBy() : 지정한 크기만큼 현재 창의 크기를 조절한다.

resizeTo() : 동적으로 브라우저 창의 크기를 조절한다.

scroll() : 문서에서 특정 위치로 스크롤한다.

scrollBy() : 지정한 크기만큼씩 스크롤한다.

scrollTo() : 지정한 위치까지 스크롤한다.

sizeToContent() : 내용에 맞게 창의 크기를 맞춘다.

stop() : 로딩을 중지한다.

-----------------------------------------------------------------------------------------------------------------------------

- 이름 미지정되어서 여러번 실행되면 여러번 열림

- 이름 notice 지정되어서 여러번 실행되도 1번만 열림

-----------------------------------------------------------------------------------------------------------------------------

2. document : 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어진다. HTML 문서의 정보가 담겨 있다.

-----------------------------------------------------------------------------------------------------------------------------

3. navigator : 현재 사용하는 브라우저의 정보가 들어 있다.

-----------------------------------------------------------------------------------------------------------------------------

4. history : 현재 창에서 사용자의 방문 기록을 저장한다.

-----------------------------------------------------------------------------------------------------------------------------

5. location : 현재 페이지의 URL 정보가 담겨 있다.

- 현재 문서의 URL 주소 정보가 담겨 있음

- 이 정보를 편집해서 브라우저 창에 열 사이트/문서 지정

-----------------------------------------------------------------------------------------------------------------------------

6. screen : 현재 사용하는 화면 정보를 다룬다.

- 사용자의 화면 크기, 정보

1. 

2. 

3. 

4.

5. 

6.

7.

8.

9.

10.

11. let VS var

let: 변수 재선언 불가
     반드시 사용하기 전에 미리 선언해야함
var: 변수 재선언 가능

1. 변수 유형

2. typeof 연산자

3. 배열

4. promt 창

5. 연결연산자

6. 등호 3개 비교

7. undefined VS null

7-1. undefined
 자료형이 정해지지는 않은 것
 지정되어야 할 값이 지정되지 않은 것

7-2. null
  confirm이나 prompt에서 취소 버튼 등을 눌러서 값이 입력되지 않은 상태
  유효하지 않은 값이 지정된 것

8. 개발자 도구 명령어

8-1. 방법 하나

 가. 오른쪽 마우스 -> 검사 
 나. [Ctrl] + [Shift] + [J]

8-2. 방법 둘 - 개발자도구 : F12

9. 3의 배수 계산

10. 논리 연산자