[JS] Vanilla Javascript 복습 1

10월 17일
노마드코더 사이트에서 자바스크립트 공부를 시작했다.
호기롭게 예습할 여유 없이 바닐라JS강의와 챌린지를 함께 진행하려했으나 실패.
챌린지는 일단 포기하고, 내 페이스대로 강의를 다 들었다.

 

11월 15일
지금은 또 다른 강의를 듣는 중인데,
바닐라JS 수업의 챌린지 기간이 다시 돌아와서 등록했다.
매일 나오는 퀴즈도 풀고 기록도 하면서 들었던 강의 내용을 복습해보면 좋을 것 같다.

 

---

 

👀 Why Javascript

• 자바스크립트는 프론트엔드가 사용할 수 있는 유일한 프로그래밍 언어다.(HTML/CSS는 프로그래밍 언어가 아니다)
• 자바스크립트는 모든 브라우저에 내장되어있어 설치할 필요가 없다. 그래서 파워풀하다.
• 브라우저는 HTML/CSS/Javascrip만 이해할 수 있다.
• 자바스크립트는 10일만에 만들어진 언어라고 한다. 그래서 불완전한 요소가 많았고, 지금까지 다양한 업데이트가 필요했다.
• 자바스크립트는 유저와의 상호작용을 위해 만들어졌다.
• 자바스크립트로는 심지어 비디오게임 같은것도 만들 수 있다.
  https://bruno-simon.com/ 와..👀

 

---

 

📌 JavaScript syntax

Variables
const : 상수 선언. 재선언 금지. 재할당 금지. 주로 사용.
let : 변수 선언. 재선언 금지, 재할당 가능. 가끔 사용.
var : 재선언 가능, 재할당 가능. 코드의 작성 의도가 보이지 않으므로 사용하지 말 것.

let userName = 'Tony';
userName = 'Brian';​

 

Booleans
true : 1
flase : 0
null : 값이 없음. 비어있음.
undefined : 값이 정의되지 않음.

const amIFat = null;
// 의도적으로 값을 넣지 않음
let areYouFat;
// 값을 정의하지 않음 === undefined
// const로는 값이 정의되지 않은 것을 선언할 수 없다.​

 

Arrays
array의 값으로는 어떤 타입의 데이터든 들어올 수 있다.
(variables, boolean, text, number..)

const colors = ['red', 'orange', 'yellow'];
colors[0];
// array에 들어있는 item을 가져온다. 맨 앞 0부터 시작.
colors.push('green');
// colors array에 green 아이템을 추가함.​

 

Objects
여러 아이템에 속성을 부여해서 정의할 수 있다.
: 설명이 필요하지 않은 데이터 리스트는 Array로
: 설명이 필요한, 정보가 담긴 데이터 리스트는 object로

const player = {
  name: 'Jessie',
  point: 10,
}​

const는 재선언,재할당 금지이지만 선언된 오브젝트 내 속성은 재할당하거나 추가할 수 있다.

player.name = 'Tony'; // It works
player = 'Tony'; // It doesn't work​

 

Functions
원하는 코드를 묶어서 여러번 실행할 수 있게 해준다.
: function을 실행할때 argument를 넣어줄 수 있다. 여러개도 가능.
: 실행코드에서 ()안에 argument 데이터를 넣어서 function에게 보내줄 수 있다.
: function안에 선언된 variables는 function안에서만 사용할 수 있다.

function sayHello(name, age) {
  console.log('I am' + name + 'and I am' + age);
};
sayHello(Jessie, 15);
// 콘솔에 'I am Jessie and I am 15' 출력​

object 안에 function을 넣어서 사용할 수도 있다.
: object의 속성을 function 안에서 사용할때는 this를 사용하자. (요건 강의에서 안배웠기때문에 검색해보고 아래에 기록)

const character = {
  name: 'Jessie',
  greeting: function(friendName) {
    console.log('Hello ' + friendName + ', I am' + this.name);
  },
};
  character.greeting('Tony');
// 콘솔에 'Hello Tony, I am Jessie' 출력​

 

this
this는 문맥에 따라 값이 변화한다. 지금 모두 이해하기에는 연결해서 더 알아봐야할 것들이 많으니까
다른 용법에 대해서는 다음에 아라보자;;
object 내부에 있는 function(method)에서 사용한다면 this는 해당 object 자체를 가리킨다.

const greeting = {
  name: 'Jessie',
  sayHello: function() {
    console.log('Hello ' + this.name);
  },
};​

(참고글) https://wormwlrm.github.io/2019/03/04/You-should-know-JavaScript-this.html

 

 

 

Return
코드의 결과값을 받아 활용하기 위해 return을 사용한다.
: console.log / alert 등의 함수로는 우리가 결과를 시각적으로 브라우저 내에서 받을 수 있으나, 그 결과값을 유의미하게 활용하지는 못하기 때문.
또, return은 함수의 사용 종료를 나타낸다.
: 따라서 그 다음의 코드는 실행되지 않는다.

const calc = {
  plus : function(a, b) {
    return a + b;
    console.log('Okay bye'); // 실행되지 않는다
  },
  minus : function(a, b) {
    return a - b;
  },
};
const plusResult = calc.plus(2, 3);
const minusResult = clac.minus(plusResult, 5);
// return으로 받아온 값을 다른 함수에 사용한 예시​

 

Conditionals
if문의 ()에 들어가는 condition은 boolean 값이어야 한다.
if에 속한 코드가 condition에 따라 true이면 실행한다.
false이면 실행하지 않고, 다음의 else if 또는 else의 코드를 실행한다.

const age = parseInt(prompt('Your age?'));
// 코드는 안쪽부터 바깥쪽으로 실행된다.
if (isNaN(age) || age < 0) {
  colsole.log('Please write a positive number');
} else if (age < 18) {
  console.log('You are too young to drink');
} else (age > 18) {
  console.log('Enjoy your drink');
}​

if문 안에서 자료를 비교할 때 쓰는 연산 기호는 <, >, <=, >=, ==, === 가 있다.
== 자료만 비교하므로 1 == '1' : true
=== 자료의 타입까지 비교하므로 1 == '1' : false

 

 

HTML in Javascript
Javascript에서 HTML의 내용을 바꿀 수 있다.

document.title = 'I can change the title';
// JS에서 문서 탭에 표시되는 제목을 바꿈
const greeting = document.getElementById('greeting');
// HTML에서 아이디가 greeting인 태그를 JS에서 상수로 만들었다.
const greeting = document.querySelector('#greeting');
// 위와 동일한 결과
greeting.innerText = 'It changed from JS';
// 잡아온 태그의 텍스트를 JS에서 수정했다.
const apple = document.querySelector('.apple p');
// CSS와 동일한 방식으로 클래스명을 사용해 불러올 수 있다.
// 해당하는 첫 element만 가져오게 된다.
const apple = document.querySelectorAll('.apple p');
// 해당하는 모든 elements를 array로 가져온다.​

 

Events
사용자의 동작을 인식하고 함수를 실행시켜줄 수 있다.

const apple = document.querySeletor('apple');
function handleClick() {
  console.log('It was clicked');
};
apple.addEventListener('click', handleClick);
// apple에서 click 이벤트가 발생할 경우 handleClick 함수가 실행된다.​

eventListener에 넣는 함수명에는 함수를 실행시키는 ()를 사용하지 않는다.
: 함수명 뒤에 ()를 넣으면 즉시 함수가 실행되어 버린다. 여기서는 이벤트가 발생하는 순간에 맞춰 함수가 실행되기를 바라기때문.

apple.onClick = handleClick
apple.addEventListener('click', handleClick);​

위의 두 코드는 동일한 역할을 한다.
: 하지만 아래의 코드를 더 선호하는 이유는, removeEventListener를 사용하여 변경할 수 있기 때문이다.

 

 

CSS in Javascript
컬러 등 디자인과 관련된 코드는 CSS에서 작성한 다음, JS에서 활용하는 것이 좋다.
: 아래 코드는 CSS에서 특정 클래스에 컬러값을 넣은 다음, 이벤트에 따라 element의 컬러값이 변하도록 한다.
JS에서 CSS에 작성한 클래스를 변경하기 위해 사용하는 코드
variable.className(active) : variable이 가진 클래스 전체를 대체한다 but 비효율적.
variable.classList.add(active) : variable에 active 클래스를 추가한다.

const title = document.querySelector('h1');
function titleClick() {
  const activeClass = 'active';
  // 이 함수 안에서 active라는 클래스명은 반복해서 사용될 것이므로 상수로 정의해놓는 것이 효율적이다.
  if(title.classList.contains(active)) {
    title.classList.remove(active);
  } else {
    title.classList.add(active);
  };
};
title.addEventListener('click', titleClick);
// title에 클릭이벤트가 발생하면 CSS에 정의된 active 클래스가 추가되었다가 제거되었다가 하게된다.​

위 예시처럼 클래스를 넣고 빼는 코드는 많이 사용되므로 아래와 같이 간단하게 바꿀 수 있다.

function titleClick() {
  title.classList.toggle('active');
};​

 

ETC.
variables의 데이터 type을 알 수 있는 코드

console.log(typeof variableName);​

기본값인 string을 number로 바꿔주는 코드

console.log(ParseInt(variableName));​

Number의 여부를 boolean으로 보여주는 코드

console.log(isNaN(variableName));​

Element의 내부 데이터를 자세히 보여주는 코드

console.dir(variableName);​

 

&& : And operator : 둘 다 충족
|| : Or operator : 둘 중 하나
=== : 동일한 값을 찾는 연산자
!== : 동일하지 않는 값을 찾는 연산자

---

확실히 다시 적어보니까 전보다 좀 더 넓은 범위로 꼼꼼하게 복습할 수 있었다.
기록하는 복습 최고!👍🏻👍🏻