22.04.15 javascript 선행학습

데이터 종류

• string

  • 문자데이터

  let Name = "banana";
  let email = '[email protected]';
  let hello = `Hello ${Name}?!` //(보간법)
  
  console.log(hello); // hello banana?!

• Number

  • 숫자데이터

  let number = 123;

• Bolean

  • true false 두가지 값 데이터

  let checked = true;
  let isShow = false;

• Undefined

  • 지정되지 않은 할당되지 않은 상태

  let undef;
  let obj = {abc:123};
  console.log(obj.abc); // 123
  console.log(obj.xyz); // undefined

• Null

  • 어떤값이 의도적으로 비어있음을 의미

  let empty = null;
  console.log(empty); // null

• Object

  • 객체데이터
  • 여러데이터를 key:Value 형태로 저장

  		let user = {
    name: 'banana',
      age: 85,
      inValid:true
    };
  		console.log(user.name); // banana
  		console.log(user.age); // 85
  		console.log(user.isValid); // true

• Array

  • 배열데이터
  • 여러 데이터를 순차적으로 저장

   let fruits = ['Apple','Banana','Cherry'];
  
   console.log(fruits[0]); // 'Apple'
   console.log(fruits[1]); // 'Banana'
   console.log(fruits[2]); // 'Cherry'
  

변수

• let
  변할수있는 유동적인 변수
• const
  한번 정해지면 변할수없는 변수

함수선언

function helloFunc(){
console.log(1234);
}

helloFunc(); // 1234

function returnFunc(){
	return 123;
}
let a = returnFunc();
console.log(a); //123

function sum(a,b) { //a와 b는 매개변수(Parameters)
return a + b;
}

// 재사용!
let a = sum(1,2); // 1과 2는 인수(Arguments)
let b = sum(7, 12);
let c = sum(2, 4);

console.llog(a,b,c); // 3, 19, 6

이름이 없는 익명함수

let world = function() {
	console.log('World~');
}

//함수 호출!
hello(); // Hello~
World(); // World~

조건문

let isShow = true;
let checked = false;

if(isShow){
console.log('Show!')}; // Show!

if(checked){
	console.log('Checked!');
}

DOM API

html 요소 1개 찾기

<div class="box"><div>

const boxEl = document.querySelector('.box');

이벤트(Event, 상황)

boxEl.addEventListener('click',2);

핸들러(Handler, 실행할 함수)

boxEl.addEventListener('click',function(){
	console.log('Click~!')
});

클래스 추가

boxEl.classList.add('active'); //active라는 클래스를 추가

//active 라는 클래스가 존재하는가?
let isContains = boxEl.classList.contains('active');

console.log(isContains);// true

클래스 제거

boxEl.classList.remove('active');