본 내용은 노마드코더의 바닐라 자바스크립트 유튜브 강의를 보며 정리했다.

문법 리스트

1. 데이터를 정렬하는 Array와 Object.
2. 함수
   (1) 함수의 기본
   (2) 백틱을 사용한 pretty cool string🤟
   (3) Return
   (4) 사칙연산
   (5) JS Dom function / JS로 Dom 변경하기
   (6) event & event handlers
   (7) if else 조건문
   (8) 조건문 + event handler 사용해 title 색 변경하기
   (9) 각자의 일을 하게 하자

1. 데이터 정렬

(1) Array[]

const daysOfWeek = ["Mon","Tue", "Wed","Thu", "Fri","Sat", "Sun"]
console.log(daysOfWeek) //[ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]

(2) Object{}

const cecyInfo = {
  name:"Cecy",
  age:28,
  gender:"Female",
  isBeautiful:true, 
  favMovies: ["오만과편견,", "인셉션", "하울의 움직이는 성"], // object안에 array를 넣음
  favFood: [
    {
      name: "연어",
      fatty: false
   },
   {
     name: "홈련볼",
     fatty: true
   }
  ] // object안에 array를 넣고 다시 그 안에 object를 넣음. 
}
cecyInfo.gender = "Women" // const로 선언된 변수값이여도 object안에서 변경이 가능하다!
console.log(cecyInfo); 
/*
{ name: 'Cecy',
  age: 28,
  gender: 'Women',
  isBeautiful: true,
  favMovies: [ '오만과편견,', '인셉션', '하울의 움직이는 성' ],
  favFood: [ { name: '연어', fatty: false }, { name: '홈련볼', fatty: true } ] }
  */

2. 함수

(1) 함수의 기본

function sayHello(Name,age){   // Name과 age는 변수의 이름(parameter or argument라고함.) 
console.log('Hello!', Name, "you have",age,"years of age.");  //console.log함수는 argument를 무한하게 가질 수 있다. 
}

sayHello("Cecy", 28); 
//출력 - Hello! Cecy you have 28 years of age.
/*참고
argument(인자)인 Cecy를 Name에 넣은거임! 
함수는 인자를 받는다. argument는 변수같은거다.*/  

(2) 백틱을 사용한 pretty cool string🤟

function sayHello(name,age){  
console.log(`Hello ${name} you are ${age} years old`);  //백틱> 스트링에 %{}사용
}
sayHello("Cecy", 28); 

(3) Return

function sayHello(name,age){  
  return `Hello ${name} you are ${age} years old`;  
} 

const greetCecy = sayHello("Cecy", 28); //greetCecy는 sayHello함수의 리턴 값이다. 그렇기 때문에 sayHello함수안에 return이 없으면 반환된 값이 없어서 undifined 뜸! 
console.log(greetCecy) // console.log는 객체임(?)

(4) 사칙연산

//플러스
 function plus(a,b){  
   return a + b; 
 }

const calculate = plus(5,5);
console.log(calculate)  // 10

//마이너스
function minus(a,b){  
   return a - b; 
 }

const calculate = minus(10,5);
console.log(calculate) //5

//곱하기
function times(a,b){  
   return a * b; 
 }

const calculate = times(10,5);
console.log(calculate) //50

//나누기
function div(a,b){  
   return a / b; 
 }

const calculate = div(10,5);
console.log(calculate) //2

//제곱
function square(a,b){  
   return a ** b; 
 }

const calculate = square(2,5);
console.log(calculate) //32

//니코 쌤이 적은 코드
const calculator = {
 plus: function(a,b){  //plus: 이 나를 혼란스럽게 한다.. 왜 funtion plus(a,b)가 아닌것인가? > 내가 생각한대로 해도 같은 결과 값이 나온다. 
   return a + b; 
 }
}
// console.log(greetCecy)
const plus = calculator.plus(5,5)// 여기에 있는 plus는 log와 같이 함수의 기능을 하니까 윗줄에 plus: 도 함수가 되는거다!
console.log(plus) 

(5) JS Dom function / JS로 Dom 변경하기

모든 객체들의 함수들은 DOM (Document Object Model)형대토 변경이 가능하다. 자바스크립트로 선택한 것은 객체가 된다.

const title = document.getElementById("title");
title.innerHTML = "Hi! From JS"; // title 텍스트 변경
title.style.color = "red"; // title 컬러 변경
document.title = "I own you now"; // 페이지 이름 변경

(6) event & event handlers

// 윈도우 창 리사이징 될때 console.log 찍기
const title = document.querySelector("#title");  // querySelector로 index.html의 원하는 부분을 잡아줄 수 있다. 여기서 나는 id값이 title인 곳을 잡은 것! 
function handleResize() {
  console.log("I have been resized");
}

window.addEventListener("resize", handleResize);
 
// click 하면 title 컬러 변경  
const title = document.querySelector("#title");
function handleClick() {
 title.style.color = "blue";
}

title.addEventListener("click", handleClick);

(7) if else 조건문

// &&는 두 조건이 모두 참이여야함. 
true && true = true;
true && false = false;
false && true = false;
false && false = false;

if ( 20 > 5 && "Cecy" === "Cecy"){
  console.log("Yes");
} else {
  console.log("no");
}

//|| 는 둘 중 하나만 참이여도 됨.
true || true = true;
true || false = true;
false || true = true;
false || false = false;
 
if ( 20 > 5 || "cecy" === "Cecy"){
  console.log("Yes");
} else {
  console.log("no");
}

//How old are you?
const age = prompt("how old are you?");
if (age >= 18 && age<=21){
  console.log("you can drink but you should not");
} else if (age > 21){
  console.log("go ahead")
} else {
  console.log("too young");
}

(8) 조건문 + event handler 사용해 title 색 변경하기

혼자 title 색 변경 코드를 작성해 보았는데, init의 존재를 파악하기 어려웠다. 그리고 currentColor의선언도 function 안에 넣어주는것을 캐치하지 못하고 수많은 error와 싸워야 했다. 영상 마무리 때 다시 한번 스스로 title색을 변경해 보자!!!

const title = document.querySelector("#title");

const BASE_COLOR = "rgb(255, 228, 196)";
const OTHER_COLOR = "#9b59b6";

function handleClick(){
 const currentColor = title.style.color;
 if (currentColor === BASE_COLOR){
   title.style.color = OTHER_COLOR;
 } else {
   title.style.color = BASE_COLOR;
 }
}

function init(){
  title.style.color = BASE_COLOR;
  title.addEventListener("click", handleClick);
}
init();

(9) 각자의 일을 하게 하자

(8)까지는 javascript를 통해 css를 변경해줄 수 있다는 사실을 파악하느라 css에 해당하는 내용을 javascript파일에 적었다. 이제는 각자의 일을 분명하게 하도록 만들어 줄 시간.

각, html, css, javascript파일의 코드를 살펴보자.

(HTML)

<!DOCTYPE html>
<html>
    <head>
        <title>Something</title>
        <link rel="stylesheet"
              href="index.css"/>
    </head>
    <body>
        <!--    class를 추가했다. -->
        <h1 id="title" class="btn"> this works!</h1> 
        <script src="index.js"></script>
    </body>
</html>

(CSS)

body{
    background-color:peru;
}

.btn{
    cursor : pointer;
}
h1 {
  color:#2ecc71;
  transition: color 0.5s ease-in-out;
}

.clicked {
  color : #e67e22;
}

(Javascript)
classList를 사용해서 className을 지우고 다시 더해주고를 반복하도록 만들었다.

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    const hasClass = title.classList.contains(CLICKED_CLASS)
    if (hasClass) {
        title.classList.remove(CLICKED_CLASS);
    } else {
        title.classList.add(CLICKED_CLASS);
    }
}
function init(){
  title.addEventListener("click", handleClick);
}
init();

• toggle이라는 엄청난 아이를 만났다. toggle은 함수값을 체크해서 있으면 add 없으면 remove하는 작업을 반복해준다. 덕분에 위에서 적었던 6줄의 코드를 깔끔하게 한줄로 나타낼 수 있다. 소름..

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    title.classList.toggle(CLICKED_CLASS) // toggle은 함수값을 체크해서 있으면 add 없으면 remove하는 작업을 반복해준다.
 
}
function init(){
  title.addEventListener("click", handleClick);
}
init();

오늘의 생각

20.10.28) 아, 너무 재밌어서 끝까지 다 듣고싶은데ㅠㅠ 제주도갈 준비로 인해 오늘은 여기까지 들어야한다. 눈물....제주도 '때문에' 코딩 더 못해서 슬픈 오늘..
20.11.02) 바닐라자바스크립트 이론 내용을 한번 쭈욱 보았다. 혼자 로직을 생각해보며 코드를 적어보았지만 아직 혼자 로직을 생각해 내는것이 어려운것 같다. 😭 거듭되는 에러메세지에 코딩을 뿌셔버리겠다 했지만 결국 부셔지는것은 내자신... 코..코딩은 재밌다...👻

추가 공부해야 할 것

1. DOM과 객체 개념.
2. 스스로 로직을 생각해 코드를 적는 것.
3. function init()
4. classList