JavaScript에 관한 기본지식

• 자바스크립트는 모든 컴퓨터에 내장되어있어 설치가 필요없다
  -> 자바스크립트의 강력한 장점

• 프론트엔드 선택지 -> only JavaScript

• HTML+CSS+JavaScript

• tree.js -> 3D, React Native -> 안드로이드, ios 앱, 일렉트론 -> 데스크톱 앱, ml5.js -> 머신러닝

• javascript를 사용하고자하면 브라우저의 콘솔을 사용하면 된다.

• 브라우저에서 우리가 보고자 하는 것은 html파일을 브라우저로 가져와 보여지는 것이다.

• 브라우저는 HTML을 열고, HTML은 CSS와 JavaScript를 가져오는 것이다. (HTML은 중간접착제 역할을 하는 것이다.)

• JS파일을 변경하는데 중점을 두고, 페이지 새로고침해서 확인하는 과정을 거친다.

• 브라우저의 개발자도구(F12)를 통해서 Elements, Console 등등을 확인할 수 있다.

• Elements에서 작성한 CSS를 확인할 수 있고, Console에서 JS를 확인할 수 있다. (오류확인 등)

• CSS에서는 style에관한 작업, JS에서는 animation에관한 작업을 하는 것을 선호한다.

JavaScript의 기본적인 문법

// 1. 변수
//name = "jihu";
//age = 24;

//let과 const 활용하자
//const는 상수.. 변하지 않는 값.. 가급적 대문자로 사용
//let은 변할 수 있는 값
//tip. 모든 변수를 const로 선언하고, 변경될 여지가 있는 경우 let으로 바꿔준다.
//예약어는 사용할 수 없다.
//첫글자는 숫자가 될 수 없다.
//변수는 문자와 숫자, $와 _만 사용
//let name = "jihu";

//alert(name);
//console.log(age);

//let 변수, var 변수, const 변수

//2. 자료형
const name = "jihu"; //문자형 string
//큰따옴표와 작은따옴표의 차이는 없다.

//문자열 내부에 작은 따옴표를 넣고자할 때
const message = "l'am a boy.";

//문자열 내부에 변수를 넣고자할 때
const message2 = `나의 이름은 ${name}입니다.`;
console.log(message2);

// 숫자형
const age = 24;
const PI = 3.14;

console.log(1 + 2);
console.log(10 - 3);
console.log(3 * 2);
console.log(6 / 3);
console.log(6 % 4);
console.log(6 ** 4); //제곱

//문자형도 더하기 사용가능
console.log(message + 11 + message2 + "just studying");

const x = 1 / 0;
console.log(x); //Infinity 무한대 값을 얻는다.

const y = name / 2;
console.log(y); //NaN = Not a Number 숫자가 아닌 값.

// boolean
const a = true;
const b = false;

console.log(name == "jihu"); //true
console.log(age > 30); //false

// null과 undefined
let color;
console.log(color); //undefined 값 출력 됨.

let user = null;

// 객체형과 심볼형
//object
const superman = {
  name: "clark",
  age: 33,
};

//object 접근
superman.name;
superman["age"];
super.age;

//object 추가
superman.gender = "male";
superman["hairColor"] = "black";

//object 삭제
delete superman.hairColor;

console.log(super.name);
console.log(super.age);
console.log(superman);

function makeObject(name, age) {
  return {
    name: name,
    age: age,
    hobby: "football",
  };
}

const Mike = makeObject(Mike, 30);
console.log("age" in Mike);

for (x in Mike) {
  console.log(Mike[x]);
  //x는 Mike의 key를 가리침
}

//sayHello라는 메소드 만들기
let boy = {
  name: "Mike",
  sayHello: function () {
    console.log("hello, " + this.name);
  },
};

let girl = {
  name: "Jane",
  sayHello: function () {
    console.log("hello, " + this.name);
  },
};

let man = boy;
man.name = "Tom";
man.sayHello();

boy = null;

//이러한 것처럼 메소드에서는 this를 활용하는 것이 좋다.
man.sayHello();

// typedof 연산자
//변수의 자료형을 알아냄.
console.log(typeof 3);
console.log(typeof name);
console.log(typeof true);
console.log(typeof "xxx");
console.log(typeof null);
console.log(typeof undefined);

//자료형 변환 .. prompt를 통해서 받은 것은 문자형이다.. 따라서 형변환 필요
//String(), Number(), Boolean() 등의 괄호 안에 형 변환하고자 하는 것을 넣고 형변환

// 3. alert, prompt, confirm .. 대화상자
// alert 알려줌 -> 사용자가 확인을 누를 때 까지 떠 있음.
// prompt 입력 받음 -> 사용자에게 어떠한 값을 입력받을 때 사용
// confirm 확인 받음 ->
// 기본적인 창 .. 스타일링 불가
const whatName = prompt("이름을 입력하세요.");
alert("환영합니다, " + whatName + "님");
//alert(`환영합니다, ${whatName}님`);

const date = prompt("예약일을 입력해주세요.", "2023-8-");
console.log(date);
//prompt에 두개의 인수를 받을 수 있다. 첫번째 값은 메시지, 두번째 값은 디폴트 값으로 사용된다.

const isAdult = confirm("당신은 성인 입니까?");
console.log(isAdult);
//확인, 취소

// 4. 조건문
if (age > 19) {
  console.log("환영합니다.");
} else if (age == 19) {
  console.log("수능 잘치세요");
} else {
  console.log("안녕히가세요");
}

// 논리연산자
// || (OR) , && (AND) , ! (NOT)
if (name == "tom" || age > 19) {
  console.log("통과");
} else if (!isAdult) {
  console.log("돌아가세요");
}

let fruit = prompt("무슨 과일을 사고 싶나요?");

//switch
switch (fruit) {
  case "사과":
    console.log("100원입니다.");
    break;
  case "바나나":
    console.log("200원입니다.");
    break;
  default:
    console.log("그 과일은 없습니다.");
}

// 5. 반복문
for (let i = 0; i < 10; i++) {
  //반복할 조건
}

while (i < 10) {
  //반복할 조건
  i++;
}

do {
  //코드
  i++;
} while (i < 10);

//break
while (true) {
  let answer = confirm("계속할까요?");
  if (!answer) {
    break;
  }
}

//continue
for (i = 0; i < 10; i++) {
  if (i % 2) {
    continue;
  }
}

// 6. 함수정의 (함수 선언문)
function myFunction(x) {
  let temp = 2 * x + 3;
  return temp;
}
myFunction(1);

function showError() {
  alert("에러가 발생했습니다.");
}

function sayHello(name) {
  const msg = `Hello. ${name}`;
  console.log(msg);
}

let msg = "hello"; //전역변수
console.log("함수 호출 전");
console.log(msg);

function sayHello2(name) {
  if (name) {
    msg += `, ${name}`;
  }
  console.log("함수 내부");
  //지역변수
  console.log(msg);
}

//전역변수와 지역변수 (가급적 함수에 특화 된 지역변수를 사용해라)
let msg3 = "welcome";

function sayhello3(name) {
  let msg = "hello";
  console.log(msg + " " + name);
}

sayhello3("jihu");
console.log(msg);

function sayhello4(name) {
  let newName = name || "friend";
  let msg = "hello";
  console.log(msg + " " + newName);
}

//name의 default값을 friend로
function sayhello5(name = "friend") {
  let msg = "hello" + name;
  console.log(msg);
}

function add(num1, num2) {
  return num1 + num2;
}

//화살표 함수, 함수 선언문, 함수 표현식
//함수 선언문
function sayHello6(name) {
  const msg6 = "hello, " + name;
  console.log(msg);
}

//함수표현식
const sayHello7 = function (name) {
  const msg7 = "hello, " + name;
  console.log(msg7);
};

//화살표 함수
const sayHello8 = (name) => {
  const msg8 = "hello, " + name;
  console.log(msg8);
};

// 7. 배열
let student = ["철수", "영희", "영수"];

//push, pop, shift, unshift
let days = ["mon", "tue", "wed"];
days[1] = "화요일";
days.push("thu");
days.unshift("sun");

for (let index = 0; index < days.length; index++) {
  console.log(days[index]);
}

for (let day of days) {
  console.log(day);
}

노마드코더와 함께한 JS문법

/* alert("hi");   Let's studying about JS */

/* document란? */
//document.h1 = "Hello, From JS"; //document는 웹사이트를 의미한다. 모든 것은 document에서 시작한다.

/* JS와 HTML 연결하기 */
/* HTML에서 id를 통해 element를 찾아주는 함수 getElementById를 사용하는 방법 */
//const h1 = document.getElementById("h1"); //인자로 문자열
//위의 경우 h1이란 id를 찾고있다. HTML에 정의된 id가 JavaScript에서 같으면 element를 가져오고 가져갈 수 있다.
//id는 사용하기 편리하지만, 보통 className을 사용하거나 둘 다 사용한다.

//console.dir(h1); //console.log보다 자세히 출력
//h1.innerText = "Got you";

/* 만약 h1이 없다면? -> className을 통해서 연결하는 방법 */
//const hellos = document.getElementsByClassName("hello");
//console.log(hellos);

/* h1만 가져오는 방법 */
//const h1 = documet.getElementsByTagName("h1");
//console.log(h1);

/* 노마드코더의 추천방법 */
//const h1 = documet.querySelector(".hello h1"); //element를 CSS방식으로 검색
//위의 querySelector은 조건에 맞는 element가 여러개여도 오직 첫번째 하나만 가져온다. (hello라는 class내의 h1태그)
//조건에 맞는 모든 element들을 가져오고자 한다면 querySelectorAll을 사용하면 된다.
//만약에 id를 통해서 찾고 싶다면, 인자에 #hello를 전달해주면 된다. #는 id를 나타내는 기호

//const h1 = document.querySelector("div.hello:first-child h1"); //element를 CSS방식으로 검색

//h1.innerText = "Hello";
//console.log(h1);

//console.dir(h1);  //element의 내부를 들여보고자할 때 사용

//h1.style.color = "blue"; //JavaScript에서 h1의 style을 변경할 수 있다.

/* JavaScript에서 할 대부분의 작업은 event를 listen하는 것이다.. */
// function handleh1Click() {
//   h1.style.color = "blue";
//   console.log("h1 was clicked!");
// }
// h1.addEventListener("click", handleh1Click); //event발생 시 실행할 function의 이름만 넣어준다. 괄호를 넣지 않는다. (바로 실행시키지 않는다.)
//위의 event를 다음과 같이 표현할 수도 있다. => h1.oneclick = handleh1Click;

/* listen하고 싶은 event를 찾는 가장 좋은 방법 */
//google에 찾고싶은 element의 이름 ex: h1일 경우, => h1 html element mdn검색 => Web APIs라는 문장이 포함된 페이지를 찾는다.(JavaScript관점의 HTML Heading Element)
//또는 console.dir를 통해서 element를 출력시켜 사용가능한 event를 볼 수 있다. (앞에'on'이 붙은 단어 ex: onchange)

// function handleMouseEnter() {
//   h1.innerText = "Mouse is here!";
// }
// function handleMouseLeave() {
//   h1.innerText = "Mouse is gone!";
// }
// h1.addEventListener("mouseenter", handleMouseEnter);
// h1.addEventListener("mouseleave", handleMouseLeave);
//위의 evenet를 h1.onmouseleave = handleMouseLeave;로 나타낼 수도 있지만, 위의 방법을 선호한다. 왜냐하면, 후에 .removeEventListener를 통해서 event listener를 삭제할 수 있기 때문이다.

/* window객체를 통한 event만들기 */
// function handleWindowResize() {
//   document.body.style.backgroundColor = "tomato";
// }
// window.addEventListener("resize", handleWindowResize);

// function handleWindowCopy() {
//   alert("copier!");
// }
// window.addEventListener("copy", handleWindowCopy);

// function handleWindowOffline() {
//   alert("SOS no WIFI");
// }
// window.addEventListener("offline", handleWindowOffline);

// function handleWindowonline() {
//   alert("ALL GOOD");
// }
// window.addEventListener("online", handleWindowonline);

/* h1을 클릭할 때마다 색깔이 바뀌도록 하기 */
// function handleTitleClick() {
//   const currentColor = h1.style.color;
//   let newColor;
//   if (currentColor === "blue") {
//     // ==는 Equal Operator이고,  ===는 Strict Equal Operator이다.
//     newColor = "tomato";
//   } else {
//     newColor = "blue";
//   }
//   h1.style.color = newColor;
// }

// h1.addEventListener("click", handleTitleClick);

/* HTML + JS + CSS 의 Dancing */
//JS는 HTML을 변경, CSS는 HTML을 보고있다. => 이를 활용해 h1 클릭할 때마다 색 변경하기.
// function handleTitleClick() {
//   const clickedClass = "clicked";
//   if (h1.className === clickedClass) {
//     h1.className = "";
//   } else {
//     h1.className = clickedClass;
//   }
// }
// h1.addEventListener("click", handleTitleClick);

//또는 classList 활용 => 이전의 class 값을 갖고있어 활용할 수 있다.
// function handleTitleClick() {
//   const clickedClass = "clicked";
//   if (h1.classList.contains(clickedClass)) {
//     h1.classList.remove(clickedClass);
//   } else {
//     h1.classList.add(clickedClass);
//   }
// }
// h1.addEventListener("click", handleTitleClick);

//toggle을 이용해 인자가 이미 있다면 제거하고, 없다면 추가해준다. 따라서 위의 코드는 toggle을 활용해 간단하게 나타낼 수 있다.
// function handleTitleClick() {
//   h1.classList.toggle("clicked");
// }
// h1.addEventListener("click", handleTitleClick);

/* 실습 시작*/
// const loginForm = document.getElementById("login-form");
// const loginInput = loginForm.querySelector("input");
// const loginButton = loginForm.querySelector("button");
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
// const loginButton = document.querySelector("#login-form button");
//위 내용은 HTML element를 가져오는 것이다.

function onLoginBtnClick() {
  // console.log(loginInput.value);
  //console.log("click!!");
  const username = loginInput.value;
  // if (username === "") {
  //   alert("Please write your name");
  // } else if (username.length > 15) {
  //   alert("Your name is too long");
  // }
  console.log("username");
  //HTML의 form을 활용하도록 하자
  //But, 문제점 .. form이 submit되어 웹사이트가 재시작되고 있다. 값이 저장 되지 않는다. ==> 이 순간에 브라우저가 새로고침하지 않고 user정보를 저장하도록 해야한다.
}

const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

// function onLoginSubmit() {
//   const username = LoginInput.value;
//   console.log(username);
// }
// //위의 코드를 바로 실행시키지 않도록 아래와 같이 argument를 추가한다.
function onLoginSubmit(event) {
  //argument의 이름은 event가 아닌 아무거나 사용해도 된다. argument를 추가함으로서 JS는 방금 일어난 event에 대한 정보를 지닌 argument를 채워 넣는다.
  event.preventDefault(); //preventDefault를 통해서 기본동작을 막는다.
  // console.log(loginInput.value);
  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);
  localStorage.setItem(USERNAME_KEY, username); //localStorage를 이용해서 값을 저장하고, 불러오기
  // console.log(username);
  // greeting.innerText = "Hello " + username;
  // greeting.innerText = `Hello ${username}`; //이러한 형태로도 나타낼 수 있는데 `벡틱`을 사용한다는 것을 유의하자
  // greeting.classList.remove(HIDDEN_CLASSNAME);
  paintGreetings(username);
}

// loginButton.addEventListener("click", onLoginBtnClick);
// 위의 방식처럼 button의 click여부 말고, loginForm의 submit에 초점을 두고 아래와 같이 진행, submit event가 발생하는 걸 중간에 개입해서..
// loginForm.addEventListener("submit", onLoginSubmit);

const link = document.querySelector("a");

function handleLinkClick(event) {
  // alert("clicked!"); //alert를 통해서 브라우저의 기본동작을 막음 --> 잘 사용하지 않음
  event.preventDefault();
  console.dir(event);
}

link.addEventListener("click", handleLinkClick);

const savedUsername = localStorage.getItem(USERNAME_KEY); //local storage = 정보를 저장하고 불러오고 삭제하는 브라우저가 가지고있는 작은 DB같은 API

function paintGreetings(username) {
  //여러번 반복되는 코드는 함수로 만들어서 코드를 줄일 수 있도록 하자.
  greeting.classList.remove(HIDDEN_CLASSNAME);
  greeting.innerText = "Hello " + username;
}

if (savedUsername === null) {
  //show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  //show the greetings
  paintGreetings(savedUsername);
}