개발자일지/JavaScript

노마드코더에서 5일간 자바스크립트를 공부하면서 배운(해온) 것들

어쩌다한번 2021. 11. 27. 15:51

1 day

JS는 대표적인 프론트엔드 언어로 웹사이트, , 게임 등 심지어 백엔드까지 가능한 언어라고 한다

그래서 잘 쓰이고 잘 찾는 언어라 취업에 유리하고도 한다.

 

2 days

jscss파일은 그냥 불러올 수 없고

html이 해당 파일들을 불러오는 매개로 동작한다.

 

consol.log=(); 라고 입력하면 브라우저 콘솔에 출력된다.

const a = "Zazilgure“; 변하지 않는 변수를 정의하는 것이다.

let a ="Zazilgure“; 변경 가능한 정의를 하는 것이다. 변경할때는 let을 붙이지 않아도된다.

var a = “Zazilgure; const, let이 나오기 전에 변수를 정의하는 개념인데 의미가 명확한 const와 let가 좋다고한다.

 

Booleans = true, false

null = null 없다그냥(없다는 것을 알려줌, 상태가 아니라 정의)

undefined = 정의되지않음

 

Arrays = [~,~,~];

찾아오기 Arrays[3]

Arrays.push(Item)

 

3 days

Object

새로운 데이터 정렬법

ex) const player = {

name : "Zazilgure"

~ :

}

이런식으로 정리한 데이터를

console,log(player);

혹은 console.log(player.name);

이렇게 불러올 수 있다.

player.fat=false;처럼 뒤에 업데이트도 가능

 

///

인사하기

function sayHello(nameOfPerson, age 처럼 뒤에 추가 가능){

console.log("안녕하세요 저는 " + nameOfPerson + "입니다.");

}

sayHello("Zazilgure");

 

///

 

4days

Return...어렵다

console,log()는 값을 보여주긴하는데

value를 가진 값은 아님

그래서 return을 하면 그 것은

value를 가진 값이 됨 출력이 되는건 아니고.

const age = 26;

function calKA(aOF){

return aOF + 2;

}

const KrAge = calKA(age);

 

///

parseInt() 문자string를 숫자number로 바꾸어준다.

const age = parseInt( prompt("몇 살이세요?") )

console.log(age)

 

///

나이를 입력하여 음주가능여부 판단하기

if(isNaN(age) || age < 0){

alert("숫자로 작성해주세요");

} else if(age < 18){

alert("당신은 너무 어리다.")

} else if(age >= 18 && age <= 99){

alert("마십시오.")

} else {

alert("당신은 너무 많다 나이.")

}

 

&& = and

|| = OR

 

///

 

자바에서 HTML을 불러와 변경하는법.

document.getElementById Id를 불러옴

title이라는 아이디가 있다면 불러온 후

title.innerText = ""로 변경가능

 

5days

- getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환)

- getElementsByTagName() : name을 할당할 수 있음(array를 반환)

- querySelector : elementCSS selector방식으로 검색할 수 있음 (ex. h1:first-child)

단 하나의 elementreturn해줌

helloclass 내부에 있는 h1을 가지고 올 수 있다(id도 가능함)

- 첫번째 element만 가져옴

- 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll

세개의 h1이 들어있는 array를 가져다 줌

- querySelector("#hello); getElementById("hello"); 는 같은 일을 하는 것임

하지만 후자는 하위요소 가져오는 것을 못하므로 전자만 쓸거다

 

마우스와 술래잡기하기

const title = document.querySelector(".hello h1");

= H1을 불러내기

function handleTitleClick(){

title.innerText = "제길!" ;

}

function handleMouseEnter(){

title.innerText = "어라" ;

}

function handleMouseLeave(){

title.innerText = "하하" ;

}

 

title.addEventListener("click", handleTitleClick) ;

title.addEventListener("mouseenter", handleMouseEnter) ;

title.addEventListener("mouseleave", handleMouseLeave) ;

밑줄 부분을 맘대로 변경해버렸다가 30분동안 헤매였다.