front-end 국비과정 일차 10일차 학습일지 JS 선행학습 내용 정리

국비지원 10일 차

JS 표기법

1 dash표기법: 단어와 단어 사이에 -(하이픈)을 사용하여 표기하는 방법 주로 HTML CSS에서 사용한다
ex)

<div class ="test-case">test</div>

2 snake표기법:단어와 단어사이에 _(언더바)을 사용하여 표기하는 방법 주로 HTML CSS에서 사용한다
ex)

.snake_case{
background-color: orange
}

3 camel표기법:첫단어는 소문자로 작성하고 두 번째 단어부터 첫 글자를 대문자로 표기하는 표기법 주로 JS에서 사용된다

ex)

let camelCase = "hellow world"
console.log(camelCase)

4 pascal표기법: 단어의 첫단어는 반드시 대문자로 표기한다 주로 JS에서 사용된다 

4-1 pascal표기법과 camel표기법의 차이점
표기하는 방식은 유사하나 pascal표기법은 첫 단어도 대문자를 작성하고 camel표기법은 첫 단어는 소문자로 작성한다는 차이가 있다.

JS는 특수한 경우를 제외하고 숫자를 0부터 시작한다


JS데이터 종류
1String: 문자를 명시하는 데이터이다 해당 데이터는 ' '와 " "안에 내용을 작성한다

ex) 

let myName = "Kim Jung Hwan"
console.log(typeof myName)

이때 문자와 문자를 더할 수 있는데 이때 +기호를 사용한다 

let myName = "Kim" +" " + "Jung" +" " + "Hwan"
console.log(myName)

`(백 틱)을 이용하여 더하기 없이 사용하는 방법도 있다 이때 변수가 사용된다면 변수명은 ${ } 안에 넣어 사용한다 
`(백 틱)은 ""로 공백을 만들지 않아도 띄어쓰기가 되고 +를 사용하지 않아도 단어를 조합할 수 있다는 장점이 있다.
ex)

let age = 26
let gender = "male"
let MYname = "KimJungHwan"
let person = `저의 나이는 ${age}이고 성별은 ${gender}입니다 이름은 ${MYname} 입니다`
console.log(person)

2 Number : 숫자를 나타내는 데이터이다 
ex)

let x = 26
let y = 10

console.log(typeof x)
console.log(y)

3boolean: true와 false를 이용해 비교대상의 옮고 그름을 판단한다
ex)

let a = 3
let b = 5 
let c = a>b
console.log(a<b)
console.log(a>b)
console.log(typeof c)

4undefined : 값이 할당되지 않은 상태를 의미한다
ex)

let test 
let ironMan= {firstName:"iron"}

console.log(test)
console.log(ironMan.lastName)

5null : 값이 없는 상태를 의미한다 
ex)

let car = null

console.log(car)

undefined와 null의 차이
undefined와 null은 값이 존재하지 않는다는 공통점이 있지만 
null은 계발자가 필요해서 의도적으로 값을 없는 상태로 만든것이고 undefined는 의도치 않게 값이 없는 상태로 만든 것이다

6 object: { } 안에 key와:value를 이용해 1대 1 대응방식으로 데이터를 저장한다 
6-1 key와 value란? key는 데이터의 이름이고 value는 데이터의 값이다
6-2 object안에서 key와 value로 데이터를 저장할 때 다음 key와 value를 , 로 구분해야 한다

ex)

let myName ={
  firstName: "Kim",
  lastName:"JungHwan"
}
console.log(myName.firstName)
console.log(myName.lastName)

7array : [ ] 안에 데이터를 순차적으로 저장한다 이때 인덱스 번호를 사용하는데 숫자를 0부터 센다 때문에 array의 첫 번째 데이터는 인덱스 번호가 0이다
ex)

let arr = [1,2,3,"kim",4,"jung",5,"hwan"]

console.log(arr[0])
console.log(arr[5])

object와 array의 차이점
object와 array는 데이터를 저장한다는 공통점이있지만 
7-1 object는 key:value를 이용한 1대1대응 방식으로 데이터를 저장한다
7-2 array는 데이터를 순차적으로 나열하여 저장한다 
7-3 즉 object와array는 데이터 저장 방식에서 차이점을 보인다

변수와 상수:데이터를 저장하고 사용하는 데이터 이름을 설정한다 

재선언이란? 동일한 변수이름을 사용하는 것을 의미한다
ex)

let a=7
let a=5 
console.log(a)

재할당이란?: 해당변수의 새로운 값을 설정하는 것을 의미한다
ex)

let a=7
a=5 
console.log(a)

let(변수) : 재선언은 불가능하고 재할당은 가능하다 

const(상수) : 재선언과 재할당 둘다 불가능하다
ex)


변수를 사용할때는 예약어를 사용할 수없다

예약어란? 
1JS에서 이미 기능적으로 사용되는 단어들을 의미한다 ex) this, if, for 등등


함수 : 로직을 형성하여 만든 기능을 재사용할 수 있게 만들어준다 이때 function이라는 키워드를 사용한다

1 함수 선언식 = 함수에 기본 형태로써 함수 이름을 명시하여 만든 함수이다

2 함수 표현식 = 변수에 함수를 담은 형태로 써 함수 이름을 따로 명시하지 않는다 

3 함수 호출 = 해당 함수를 불러서 사용하겠다는 의미다

ex)

function Myfunction(a, b) {
  let calc = a * b
return console.log(calc)
}
// 위 코드처럼 작성하면 함수 선언식으로써 함수이름을 명시한다 function은 함수를 사용하겠다는 키워드이고 Myfunction은 함수이름이다 ()안에
// a,b는 파라미터라고 하는데 함수안에서만 사용가능한 입력값 으로 사용된다 이때 값이 설정되면 인자라 부른다 
// 함수를 호출할때 함수이름을 명시하고 ()안에파라미터에 넣어줄 값을 입력한다

let test =function(a, b) {
  let calc2 = a / b
return console.log(calc2)
}
// 위 코드처럼 작성하면 함수 표현식으로써 변수에 함수를 담은형태로  함수이름을 명시하지않는다
// 함수를 호출할때 변수이름을 명시하고 ()안에 파라미터에 넣어줄 값을 입력한다

Myfunction(2,1) 
test(1,2)
//함수를 호출한 코드이다 Myfunction은 함수선언식 test는 함수표현식으로 작성되었다

함수 표현식과 선언식의 차이 
1 함수 표현식과 선언식은 작성법도 다르지만 가장 중요한 차이는 JS엔진이 함수를 해석하는 방식이다 
2 함수 선언식은 JS엔진이 호출할 함수를 먼저 찾은 후에 함수를 호출하지만 함수 표현식은 JS엔진이 코드가 작성된 순서대로 해석하기 때문에 함수 호출을 먼저 했을 때 오류가 날 수 있다.
ex)

Myfunction(2,1)
function Myfunction(a, b) {
  let calc = a * b
  console.log(calc)
}
// 함수 선언식으로 작성되었기 때문에 함수호출을 선행해도 error X

test(1,2)
let test =function(a, b) {
  let calc2 = a / b
  console.log(calc2)
}
// 함수 표현식으로 작성되었기 때문에 함수호출을 선행하면 오류O

조건문: 조건의 결과가 참(true)일때 해당 문장을 실행하고 false라면 다음 구문으로 이동한다 

if ()안에 어떠한 조건을 작성하고 () 안에 조건이 참이면 {} 안에 내용을 실행한다 
else: if의 조건이 거짓일때 실행할 내용을 작성한다 

ex)

let a = 30
let b = 15

if (a > b) {
  console.log("참 입니다.!")
} else {
  console.log("거짓 입니다.!")
}
// a가 b보다 크기때문에 참(true)때문에 다음문장은 실행되지않는다
if (a<b) {
  console.log("참 입니다.!")
} else {
  console.log("거짓 입니다.!")
}
// a가b다 크기때문에 거짓(false) 때문에 else의 문장이 실행됨

method : 함수에 사용되는 속성을 의미한다

DOM API : HTML에 명시된 태그나 class, id 등등을 제어할 때 사용하는 명령이다

1 document.querySelector(html에서 사용된 태그,class,id 등등) : 명시한 html에서 사용된 속성 또는 태그를 JS가 선택한다 이때 제일 먼저 찾아지는 요소 하나를 선택한다

2 document.querySelectorAll(html에서 사용된 태그,class,id 등등): 명시한 html에서 사용된 속성 또는 태그를 JS가 선택한다  () 안에 명시한 모든 요소를 선택한다.

3 addEventListener(1,2): 파라미터를 2개 사용하여 1번 파라미터에는 어떤 동작을 할껀지 event를 설정하고 2번 파라미터에는 어떠한 내용을 실행할 건지 설정한다 이때 2번 파라미터에 동작 내용을 함수로 명시하는 것을 eventHandler라 부른다.

 

addEventListener를 사용할때 1번 파라미터에 사용 가능한 event
3-1 click : 해당 요소가 클릭되었을 때 2번 파라미터를 실행한다 
3-2 focus: 대화형 콘텐츠 요소 ex) input 같은 요소에 초점이 맞춰졌을 때 2번 파라미터를 실행한다
3-3 blur:  대화형 콘텐츠 요소 ex) input 같은 요소에 focus가 해제되었을 때 2번 파라미터를 실행한다 

 

ex)

<button class="box" click="boxEl">box!!</button>
  
<script src="./test.js">
let boxEl = document.querySelector('.box')
// 클레스가 box인html에 요소를 선택하여 boxEl이라는 변수안에 담은코드 
console.log(boxEl)

boxEl.addEventListener('click',function(){
  console.log("클릭되었습니다")
})
// 1번파라미터 즉 click이라는 명령어를 통해 클릭했을때 , 2번파라미터 즉 
// 클릭되었습니다 라는 내용을 console창에 출력한다
</script>

3classList : 해당 변수가 가지고 있는 class의 목록을 의미한다 이때 선택된 html에 요소가 class를 가지고 있다면 기본적으로 classList에 추가된다

classList의 사용되는 Methods
3-1 add() : classList에 class를 추가한다 이때 괄호 안에 추가할 class이름을 명시한다 
3-2 remove() : classList에 class를 삭제한다 이때 괄호 안에 삭제할 class이름을 명시한다
3-3 contains(): classList에 해당 class가 있는지 조회한다 이때 괄호 안에 조회할 class이름을 명시한다 만약 있다면 true를 반환하고 없다면  false를 반환한다.

ex)

<button class="box" click="boxEl">box!!</button>

  <script>
    let boxEl = document.querySelector('.box')
    boxEl.classList.add("jsCode") //boxEl이라는 변수안에 작성된 html 요소의 jsCode라는 class추가
    console.log(boxEl)
    console.log(boxEl.classList.contains("jsCode")) //boxEl이라는 변수에 js라는 class가 추가되었는지 확인
    // boxEl.classList.remove('jsCode') jsCode라는 class를 삭제함 
    // console.log(boxEl) jsCode라는 class가 삭제되었는지 확인
  </script>

forEach(1,2) = 특정요소를 존재하는 만큼 조회한다 이때  1번 파라미터에는 반복 중인 요소를 명시하고 2번 파라미터에는 반복 중인 요소의 index번호를 명시한다
ex)

<div class="container">
    <button class="box" click="boxEl">box!!</button>
    <button class="box" click="boxEl">box!!</button>
    <button class="box" click="boxEl">box!!</button>
  </div>

  <script>
    let boxEls = document.querySelectorAll('.box')

    let test = boxEls.forEach(function (boxEl, index) {
      console.log(boxEl)
      console.log(index)
    })
    console.log(test)
  </script>

 // 위코드는 
    // 1querySelectorAll을이용해 box라는 class를 가진 요소를 전부선택했다
    // 2 test라는 변수안에 class가 box인 요소를 전부 조회한다 
    // 3 boxEl이라는 파라미터는 반복중인 요소를 명시하고 index는 반복중인 요소의 index번호를 명시한다
    // 4 {}안에 실행할 내용을 설정한다
    // 5 test라는 변수를 콘솔창에 띄운다
    // 이때 1번파라미터와 2번파라미터의 이름은 원하는대로 설정해도 무관하다 중요한것은 각각 파라미터하 어떤기능      //을 하는것인가를 알아야한다.