1 day
JS는 대표적인 프론트엔드 언어로 웹사이트, 앱, 게임 등 심지어 백엔드까지 가능한 언어라고 한다
그래서 잘 쓰이고 잘 찾는 언어라 취업에 유리하고도 한다.
2 days
js나 css파일은 그냥 불러올 수 없고
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 : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
단 하나의 element를 return해줌
⇒ hello란 class 내부에 있는 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분동안 헤매였다.
'개발자일지 > JavaScript' 카테고리의 다른 글
8일차 시계넣기 / 명언넣기/ 배경에쓸사진넣기 (0) | 2021.11.29 |
---|---|
7일차 로그인 만들기! (0) | 2021.11.28 |
6일차 toggle의 위력 (0) | 2021.11.28 |
자바스크립트 공부를 시작하고 2+5일째 (0) | 2021.11.27 |
20211118 개발공부 시작 2일동안 만든 첫 작업 (0) | 2021.11.27 |