1. 함수
function sayHello(nameOfPerson) {
console.log(nameOfPerson);
}
sayHello("nico"); // nico
sayHello("del"); // del
sayHello("lynn"); // lynn
데이터가 필요하면 function sayHello() 이 괄호에다 이름을 넣어주면 됨(어떤 이름이든) // argument
이렇게 하면 자바스크립트는, sayHello로 보내진 첫 번째 데이터가 nameOfPerson이라는 variable로 가게 된다는 것을 앎
이것이 우리가 바깥 세상에서 뭔가를 받는 방법(데이터를 function에 보내는 방법)
함수 밖에서 하면 에러가 뜸
argument는 값을 여러 개 받을 수도 있음
function sayHello(nameOfPerson, age) {
console.log(nameOfPerson);
}
sayHello("nico", 10); // nico, 10
sayHello("del", 23); // del, 23
sayHello("lynn", 21); // lynn, 21
이 두 가지 argument는 블럭 안에서만 존재(function의 body 안에서만)
function sayHello(nameOfPerson, age) {
console.log("Hello my name is" + nameOfPerson + "and I'm" + age);
}
sayHello("nico", 10); // Hello my name is nico and I'm 10.
sayHello("del", 23); // Hello my name is del and I'm 23.
sayHello("lynn", 21); // Hello my name is lynn and I'm 21.
function devide(a, b) {
console.log(a / b);
}
devide(98, 20); //4.9
- 객체 안에서 함수 생성
const player = {
name: "nico",
sayHello: function(){
console.log("Hello!")
}
}
console.log(player.name);
player.sayHello();
밖에서 생성되는 함수랑은 생김새가 조금 다름
// function sayHello(){
// }
- 어느 작업을 하고 그 작업의 결과를 알려주는 function
const age = 96;
function calculateKrAge(ageOfForeigner) {
return ageOfForeigner + 2;
}
const krAge = calculateKrAge(age);
console.log(krAge); // 98
무언가를 return하면 계산을 담당하는 function의 코드는 그 function이 return하는 값과 같아질 것임
const age = 96;
function calculateKrAge(ageOfForeigner) {
ageOfForeigner + 2;
return "hello";
}
const krAge = calculateKrAge(age);
console.log(krAge); // hello
function이 호출한 이 코드는 function의 return 값이 됨
const calculator = {
add: function (a, b) {
return a + b;
},
minus: function (a, b) {
freturn a - b;
},
div: function (a, b) {
return a / b;
},
multi: function (a, b) {
return a * b;
},
remain: function (a, b) {
return a % b;
},
square: function (a, b) {
return a ** b;
},
};
const addResult = calculator.add(2, 3);
const minusResult = calculator.minus(addResult, 10);
const divResult = calculator.div(50, minusResult);
const multiResult = calculator.multi(22, divResult);
const remainResult = calculator.remain(multiResult, 37);
const squareResult = calculator.square(12, remainResult);
console.log(addResult);
console.log(minusResult);
console.log(divResult);
console.log(multiResult);
console.log(remainResult);
console.log(squareResult);
이렇게 하면 함수를 호출했을 때 console에는 아무것도 보이지 않음
또한, 변수에 반환한 함수값을 담아줄 수 있음
- type 변경
const yourAge = prompt("How old are you?");
console.log(typeof "15", typeof parseInt("15"));
// parseInt는 type을 숫자형으로 바꿔줌
const yourAge = parseInt(prompt("How old are you?")); // 질문하는 과정에서 숫자만 찍히도록 설정
console.log(yourAge); // 문자를 적을 경우 NaN이 뜸
const yourAge = parseInt(prompt("How old are you?"));
console.log(isNaN(yourAge));
// isNaN은 type을 불린형으로 바꿔줌
// 숫자가 아닌 것은 true로, 숫자는 false로 뜸
- type을 이용한 if문 만들기
const yourAge = parseInt(prompt("How old are you?"));
if (isNaN(yourAge) || yourAge < 0) {
console.log("Please write a real positive number.");
} else if (yourAge < 18) {
console.log("You are too young.");
} else if (yourAge >= 18 && yourAge <= 50) {
console.log("You can drink.");
} else if (yourAge >= 50 && yourAge <= 80) {
console.log("You should exercise.");
} else if (81 <= yourAge && yourAge <= 100) {
console.log("You can do whatever you want.");
} else {
console.log("Relax...");
}
2. 이벤트
- document : 브라우저에 이미 존재하는 object. 우리가 접근할 수 있는 html을 가리키는 객체
// html document 객체로 부터 title을 가져올 수 있음
document.title; // momentum
document.title = "hi"; // title이 hi로 바뀜
- getElementById : html의 id를 가져오는 함수
const title = document.getElementById("title");
console.log(title);
console.dir(title);
- innerText : 텍스트를 변경해주는 함수
const title = document.getElementById("title");
title.innerText = "Got You!";
javascript에 의해 title의 text가 변경됨
- getElementByClassName : html의 class를 불러오는 함수
const hello = document.getElementsByClassName("hello");
console.log(hello);
- getElementByTagName : html의 tag를 불러오는 함수
const h1 = document.getElementsByTagName("h1");
console.log(h1);
- querySelector: element를 css 방식으로 검색할 수 있는 함수
<body>
<div id="title" class="hello">
<h1>Grab me!</h1>
</div>
<script src="app.js"></script>
</body>
const inH1 = document.querySelector(".hello h1");
console.log(inH1);
- querySelector은 같은 css가 세 개일 경우 가장 첫 번째 것만 가져옴
<body>
<div id="title" class="hello">
<h1>Grab me1!</h1>
</div>
<div id="title" class="hello">
<h1>Grab me1!</h1>
</div>
<div id="title" class="hello">
<h1>Grab me1!</h1>
</div>
<script src="app.js"></script>
</body>
const inH1 = document.querySelector(".hello h1"); // grab me1!
console.log(inH1);
- 같은 것을 여러 개 가져오고 싶다면 querySelectorAll
const selects = document.querySelectorAll(".hello h1");
// const selects = document.querySelector(".hello:first-child");
console.log(selects); // 3개를 전부 가져옴
- javascript로 style 바꾸기
const selects = document.querySelector(".hello h1");
selects.style.color = "blue";
- event를 listen 하기 1
const selects = document.querySelector(".hello h1");
function handleTitleClick() {
console.log("title was clicked!");
}
function handleMouseEnter() {
selects.style.color = "blue";
selects.innerText = "Mouse is here!";
}
function handleMouseLeave() {
selects.style.color = "black";
selects.innerText = "Mouse is leave!";
}
selects.addEventListener("click", handleTitleClick);
selects.addEventListener("mouseenter", handleMouseEnter);
selects.addEventListener("mouseleave", handleMouseLeave);
// click event를 listen하고, 이 click event가 발생되면 handleTitleClick이라는 function이 동작하도록
// 이 function이 실행하지 않도록 하는 것이 중요함 => handleTitleClick()
// function을 바로 실행시키지 않고 이 function을 javascript에 넘겨주고 유저가 selects를 click할 경우에
// javascript가 실행버튼을 대신 눌러주길 바라는 것
devicemotion이라는 event는 우리의 모바일이 움직이거나 할 때 발생하는 event
- 우리가 listen 하고 싶은 event를 찾는 가장 좋은 방법은 구글에 찾고 싶은 이름 ex) h1 html element mdn 검색
=> 읽기 힘들면 element를 출력시켜 어떤 event를 사용할 수 있는지 알아봐도 괜찮음 ex) console.dir(selects);
=> property 앞에 on이 붙어있다면 그게 바로 event listener. event로 사용할 때는 on을 떼고 사용해야 함
- event를 listen 하기 2
- oneventname property에 event listener을 할당함으로써 event를 listen할 수 있음
- event를 사용할 수 있는 두 가지 방법
const selects = document.querySelector(".hello:first-child h1");
// const selects = document.querySelector(".hello:first-child");
function handleTitleClick() {
console.log("title was clicked!");
}
function handleMouseEnter() {
selects.style.color = "blue";
selects.innerText = "Mouse is here!";
}
function handleMouseLeave() {
selects.style.color = "black";
selects.innerText = "Mouse is leave!";
}
//selects.addEventListener("click", handleTitleClick);
selects.onclick = handleTitleClick;
selects.addEventListener("mouseenter", handleMouseEnter);
selects.addEventListener("mouseleave", handleMouseLeave);
1. 첫 번째는 selects.addEventListener()를 해주고 click을 넘겨주는 것
2. 두 번째는 selects.onclick = handleTitleClick;
=> 첫 번째 방법을 더 선호하는 이유는,
나중에 removeEventListener을 통해서 event listener을 제거할 수 있기 때문
- window : 전역 객체 (모든 곳에서 자유롭게 사용 가능한 객체)
document가 javascript에서 기본적으로 제공되듯이 window도 기본적으로 제공
=> 나머지 element들은 querySelector나 getElementById 등으로 찾아와야 함)
const selects = document.querySelector(".hello:first-child h1");
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy() {
alert("copier!");
}
function handleWindowOffline() {
alert("SOS No Wifi!");
}
function handleWindowOnline() {
alert("All GOOOOD!");
}
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);
// body, head, title 이런 것들은 중요하기 때문에 이렇게 존재하는 것(div 등은 불러올 수 없음)
1. Clipboard events : 유저가 copy 행위를 했을 때 발생
2. Connection event : 유저가 wifi에 연결되어 있는지 브라우저가 알 수 있음 => ofline , online
- function에 if문 넣기
const selects = document.querySelector(".hello:first-child h1");
function handleTitleClick() {
if (selects.style.color === "blue") {
selects.style.color = "tomato";
} else {
selects.style.color = "blue";
}
}
selects.addEventListener("click", handleTitleClick);
코드를 개선해서 더 깔끔하게 만들기
h1.style.color를 이렇게 많이 호출하기 보다는 color 현재 상태를 저장
const selects = document.querySelector(".hello:first-child h1");
function handleTitleClick() {
const currentColor = selects.style.color;
let newColor;
if (currentColor === "blue") {
newColor = "tomato";
} else {
newColor = "blue";
}
selects.style.color = newColor;
}
selects.addEventListener("click", handleTitleClick);
- js로 css 변경하기
body {
background-color: beige;
}
h1 {
color: cornflowerblue;
transition: color 0.5s ease-in-out; // 색상이 천천히 바뀌게끔
}
.active {
color: tomato;
}
const selects = document.querySelector(".hello:first-child h1");
// const selects = document.querySelector(".hello:first-child");
function handleTitleClick() {
selects.className = "active";
}
selects.addEventListener("click", handleTitleClick);
const selects = document.querySelector(".hello:first-child h1");
// const selects = document.querySelector(".hello:first-child");
function handleTitleClick() {
if (selects.className === "active") {
selects.className = "";
} else {
selects.className = "active";
}
}
selects.addEventListener("click", handleTitleClick);
className은 class 명을 변경
- 코드를 깔끔하게 하는 두 가지 방법
const selects = document.querySelector(".hello:first-child h1");
function handleTitleClick() {
const activeClass = "active";
if (selects.className === activeClass) {
selects.className = "";
} else {
selects.className = activeClass;
}
}
selects.addEventListener("click", handleTitleClick);
지금 현재 string을 두 번 사용하고 있는데, 이는 error의 위험이 있음
현재 우리는 active라는 class 명을 지어냈고 active 대신에 다른 class 명으로 대체할 수 있음
이 모든게 제대로 동작하려면 active라는 단어가 정확하게 사용되어야 함
style에 정의된 class명과 똑같이 써야만 함 =>
javascript로 옮겨오는 과정에서 class 명을 실수로 잘못 적는다면 제대로 동작을 하지 않게 됨
여기서 "active"를 raw value라고 함 ( 개발자가 이렇게 적겠다고 선택한 것)
=> 여기서 실수가 일어날 수 있음
1. 이러한 실수에 대비해 우리가 할 수 있는 것은,
여기에 activeClass라는 변수명을 생성해준 뒤, 거기에 "acive"를 담아줌
그리고 if절 안에 "active" 대신 activeClass 변수를 넣어줌 ( error가 발생할 수 있는 부분을 축소)
그런데, 여기서 오류가 발생할 수 있음
<div class="hello">
<h1 class="sext-font">Click me!</h1>
</div>
↓↓↓
<div class="hello">
<h1 class="active">Click me!</h1>
</div>
h1에 sexy-font라는 class 명을 추가해주고 css에 .sext-font의 속성을 담아주면
h1 class="sexy-font"라고 작동을 하게 되는데,
selects 클릭시 js에 selects.className이 먹히면서 class 명이 sext-font에서 active로 변경
(sexy-font의 css 속성이 모두 풀리게 됨)
이러한 오류 때문에
const activeClass = "active sexy-font"
class 명에 sexy-font를 추가해줘야 함
하지만 이는 별로 좋지 못한 방법임 =>
유저가 만약 class를 하나 추가한다던지 하면 javascript는 물론이고 css까지 업데이트 해줘야 하기 떄문
=> 우리가 정말 해야 하는 것은 javascript로 모든 class name을 변경하지는 않는 것
이 sexy font라는 class 명을 삭제하지 않고 activeClass를 변경하고 싶다는 말
2. className 대신 classList를 사용
const selects = document.querySelector(".hello:first-child h1");
function handleTitleClick() {
const activeClass = "active";
if (selects.classList.contains(activeClass)) {
selects.classList.remove(activeClass);
} else {
selects.classList.add(activeClass);
}
}
selects.addEventListener("click", handleTitleClick);
우리는 javascript를 사용하여 javascript가 특정한 class name만 변경하도록 했음
그렇기 때문에 selects를 클릭해도 sexy-font class는 그대로 남아 있고 active class만 추가
classList는 class 내용물을 조작 가능
( 예를 들어 html h1 태그에 반드시 갖고 가야 되는 class가 있을 때 사용함 )
classList에는 멋진 function들이 있음(그 중 하나는 contains라는 function)
- contains()는 html element에 class가 포함되었는지를 알려줌
하지만, 이렇게 하면 코드를 너무 많이 써야 하여 힘드므로
우리 삶을 더 쉽게 해줄 function, toggle()을 사용함
- toggle()은 class가 없으면 classList에 추가하고 있으면 제거하는 역할
const selects = document.querySelector(".hello:first-child h1");
function handleTitleClick() {
const activeClass = "";
selects.classList.toggle("active");
}
selects.addEventListener("click", handleTitleClick);
'(심층)자바스크립트' 카테고리의 다른 글
타강의 2-1) 자바스크립트 (0) | 2022.12.01 |
---|---|
타강의 3) 자바스크립트 (0) | 2022.11.28 |
짧게 짧게 알게 된 것 정리 1 (0) | 2022.11.25 |
타강의 1) 자바스크립트 (0) | 2022.11.17 |
자바스크립트 문법 02 (0) | 2022.11.08 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!