JavaScript

• 사용자와 상호작용하는 언어
• 동적

HTML은 프로그래밍 언어는 아니다. 웹페이지를 묘사하는 것이 목적.
프로그래밍 : 순서를 만드는 일
조건, 시간의 순서에 따라서 여러 기능을 수행

<input type="button" value="night" onclick="
	document.querySelector('body').style.backgroundColor='black';
">

Event

-onclick
-onchange onkeydown...

문자열과 숫자

• String / Number

'Hello world'.indexOf('o') => 4
'Hello world'.indexOf('world') => 6

//공백 삭제
'       hello      '.trim() => hello

변수와 대입 연산자

• 변수 : 바뀔 수 있는 어떤 값
• 대입 연산자 =

var name='leezche';

var => variable(변수)

무색무취의 태그 <div>, <span>

CSS : 선택자

• id 선택자 : 식별하는 것(타겟팅) => 제일 우선됨
• 클래스 선택자 : 그룹핑하는 것(포괄적)

id 선택자 > 클래스 선택자 > 태그

제어할 태그 선택하기

//css의 Selector
document.querySelector('body').style
document.querySelector('#target').style
document.querySelector('.myclass').style

조건문

• 조건에 따라서 다른 순서의 기능들이 실행되는 것

비교 연산자 ===

boolean => true와 false가 추출됨.

//value 값 가져와서 비교
(document.querySelector('#night_day').value === ' night')

리팩토링 중복의 제거

• 리팩토링 : 코드를 다시 개선하는 작업

//value 값 가져와서 비교
(document.querySelector('#night_day').value === ' night')

//지금 코드를 바로 참조
(this.value === ' night')

//변수를 사용
var target = document.querySelector('body')

target.style.color = 'white';

배열

var coworkers = ["egoing", "leezche"];

document.write(coworkers[0]); => eoging

document.write(coworkers.length); => 2

coworkers.push('duru'); //배열 요소 추가

반복문

var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];

var i = 0;
while(i < 5) {
	document.write('<li>' + coworkers[i] + '</li>');
    i = i + 1;
}

var i = 0;
while(i < coworkers.length) {
	document.write('<li>' + coworkers[i] + '</li>');
    i = i + 1;
}

querySelector('a')

=> a 태그에서 첫번째 등장하는 하나만 가져옴.

querySelectorAll('a')

=> [a, a, a, a]

var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
	console.log(alist[i]);
    alist[i].style.color = 'powderblue';
    i = i + 1;
}

함수 function()

function nightDayHandler(self){
	....
}

onclick="nightDayHandler(this)";

매개변수와 인자

//left와 right를 매개변수

function sum(left,right) {
	document.write(left + right + '<br>');
}

//2와 3을 인자

sum(2,3); => 5

함수(리턴)

function sum2(left, right){
	return left + right;
}

document.write(sum2(2,3) + '<br>');
document.write('<div style="color : red">' + sum2(2,3) + '</div>');

객체 Object

• 객체에 속해있는 함수는 메소드라고 불린다.
• 이름이 있는 정리정돈 상자

//객체 선언
var coworkers = {
	"programmer" : "egoing",
    "designer" : "leezche"
};

document.write(coworkers.programmer);

coworkers.bookkeeper = "duru";
document.write(coworkers.bookkeeper); //duru

coworkers["data scientist"] = "taeho";
document.write(coworkers["data scientist"]); //taeho

데이터 순회

// key 값은 programmer, designer 같은 것들 => 프로퍼티 => 배열에서는 index(순서가 O)
for (var key in coworkers) {
	document.write(key); //programmer, designer ...
    
    document.wirte(coworkers[key]); //egoing, leezche, duru ...
}

객체프로퍼티와 메소드

coworkers.showAll = function(){
for (var key in this) {
		document.wirte(this[key]);
    }
} //객체 coworkers에 소속된 showAll 이라는 함수 선언 => 그게 메소드
	//this는 바로 지금 객체(coworkers)를 가르킴

var Body = {
	setColor: function(color){
    	document.querySelector('body').style.color = color;
    },
    SetBackgroundColor: function(color){
    	document.querySelector('body').style.backgroundColor = color;
    }
}

Body.setBackgroundColor('black');

파일 쪼개기

<script src="colors.js"></script>

chche(캐시) = 저장한다.

라이브러리와 프레임워크

• 라이브러리 : 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은. 내가 만들고있는 프로그램에 사용할 부품을 가져오는 것.
  
• 프레임워크 : 만들고자 하는 것이 무엇인가에 따라서 그 중에서 공통적인 부분은 프레임워크라는 것이 만들어놓고 우리가 만들고자하는 것의 기능에 따라 달라지는 부분만 살짝살짝 건드려서 ~ 프레임워크 안에서 우리가 작업.

js 라이브러리 jQuery

cdn : content delivery network

//제이쿼리 문법

$('a').css('color', color);

UI와 API

• ui : 사용자가 시스템을 제어하기 위해서 사용하는 조작 장치
• api : 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작 장치