자바 스크립트의 탄생 비화
자바 스크립트는 1995년 12월에 브랜든 아이크(Brendan Eich)라는 사람이 10일만에 개발한 프로그래밍 언어이다.
자바 스크립트를 만든 이유는 넷스케이프를 보안하기 위해서 이다.
(넷스케이프는 브라우저이고 HTML과 CSS밖에 존재하지 않았다.)
자바스크립트는 프론트엔드가 쓸 수 있는 유일한 언어이다.

_ alert("text") 는 브라우저 경고창을 띄워 text 값을 출력하는 명령어이다.

vsc html 파일에서 ! + tab을 누르면 html 기본 뼈대가 작성된다.

link: 를 하면 css를 가져올 수 있다.
자바 스크립트는 끝에서 가져온다.
<script src="app.js"></script>

데이터 타입

자바스크립트에서는 정수를 number라고 부르지 않고 full number, integer이라고 부른다.
실수는 float

문자와 문자열은 ""를 사용한다.

console.log()는 콘솔에게 메시지를 보낸다. (숫자나 문자열을 넣을 수 있음)
comsole.dir()는 elemnet를 더 자세하게 보여준다.

const = 상수(변하지 않는 값)
let = 값을 다시 넣을 수 있음
var = 과거에 쓰던 것 지금은 쓰지 않는다. + const처럼 구분을 할 수 없다.

자바스크립트에서는 띄어쓰기를 대문자로 한다. myName = camelCase(낙타 등 모양)

불리안: ture or false

null: 아무 것도 존재 하지 않음

undefined : 값이 정의되어 있지 않다.

배열(arrays)
무언가를 나열하기 위해 사용한다.
간편하고 원하는 값을 불러올 수 있다.

형태: const arr = {1,2,3,4,5,"hi",1.2};
불러올 때: console.log(arr[2]);
더 추가하고 싶을 때: arr.push()

첫번째 시작은 0이다.

object

한 객체 안에 다른 객체가 들어가는 것

형태: const arr = { name: "pansy", points: 10, key: 1234, };

불러올 때: console.log(arr.name);

오브젝트 안에서는 =대신 :를 쓴다.
const는 오브젝트 안에 있을 때는 값을 바꿀 수 있다.

함수

코드의 반복을 줄이기 위해 사용한다.

형태: function hello(){ console.log("hello"); }

만약 각기 다른 값들을 보내고 싶으면
`function hello(name){
console.log(name);
}

hello("pansy");
hello("aaaaa");
`
처럼 괄호안에 값을 넣고 그 값을 콘솔에 보내면 출력된다.
함수에서의 괄호는 임의의 변수를 넣어 입력 받은 값이 적용될 수 있게 하고
콘솔에서 출력할 때는 그 변수에 원하는 값을 넣으면 함수를 활용할 수 있다.
함수안에 return 즉, 반환값을 주어 출력할 수도 있다.

prompt() : 사용자에게 창을 띄울 수 있게 해준다.
메시지를 보여주고 값을 입력받는다.

형태: const name = prompt("who are you?");

타입을 보고 싶으면 typeof을 사용한다.
형태: console.log(typeof name);

타입을 바꾸고 싶을 때
parseInt() 함수를 사용한다.

숫자가 아닌지 판단할 때
isNaN()이라는 함수를 사용한다.

조건문 - if, else, else if

조건을 추가하여 조건에 맞는 명령을 실행하는 문법이다.

• if는 ~뭐 라면, else는 아니라면, else if는 if가 아니라면(다른 조건)의 형태를 가지고 있다.
• 부등호를 사용할 수 있다. <, >, <=, >=, ||(or), &&(and), ===(같다)

형태:

if (isNaN(age)) {
   console.log("Please write a number");
}
   else {
       console.log("Thak you for writing your age");

   }

---

document

브라우저에 이미 존재하는 object이다.
접근할 수 있는 HTML을 가리키는 객체이다.

타이틀을 바꾸고 싶을 때
document.title= " "을 사용하여 타이틀을 바꿀 수 있다.

이 뿐만 아니라 body, head 등 다른 값들을 가져올 수 있고 자바 스크립트에서 HTML의 항목들을 불러 올 수 있다.

또한 문자열을 전달하여 id값을 불러올 수도 있다.
형태: document.getElementById(title")

---

hello class

hello class를 만들고 hllo 클래스 안에 있는 값을 갖고 오거나 여러 값을 한번에 가지고 와야하는 경우에는
getElementsByClassName()함수를 쓴다.
클래스가 있어야함

querSelector

요소들을 CSS방식으로 검색할 수 있게 하는 기능이다.
형태: document.querSelector();

---

click event

마우스로 클릭하는 것이 event이다.
마우스를<h1>에 올리거나, 입력을 끝내거나, 내 이름을 적거나, 엔터를 누르는 것 등등을 event라고 한다.

형태: title.addEventListener("click")

함수와 같이 사용하면 click이 되었는지 확인할 수 있다.

function handleTitleClick() {
    console.log("title was clicked!");
    
}

원하는 어떤 event도 가지고 와서 수정할 수 있다.

---

login page

HTML의 input과 button -> 생성
required -> 필수항목 지정(강제)
maxlength -> 글자 제한(15글자)
form -> 클릭 값 확인(유효성 검사)
submit -> 사용하여 입력한 값 제출
event.preventDefault() -> 제출 할때 새로고침 방지 localStorage -> 입력한 이름 저장
hidden -> 로그인 후 클래스를 사용하여 입력창 숨기기
CSS -> display: none -> 요소 삭제(안보이게)

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
function onLoginSubmit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username)
}
loginForm.addEventListener("submit",onLoginSubmit );

function paintGreetings(username){
    greeting.innerHTML = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);

}else{
    paintGreetings(savedUsername)
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"/>
<title>login app</title>
  </head>
 <body>
    <h1 id="greeting" class="hidden"></h1>
    <form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log In</button>
    </form>
    <script src="app.js"></script>
 </body>
</html>

body {
   background-color: lightgray;
}
.hidden {
   display: none;
}

---

태그 이해

사용자가 입력한 데이터를 하나로 묶는 태그

   <input type="text">
  	 <button>버튼</button>
</form>

action,memthod 속성의 역할

• action : 에서 에서 입력했던 데이터를 어디로 보낼지 지정하는 속성

• method : 데이터를 어떤 방식으로 보낼지 지정하는 것 (대표적으로 get,post)가 있다.

• (get) : url에 데이터를 포함함

• (post) : 데이터를 요청의 본문에 담아서 전송

  태그 이해

• 사용자가 값을 입력하거나 선택할 수 있도록 해주는 태그
  <input tpye="text">

• type에 따라서 입력이 달라짐

  이 태그 내부에서 주로 사용되는 이유

• 에 입력한 값을 한꺼번에 제출하기 위해서 내부에서 주로 사용한다고 함

• 을 제출하면 내부에 있는 입력값을 서버 쪽으로 전달할 수 있다.

• 유효성 검사가 가능하다. (required,maxlenght)

  name, value, placeholder, type 속성의 역할

• name : 입력한 데이터를 제출할 때 사용하는 데이터의 이름(이름 구분 가능)

• value : 이 실제로 가지고 있는 값

• placeholder : 입력해야 할 내용을 알려주는 값

• type : 의 입력 방식,종류 지정

• HTML에서 js를 사용하기 위한 태그

• js를 이용하면 버튼클릭, 입력값, 화면 변경을 구현할 수 있다.

  DOM이란 무엇인가

  HTML 문서를 js가 다룰 수 있도록 객체형태로 표현한 것
  js를 사용하면 DOM을 통해 HTML의 글자, 태그, 속성,스타일 등을 변경할 수 있다.
  웹 페이지의 요소를 찾거나 추가,삭제,수정할 때 사용하기도 한다.

  JavaScript를 이용해 DOM을 조작하는 기본 문법

1. 요소 선택
   document.querySelector()를 사용하면 원하는 HTML 요소를 선택할 수 있다.
   const title = document.querySelector("h1");
2. 글자 변경
   innerHTML을 사용하면 선택한 HTML 요소의 내용을 변경할 수 있다.
   title.innerHTML = "안녕하세요";
   3.클래스 추가
   classList.add()를 사용하면 선택한 HTML 요소에 클래스를 추가할 수 있다.
   title.classList.add("hidden");
   4.클래스 제거
   classList.remove()를 사용하면 선택한 HTML 요소의 클래스를 제거할 수 있다.
   title.classList.remove("hidden");
3. 이벤트 처리
   addEventListener()를 사용하면 클릭이나 제출 등 특정 이벤트가 발생했을 때 함수를 실행할 수 있다.

function sayHello() {
alert("안녕하세요");
}