FASTCAMPUS ST-FE 3기
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 - Ch 9. JS 선행
01. JS개요
1.1 표기법
dash-case(kebab-case)
snake_case
camelCase
ParcelCase
1.2 Zero-based Numbering
js는 특수한 경우를 제외하고, 0부터 숫자를 센다.
let fruits=['apple','banana','cherry'];
console.log(fruits[0]); //apple
console.log(frunits[1]); //banana
console.log(frunits[2]); //cherry
console.log(new Date('2021-01-30').getDay()); //6 ->토요일을 의미
console.log(new Date('2021-01-31').getDay()); //0 ->일요일을 의미
console.log(new Date('2021-02-01').getDay()); //1 ->월요일을 의미1.3 주석
// 한 줄 메모
/**/ 여러 줄 메모
02. 데이터 종류(자료형)
01. String (문자열)
//string
//따옴표를 사용
let myName = 'oching';
let email = 'oching.choi@gmail.com';
let hello = `hello ${myName}?`
//보간법 : ``(백틱)을 사용해 중간에 다른 값을 가져옴.
//`${내용}`
console.log(myName); //oching
console.log(email); //oching.choi@gmail.com
console.log(hello); //hello oching?
02. Number (숫자)
//Number
//정수 및 부동 소수점 숫자를 나타냄
let number = 123; //정수
let opacity = 1.57; //부동소수점
console.log(number); //123
console.log(opacity); //1.5703. boolean (논리)
//boolean
//true, false 두가지 값으로 표현
let checked = true;
let isShow = false;
console.log(checked); //true
console.log(isShow); //false04. Undefined(할당되지않음)
//undefined
//값이 할당되지않음
let undef;
let obj = {abc: 123};
console.log(undef); //undefined
console.log(obj, abc) //123
console.log(obj, xyz) //undefined05. Null(의도적인 값의 부재)
//Null
//어떤 값이 의도적으로 비어있음.
let empty= null;
console.log(empty) //null06. Object (객체)
//Object
//여러 데이터를 key:value 형태로 저장. {}
left user={
name:'oching',
age:'28',
isValid:true
};
console.log(user.name) //oching
console.log(user.age) //28
console.log(user.isValid) //true07. Array(배열)
//Array
//여러데이터를 순차적으로 저장. []
let fruits=['apple','banana','cherry'];
console.log(fruits[0]); //apple
console.log(frunits[1]); //banana
console.log(frunits[2]); //cherry03. 변수, 예약어
3.1 변수
데이터를 저장하고 참조(사용)하는 데이터의 이름
var let const
//변수 선언과 할당
let a = 2;
let b = 5;
console.log(a+b); // 7
console.log(a-b); //-3
console.log(a*b); //10
console.log(a/b); //0.4
//let 재할당 가능
let a = 12;
console.log(a); //12
a=999;
console.log(a) //999
//const 재할당 불가
const a = 12;
cosole.log(a); //12
a = 999;
console.log(a); //TypeError:Assignment to constant variable.3.2 예약어 (Reserved Word)
특별한 의미를 가지고 있어 변수나 함수이름등으로 사용할 수 없는 단어
let this = 'hello'; //SyntaxError
let if = 123; //SyntaxError
let break = true; //SyntaxError04. 함수(function)
특정 동작(기능)을 수행하는 일부코드의 집합(부분)
4.1 함수의 선언과 호출방법
//함수선언
function helloFunc(){
//실행코드
console.log(1234);
}
//함수호출
helloFunc(); //12344.2 값을 넘겨주는 return
//return 반환
function returnFunc(){
return 123;
}
let a = returnFunc(); //변수에 함수를 할당
console.log(a); //1234.3 매개변수와 인자로 받기
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.log(a,b,c) // 3,19,64.4 기명, 익명함수
//함수선언
//기명(이름이 있는)함수
function hello(){
console.log('hello~');
}
//힘수표현
//익명(이름이 없는)함수
let world = function(){
console.log('world~');
}
//함수호출
hello(); //hello~
world(); //world~
4.5 객체함수
함수를 하나의 속성으로 사용할 수 있다.
이는 객체 안에 저장해 값처럼 사용할 수 있다는 뜻이 된다.
//객체데이터
const oching = {
name : 'oching',
age : 28,
//메소드(method) - 속성부분에 함수가 할당되어있으면 메소드라고 한다.
getName : function(){
return this.name;
}
};
const HerName = oching.getName();
console.log(herName); //oching
//혹은
console.log(oching.getName()); //oching05. 조건문
조건의 결과 (truthy, falsy)에 따라 다른 코드를 실행하는 구분
if, else
let isShow = true;
let checkted = false;
if(isShow){
console.log('show') //show 출력됨.
}
if(checked){
console.log('checked') //출력되지않음.
}
let isShow = true;
if(isShow){
console.log('show')
}else{
console.log('hide')
}
//show 출력됨06. DOM API
Document Object Model, Application Programming Interface
브라우저 환경에서 실행할 수 있게 하는 명령들
6.1 다양한 메서드 맛보기 예시
6.1.1 .querySelector
//html요소 찾기
let boxEl = document.querySelector('.box');
console.log(boxEl); //html의 .box요소를 가져온다.6.1.2 .addEventListener('event', hadler)
boxEl.addEventListener('click',function(){
console.log('click');
})6.1.3 .classList .add .contains
//html 요소 찾기
const boxEl = document.querySelector('.box');
//요소의 클래스 정보 객체 활용
boxEl.classList.add('active'); //클래스리스트를 가져와서 active 추가해줘
let isContains = boxEl.classList.contains('active'); //active를 클래스로 갖고있니?
console.log(isContains); //true
boxEl.classList.remove('active'); //클래스리스트를 가져와서 active를 삭제해줘
isContains = boxEl.classList.contains('active'); //active를 클래스로 갖고있니?
console.log(isContains); //false6.1.4 활용(6.1.1~ 6.1.3)
let boxEl = documemt.querySelector('.box'); //html요소 중 .box요소를 찾아오고
console.log(boxEl); //console창에 요소 출력
boxEl.addEventListener('click',function(){ //.box요소를 눌렀을 때 함수실행
console.log('click'); //click이라는 메세지 console창에 출력
boxEl.classList.add('active'); //.box요소에 active 클래스 추가
console.log(
boxEl.classList.contains('active') //true출력
);
boxEl.classList.remove('active')' //.box요소에 active 클래스 제거
console.log(
boxEl.classList.contains('active') //false
);
})6.1.5 querySelectorAll .forEach()
//html요소 모두 찾기
cost boxEls = document.querySelectorAll('.box');
//출력
boxEls.forEach(function(boxEl, index){ //빈복되는요소, 반복중인 번호
boxEls.classList.add(`order-${index + 1}`); //0부터 numbering되니까 +1해줌
console.log(index.boxEl);
})6.1.6 .textContent
const boxEl = document.querySelector('.box');
//값을 얻는 용도
console.log(boxEl.textContent);
//값을 지정하는 용도
boxEl.textContent = "oching";
console.log(boxEl.textContent); //oching08. 메소드 체이닝
메소드를 연결
const a = 'hello~';
//split 문자를 인수기준으로 쪼개 배열로 반환
//reverse 배열을 뒤집기
//join 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse().join('');
console.log(a); //hello~
console.log(b); //~olleh09. Quiz
Q1. The quick brown fox 문장을 camelCase로 작성하기
theQuickBrownFow
Q2.아래의 데이터를 활용해 banana를 콘솔출력하시오.
let fruits = ['apple','banana','cherry'];console,log( fruits[1] );
Q3. boolean데이터에서 거짓을 의미하는 데이터는?
false
Q4. '값이 의도적으로 비어있음'을 의미하는 데이터는?
null
Q5. '{}데이터의 종류는?
객체
Q5. 아래코드로 콘솔출력될 값은?
let obj= {abc:123};
console.log(obj.xyz);undefined
obj객체의 xyz로 접근해도 정의된 값이 없으니
undefined가 된다.
Q6. 값을 재할당할 수 없는 변수 선언 키워드는?
const
Q7. 함수에서 값을 반환해주는 키워드는?
return
Q8. 함수호출에서 2,4를 무엇이라고 하는가?
sum(2,4);인수 arguments
Q9. 아래 함수 선언의 a,b와 같이, 함수 호출에서 전달받은 인수를 함수내부로 전달하기 위한 변수를 무엇이라 하는가?
function sum(a,b){
return a+b;
}매개변수 parameters
Q10. 이름이 없는 함수는?
익명함수 anonumous function
Q11. hello 이름의 함수표현을 작성하고 호출하시오.
const hello = function(){}; hello();이름으로서 함수를 선언하지않은 익명함수.
따라서 함수 표현으로서 변수에 담아 정의되고 호출된다.
Q12. getName과 같이, 함수가 할당된 객체데이터의 속성을 무엇이라 하는가?
const user={
getName:function()[]
}메서드
Q13. 조건이 참인 조건문을 작성하시오.
if(true){};
Q14. 가져온 js파일을 html문서 분석이후에 실행하도록 지시하는 html속성은?.
defer
Q15. 아래 html요소의 내용을 콘솔출력하시오.
<div class="box">box</div>let boxEl = document.querySelector('.box'); console.log(boxEl.textcontent)
Q16. 값을 재할당할 목적의 변수 키워드는?
let
Q17. 아래 코드의 boxEl요소 클릭시 hello를 콘솔출력하시오.
const boxEl = document.querySelector('.box')boxEl.addEventListener('click',function(){ console.log('hello'); })
Q19. 아래 두개의 div요소에 js로 class="hello"를 추가하시오.
<div>1<div>
<div>2</div>const divEls = document.querySelectorAll('div'); divEls.forEach(function(divEl){ divEl.classList.add('hello'); })
Q20. 아래와 같이 메소드를 이어 작성하는 방법을 무엇이라 하는가?
'oching'.split('').reverse().join('');메서드체이닝
Q21. boxEl요소에 active 클래스 값이 있으면 '포함'이라고 콘솔 출력하시오.
const boxEl = document.querySelector('.box');if( boxEl.classList.contains('active') ){ console.log('포함'); }
FE Studying