#1. 변수 (let, const)
// ECMAScript 6
var num = 10;
var num = 20;
document.write(num + "<br />");
// var 변수는 중복 선언 가능했음
let Num = 10;
// let Num = 20; 에러발생, 변수 이름을 변경해줘야 함
let Num2 = 20; //변수 이름 변경 하면 에러 사라짐
document.write(Num + "<br />");
// let 변수는 중복 선언 불가능
const DIVISION__VALUE = 100;
const DIVISION__VALUE2 = 200; //에러발생, 중복 선언 안됨
//DIVISION__VALUE = 1000; //에러발생. const는 상수이다. 즉, 값을 변경할 수 없음문자 안에 변수 삽입법
/* 문자 안에 변수 삽입하기. `(백틱) 안에 ${변수}로 넣기 */
const myName = "홍길동";
console.log(`내이름은 ${myName}입니다.`);#2. 스코프(함수레벨 / 블록레벨)
#2.1. 함수 레벨 스코프
함수 레벨 스코프
함수 밖에서 선언한 변수는 전역변수가 되어 함수 안에서 변경도 가능하다.
하지만 함수 안에서 선언한 변수는 지역변수가 되어 함수 안에서만 사용이 가능하다.
var kor = 90; //전역변수(함수 안에서, 밖에서 모두 사용 가능)
function getScore(){
kor = 100; //전역변수, 값 100으로 변경
console.log(kor); //100
}
getScore();
console.log(kor); //100
var kor = 90; //전역변수
function getScore(){
var kor = 100; //지역변수
console.log(kor); //100
}
getScore();
console.log(kor); //90#2.2. 블록 레벨 스코프
블록 레벨 스코프
var는 블록 밖과 안 구분없이 항상 전역변수로 선언된다.
let과 const는 블록 밖에서는 전역변수로, 블록 안에서는 지역변수로 선언된다.
따라서 let과 const의 블록 안에서 선언한 지역변수는 블록 밖에서 사용 할 수 없다.
var num1 = 10; //전역변수
{
var num1 = 20; //전역변수
console.log(num1); //20, 전역변수
}
console.log(num1); //20
let num2 = 100; //전역변수
{
let num2 = 200; //지역변수
console.log(num2); //200
}
console.log(num2); //100
const num3 = 10; //전역변수
{
const num3 = 30; //지역변수
console.log(num3); //30
}
console.log(num3); //10
//var의 블록레벨
var num4 = 70; //전역변수
if(num4 === 70){
var sum = 50; //전역변수
}
console.log(sum); //50
//let의 블록레벨
let num5 = 90; //전역변수
if(num5 === 90){
let sum2 = 100; //지역변수
}
console.log(sum2); //에러#3. 함수 표현법과 화살표 함수
#3.1. 함수 선언식
//함수 선언식
compute(10,100); //함수 생성 전에 호출해도 작동함 //함수 호이스팅
function compute(a,b){
var x = a;
var y = b;
var result = x / y;
console.log(result);
}
// compute(10,100);#3.2. 함수 표현식
//함수 표현식
//compute2(0.5,10); //결과 안나옴 //함수호이스팅 안됨
var compute2 = function(a,b){ //익명함수
var x = a;
var y = b;
var result2 = x*y;
console.log(result2);
}
compute2(0.5,10);#3.3. 즉시 실행 함수
//즉시 실행 함수 : 함수의 선언과 동시에 실행됨, 재호출 안됨, 한번만 실행
(function(a){ //익명함수 즉시실행법
var sum = a;
console.log(sum);
})(10);
var instant = (function(){ //함수표현식 즉시실행법
console.log('즉시 실행 함수');
})();#3.4. 매개변수의 개수가 정해지지 않은 함수
//매개변수의 개수가 정해지지 않은 함수
//arguments객체는 인자값을 저장해주는 객체
function showSubject(){
for(i=0; i<arguments.length; i++){
console.log(arguments[i]);
}
}
showSubject('html','css','js','jquery');#3.5. 화살표 함수
//ES6 화살표 함수
function theFnc(a,b){
return a * b;
}
console.log(theFnc(2,5));
// function키워드 생략, {}생략, return생략 (함수표현식)
var theFnc = (a,b) => a * b;
console.log( theFnc(2,5));
var theFnc2 = (c,d) => {
var sum = c + d;
return sum;
}#4. 객체 생성자 함수
//객체 생성자 함수 (object constructor function)
function Info(a,b){
this.subject = a;
this.credit = b;
// this.printOut = function(){
// return this.subject + ',' + this.credit + '학점';
// };
};프로토타입
생성자 함수 외부에 메소드를 별도로 만드는 방법//prototype Info.prototype.printOut = function(){ //생성자 함수 외부에 메소드를 별도로 만드는 프로토타입 return this.subject + ',' + this.credit + '학점'; //생성자 함수 안에 메소드를 만들면 메모리 낭비가 됨. } var sub1 = new Info('html',1); console.log(sub1.subject); console.log(sub1.credit); console.log(sub1.printOut()); console.log(sub1);
#5. 클래스
//클래스 : 기존에 사용했던 객체 생성과 상속 구문을 체계적인 객체지향구문으로 보완
class Info{
constructor(a,b) {
this.subject = a;
this.credit = b;
this.days = [80,120,140];
this.day = this.days[0];
}
printOut() {
return this.subject + ',' + this.credit + '학점';
}
get lessontime() {
return this.day;
}
set lessontime(num) {
this.day = this.days[num];
}
};
var sub1 = new Info('html',1);
console.log(sub1.subject);
console.log(sub1.credit);
console.log(sub1.days);
console.log(sub1.day);
console.log(sub1.printOut());
console.log(sub1.lessontime);
sub1.lessontime = 1;
console.log(sub1.lessontime);
var sub2 = new Info('css',2);
console.log(sub2.subject);
console.log(sub2.credit);
console.log(sub2.days);
console.log(sub2.day);
console.log(sub2.printOut());
console.log(sub2.lessontime);
sub2.lessontime = 2;
console.log(sub2.lessontime);#6. 명령문
#6.1. 객체의 경우
//객체의 경우
//for in 문, 객체의 값들을 순차적으로 반환
var infos = {
subject : 'js',
credit : 3,
days : 20,
tuition : 1000
};
for(info in infos){
console.log(info + ':' + infos[info]);
}#6.2. 배열의 경우
//배열의 경우
//for in 문, 배열의 인덱스 번호를 반환
var citys = ['서울','대구','대전','부산'];
for(var idx in citys){
console.log(idx);
}
//for of 문, 배열의 값을 반환
var citys = ['서울','대구','대전','부산'];
for(var value of citys){
console.log(value);
}
//forEach()문, 배열의 인덱스번호와 값을 함께 반환
var num = [1,2,3];
num.forEach( (value,idx,arr) => {
console.log(value);
console.log(idx);
console.log(arr);
});
//map() : 기존의 배열을 이용하여 새로운 배열을 생성
var base = [10,20,30,40,50];
var area = base.map(
(value,idx,arr) => value * 8
);
console.log(area);
//filter() : 조건에 맞는 배열요소들만 새로운 배열로 생성
var data = ['js',20,30,'html','css',40];
var num = data.filter(
(value,idx) => typeof value ==='number'
);
console.log(num);#6.3. type of
//typeof : 변수의 타입 알아내는 방법 (타입은 7가지)
var type1 = 10;
var type2 = '문자';
var type3 = true;
console.log(typeof type1 + ',' + typeof type2 + ',' + typeof type3);#6.4. null과 undefined의 차이
//undefined 변수 생성은 했으나, 값이 정의되지 않음
var storage;
console.log(storage);
//null 변수생성, 값 정의까지 했으나 값이 없음
var gnb = document.getElementById('gnb');
console.log(gnb);#7. 클로저
/*
function add(){
var n = 0;
return ++n;
}
console.log(add());
console.log(add());
*/
//클로저(Closure) : 함수 안에 지역변수를 함수 밖에서도 참조 할 수 있게 함
//1. 리턴값을 함수로 만든다
//2. 변수에 함수호출을 저장
//3. 변수를 함수처럼 호출
function add(){
var n = 0; //지역변수
return function(){
return ++n;
}
}
var increase = add();
console.log(increase()); //1
console.log(increase()); //2
// function multiply(n){
// return n *= n;
// }
// console.log(multiply(10));
// console.log(multiply(20));
function multiply(n){
return function(){
return n *= n;
}
}
var num1 = multiply(10);
console.log(num1()); //10 * 10 = 100
console.log(num1()); //100 * 100 = 10000
var num2 = multiply(20);
console.log(num2()); //20 * 20 = 400
console.log(num2()); //400 * 400 = 160000#8. 정규표현식
주로 번호나 이메일의 검증에 사용함
/정규표현식/
^: 시작
$: 끝
\d : 숫자
var hpReg = /^\d{10,11}$/;
var emailReg = /^[A-Za-z0-9!#$%^&*_-] + @[A-Za-z0-9_-] + (\.[A-Za-z0-9_-]+){1,2}$/;
var hp1 = '010123456';
var hp2 = '01012345678';
var email1 = 'abc&1_23&A-BC@icox';
var email2 = 'abc&1_23&A-BC@icox.com';
var email3 = 'abc&1_23&A-BC@icox.co.kr';
var email4 = 'abc&1_23&A-BC@icox.abc.co.kr';
console.log(hpReg.test(hp1));
console.log(hpReg.test(hp2));
console.log(emailReg.test(email1));
console.log(emailReg.test(email2));
console.log(emailReg.test(email3));
console.log(emailReg.test(email4));#9. 선택자
#9.1. ES6 전
body를 읽은 후에 코드 실행
//body를 읽은 후에 코드 실행 하는 ES6이전 문법
window.addEventListener("load",() => {
const frame = document.querySelector("#wrap");
console.log(frame);
const box1 = document.querySelector("#wrap>.box1");
console.log(box1);
});#9.2. ES6 후
script태그에 defer를 추가하여 body를 먼저 읽은 후에 스크립트를 실행
<!-- html script태그에 defer추가하여 body를 먼저 읽은 후에 코드를 실행하는 ES6 문법 -->
<script defer src="/22_ES6 선택자.js"></script>#9.3. querySelector
//querySelector : 요소를 한개만 선택
const item = document.querySelector("#wrap>article");
//querySelectorAll : 배열 형태로 모든 요소를 선택
const items = document.querySelectorAll("#wrap>article");
console.log(items);#9.4. 자식요소 선택
/* 자식 요소 선택하기 */
const list = document.querySelector(".list");
const listItems = list.children;
console.log(listItems);
console.log(listItems[0]);
console.log(listItems[1]);
console.log(listItems[2]);
console.log(listItems[3]);#9.5. 부모요소 선택
/* 부모 요소 선택하기 */
const item2 = document.querySelector(".item2");
console.log(item2.parentElement);
/* 제일 가까운 상위 부모 요소 선택하기 */
const li = document.querySelector(".li");
console.log(li.closest("main"));#9.6. 형제요소 선택
/* 형제 요소 선택하기 */
const item3 = document.querySelector(".item3");
console.log(item3.previousElementSibling);
console.log(item3.nextElementSibling);#9.7. CSS속성 변경 예제
/* Box CSS 변경해보기 */
const box = document.querySelector("#box");
box.style.width = "10%";
box.style.height = "300px";
box.style.backgroundColor = "hotpink";//하이픈 대체로 두번째 글자를 대문자로 하는 '카멜기법'
box.style.border = "none";
box.style.transform = "rotate(10deg)";#10. 이벤트
#10.1. preventDefault
const link = document.querySelector("a");
link.addEventListener("click", (e) => {
e.preventDefault(); //다음코드 실행문의 실행을 막아줌
console.log("링크를 클릭했습니다.");
});#10.2. 이벤트 연결법
//이벤트 연결법
//ES5 이벤트 연결
box.addEventListener("mouseenter", function(){
this.style.backgroundColor = "hotpink";
});
box.addEventListener("mouseleave", function(){
this.style.backgroundColor = "aqua";
});
//ES6 이벤트 연결(인수 괄호 생략)
box.addEventListener("mouseenter", e => {
e.currentTarget.style.backgroundColor = "hotpink";
//e.currentTarget : 이벤트가 발생한 대상을 가리킴
});
box.addEventListener("mouseleave", e => {
e.currentTarget.style.backgroundColor = "aqua";
});#10.3. 이벤트 예제
// 예제)
// plus 버튼 누르면 숫자 증가
// minus 버튼 누르면 숫자 감소
const plus = document.querySelector(".btnPlus");
const minus = document.querySelector(".btnMinus");
let num = 0;
plus.addEventListener("click", e => {
e.preventDefault();
console.log(++num);
});
minus.addEventListener("click", e => {
e.preventDefault();
console.log(--num);
});// 예제) 버튼 누르면 회전하기
const btnLeft = document.querySelector(".btnLeft");
const btnRight = document.querySelector(".btnRight");
const box2 = document.querySelector("#box2");
const Deg = 45; //회전할 각도 값 저장
let Num = 0; //증가시킬 값 0으로 초기화
//btnLeft를 클릭할 때
btnLeft.addEventListener("click", ()=> {
Num--;
box2.style.transform = `rotate(${Num * Deg}deg)`;
});
//btnRight를 클릭할 때
btnRight.addEventListener("click", ()=> {
Num++;
box2.style.transform = `rotate(${Num * Deg}deg)`;
});
// 예제) 버튼 누르면 이동하기
const btnLeft2 = document.querySelector(".btnLeft2");
const btnRight2 = document.querySelector(".btnRight2");
const box3 = document.querySelector("#box3");
const px = 100;
let Num2 = 0;
//btnLeft를 클릭할 때
btnLeft2.addEventListener("click", ()=> {
Num2--;
box3.style.transform = `translateX(${Num2 * px}px)`;
});
//btnRight를 클릭할 때
btnRight2.addEventListener("click", ()=> {
Num2++;
box3.style.transform = `translateX(${Num2 * px}px)`;
});
//예제) wrap을 클릭했을 때 백그라운드 컬러 변경하기
const wrap = document.querySelector("#wrap");
const aBox = wrap.querySelector("article");
방법1)
wrap.addEventListener("click", () => {
aBox.style.backgroundColor = "hotpink";
//JavaScript에서 적용하는 것이기 때문에 우선순위가 너무 높아짐
});
wrap.addEventListener("click", () => {
wrap.classList.add("on");
})
방법2)//CSS에 클래스 추가해서 변경하는 방법
wrap.addEventListener("click", () => {
//clasList에 "클래스"가 있는지 확인. contains
let isOn = wrap.classList.contains("on");
console.log(isOn);
if(isOn){
wrap.classList.remove("on");
}else{
wrap.classList.add("on")
}
});
방법3)
wrap.addEventListener("click", () => {
//on이 있으면 remove, 없으면 add하는 토글방식
wrap.classList.toggle("on");
});
https://kyledev.tistory.com/