자바스크립트 선행
⁘ HTML에 연결하기
⁘ 표기법
dash-case(kebab-case): 띄어쓰기 대신-사용하며 주로 html, css에서 사용snake_case: 띄어쓰기 대신_사용camelCase: 띄어쓰기 대신 다음에 오는 단어의 첫글자를 대문자로 사용하며 주로 많이 사용하는 방법PascalCase: camelCase와 비슷하지만 첫번째 단어의 첫글자도 대문자로 사용
⁘ zero-based numbering
: 프로그래밍 언어에서는 주로 숫자를 0부터 시작한다.
console.log(new Date('2022-08-01').getDay()); // 1
// 일요일: 0 ~ 토요일: 6⁘ 데이터 종류 (자료형)
데이터를 기준으로 생각하기
⁕ String (문자 데이터)
: "", '', `` 로 감싸서 나타낸다.
let myName = "soyeon";
let email = 'abcd@gmail.com';
let hello = `hello! ${myName}! 문자와 변수 등 다양한 데이터를 한번에 담을 수 있다.`⁕ Number (숫자 데이터)
: 정수 및 부동소수점 숫자를 나타낸다.
⁕ Boolean
: true, false 두 가지 값밖에 없는 논리 데이터
⁕ undefined
: 값이 할당되지 않은 상태를 나타낸다.
⁕ Null
: 어떤 값이 의도적으로 비어있음을 의미한다.
⁕ Object
: 여러 데이터를 {key: value, key: value} 형태로 저장한다.
데이터 접근 시 objectName.key 방식으로 접근한다.
⁕ Array
: 여러 데이터를 [data1, data2, data3] 형태로 저장한다.
데이터 접근 시 arrayName[index] 형태로 접근한다. index는 0부터 시작
⁘ 변수
재사용
⁕ 변수 선언 키워드
const: 재할당 불가한 변수 생성
let: 재할당 가능한 변수 생성 (재할당이 필요한 경우에만 사용하도록 권장하기도 함)
⁕ reserved word (예약어)
: 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
⁘ 함수
⁕ 함수 선언 : function 키워드
function name(){} 형태로 함수 선언
⁕ 함수 호출
functionName(); 형태로 함수 호출
⁕ 함수는 값을 리턴한다.
⁕ 자바스크립트는 First-class function
: 프로그래밍 언어에서 함수는 다른 함수의 인자로 전달하거나 다른 함수의 리턴값으로 사용되거나 변수로 사용될 수 있음을 의미한다.
function returnFunc() {
return 123;
}
let a = returnFunc();
console.log(a); // 123⁕ parameters(매개변수)와 arguments(인수)
매개변수 : 함수 호출에서 전달받은 인수를 함수 내부로 전달하기 위한 변수
function sum(a, b) {
// a, b는 함수 sum의 매개변수
// 매개변수는 함수 내에서만 사용가능한 변수
return a + b;
}
let a = sum(1, 2);
// 1, 2는 함수 sum의 매개변수로 전달 되는 인수
console.log(a); // 3⁕ 익명함수(Anonymous Function)
: 이름이 없는 함수
function() {}형태- 함수의 이름이 없는 경우 데이터로 사용되거나 변수의 값으로 할당 가능하다.
⁕ 이런 경우 '함수 선언'이 아닌함수 표현이라고 말한다. - 함수가 할당된 객체 데이터의 속성(property)는 method라고 부른다.
const hello = function() {
console.log('hello');
}
hello(); // hello
const person = {
name: 'soyeon',
age: 11,
getName: function(){
return this.name;
}
}
const hisName = person.getName();
console.log (hisName); // soyeon
console.log(person.getName()); // soyeon⁘ 조건문
: 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문
if(조건) {조건이 참일 때 실행문} else {조건이 거짓일 때 실행문}
⁘ DOM API
DOM: document Object Model
: html의 div, span, input과 같은 요소들API: Application Programming Interface
: javascript에서 html을 제어하기 위해 사용하는 명령들
<div class="box">box</box>// html 요소(element) 중 가장 먼저 찾아진 요소 1개 검색
const boxEl = document.querySelector(".box");
// html 요소의 text 가져오기
console.log(boxEl.textContent); // box
// html 요소에 적용할 수 있는 메소드
//addEventListener(핸들러, 실행할 함수)
boxEl.addEventListener('click', function(){
console.log('click'); //click
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); //false
});
/* 위에서 아래로 실행 되기 때문에 아래처럼 결과가 나타남 */
// click
// true
// false
// html 요소(element) 모두 검색
// boxEls 는 유사배열로 배열형태로 데이터 생성
const boxEls = document.querySelectorAll('.box');
boxEls.forEach(function(boxEl, index){
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
});
// 0 <div class="box order-1">box</div>
⁘ Getter, Setter
- Getter : 값을 얻는 용도의 개념
- Setter : 값을 지정하는 용도의 개념
⁘ 메소드 체이닝
: 조건에 부합해야 하긴 하지만 여러 메소드를 이어서 적용하는 것
// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse: 배열을 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환
const a = 'Helllo~';
const b = a.split('').reverse().join('');
console.log(a); // Hello~
console.log(b); // ~olleH
#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의 #React&Redux로시작하는웹프로그래밍
