HighLight in your life~

function makeAdder(x) {
return function(y){
return x + y;
}
}

const add1 = makeAdder(3);
console.log(add1(2));

const add2 = makeAdder(5);
console.log(add2(7));
console.log(add1(4));

function makeCounter() {
let num = 0; // 은닉화

return function () {
  return num++;
  };
}

let counter = makeCounter();

console.log(counter());
console.log(counter());
console.log(counter());

배열 생성 예제
var student_name=["홍길동","성춘향", "이몽룡"];
다양한 데이터 형태의 값을 함께 저장 가능
var student=["Gildong", "21900001", "이몽룡"];

var students=['이xx','박xx','최xx','김xx'];
students[0]
students[1]

var students=['이xx','박xx','최xx','김xx'];
students[0]='홍길동'
console.log(students)
students.length


*배열의 맨 마지막에 항목 추가(push)
- 새로 등록한 수강생 추가하기
- {배열이름}.push({값})

var students=['홍길동','박xx','최xx','김xx'];
students.push('김아무개')

*i번째 수강생 삭제
{배열이름}.splice(i,1)
{배열이름}.splice(순서,개수)

var students=['홍길동','박xx','최xx','김xx','김아무개'];
students.splice(2, 1)

*이름이 "이xx"인 학생의 인덱스(번호) 찾기
{배열이름}.indexOf({값})

var students=['홍길동','최xx','박xx','김xx','이xx', '김아무개'];
var index = students.indexOf('이xx')
console.log(index)

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

네비게이션 만들기
- 이동한 기록 저장하기
- {배열이름}.push({값}) 이용

var navigation = []
navigation.push('직진 200M')
navigation.push('우회전')
navigation.push('직진 50M')

- 이동한 기록 거꾸로 재생하기
- 배열 마지막 요소를 꺼내려면 {배열이름}.pop() 이용

navigation.pop()
navigation.pop()
navigation.pop()

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

복불복 게임 만들기
- 목록 중 임의의 요소 선택하기
- Math.random() 을 이용하면 0에서 0.99... 의 값을 얻을 수 있음
- Math.random()*10은 0에서 9.99...
- Math.floor({값})을 이용해 값의 소수 부분을 제거


var students=['홍길동','최xx','박xx','김xx','이xx', '김아무개'];

students[Math.floor(Math.random()*students.length)]

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

HTML 문서에 자바스크립트 코드 포함
- HTML의 <script> 태그 사용
- <script>...</script> 안에 자바스크립트 코드 포함
- 포함된 코드는 문서가 열릴 때 실행됨

HTML 태그 선택
- 자바스크립트로 HTML요소를 조작하려면 조작할 요소를 선택해야 함
- 자바스크립트 변수에 HTML 요소 저장
- HTML태그의 id, class, 태그이름 등으로 요소를 찾을 수 있음

HTML 태그 선택
document.getElementById({id})
document.getElementsByTagName({태그명})
document.getElementsByClassName({class})

웹 브라우저에서 동작하는 스크립트 언어
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)

CSS 테두리 이미지 삽입
https://www.w3shcools.com/css/css3_border_images.asp

CSS의 고급활용 예제
 - 전환, 애니메이션, 그레디언트 효과, 텍스트와 상자 그림자 효과 기능
 - 페이징과 툴팁
 - 2D 변형(rotate, scale, translate)

********************
*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. 전자시계를 만들있다.

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