22.04.15 javascript先行学習

データ型

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

console.log(hello); // hello banana?!

let number = 123;

let checked = true;
let isShow = false;

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

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

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

 let fruits = ['Apple','Banana','Cherry'];

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

へんすう

関数宣言

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

<div class="box"><div>

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

boxEl.addEventListener('click',2);

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');