JavaScript 기초 정리

JavaScript 강점

• 브라우저에서 기본으로 탑재되어 있어서 범용성이 띄어남
• 일렉트론으로 윈도우 앱을 만들 수 있음 (HTML, CSS, JavaScript)
• reactnative로 ios, 안드로이드 앱을 만들수 있음 (HTML, CSS, JavaScript)
• three.js 사용 시 3D 모델링도 개발 가능
• replit.com 에서 자바스크립트 IDE 없이 빌드가능 (프로그래머스 같은 사이트도 비슷한 유형인거 같음)

HTML에 javaScript 넣기

<script src = "app.js"></scrpit>

 

함수

• alret("hi") -> 브라우저 알람 메세지창 출력
• console.log("hi") -> 콘솔창 출력
• push("d") -> 리스트에 추가
• prompt() -> 사용자에게 입력값을 받아옴

const age = prompt("몇 살이니?");

 

DataType

• float - 1.5, 2.5
• integer - 1, 2
• string - "hi"
• boolean = true, false
• undefined,null

const a = "dd"
console.log(typeof a) 

//결과값 string

DataType 변환

const age = "18";
parseInt(age);

constant, variable

• const - 변하지 않는 값 정의 ex) const a = 5; object 는 넣거나 수정이 가능
• let - 변하는 값 정의  ex) let b = "Hello"
• var - 변하는 값 정의 값이 변했는지 알수가 없음. 보호취약  ex) var b = "Hello" 

Array

const a = ["q", "w"]

//호출법 
console.log(a[1]);

a.push("e");

Function

function a()

{
 console.log("hello");
}

//호출법

a();

object(list)

 

기본 정의 : const a = { name : "nico", points : 10, };

호출법 ㅣ a.name a.points

 

list 안에 function

const a = {
			name : "nico", 
            points : 10, 
            say : function (age) {
            	console.log(age);
            },
        };

호출법 ㅣ a.say(18)

 

Conditionals

const age = parseInt(prompt("How old are you?"));

console.log(age); // int 형이 아니면 NaN 발생
console.log(isNaN(age)); // NaN 아니면 false, NaN면 true

if(isNaN(age) || age === 18) // int 형이 아니고 나이가 18살이면 true
{ /// condition == true
	console.log("Please write Number");
}
else 
{
///conditonn == false
}

 

HTML in Javascript

• Document
• Searching For Element

document.GetelementById("title") // id가 title인걸 가져옴

console.log(title.id);
console.log(title.className);

title.innerText= "Hi"; // 해당 id 내용 추가

document.GetelementClassName("something"); class가 something인걸 가져옴

document.querySelection(".hello h1"); 
// css방식으로 검색 class가 hello 안에 h1 찾기 (첫 번째로 해당 되는 것만 가져옴)

document.querySelection("#hello from"); // id인 hello 그 밑의 from id 가져옴

document.querySelectionAll(".hello h1"); 
// css방식으로 검색 hello 클래스 안에 h1 찾기 (해당 되는 전부 가져옴 Array)

const title = document.querySelection(".div.hello:first-child h1"); 
//클래스 hello를 가진 div 내부의 firstchild 인 h1 가져오기

title.style.color = "blue"; // 글씨색

localStorage

• set

localStorage.setItem("username", username);

LocalStorage 추가된 화면

• get : value 가져옴
  • localStorage를 가져와서 새로고침 해도 로그인 하면 로그인 된 화면으로 출력 수정 가능

localStorage.getItem(USERNAME_KEY);