JS

SOO·2022년 8월 26일

basic

목록 보기

1/16

Why JS

브라우저가 있으면 자바스크립트가 있는 것!
프레임워크는 내가 할 일을 도와주는 도우미 역할
그 중 하나가 리액트 네이티브
리액트 네이티브는 자바스크립트 만으로 안드로이드랑 ios앱을 만들 수 있게 해준다.
그 다음이 electron; 자바스크립트, HTML, CSS로 desktop app 만들 수 있게 해줌
예전에는 자바스크립트를 프론트에서만 썼다면,, 이제는 자바스크립트만 있으면 프론트 엔드랑 백엔드 양쪽에서 하고 싶은 데로 맘대로 할 수 있음
3D로 뭔가를 하고 싶다면 자바스크립트 굿
socket.io라는 걸 써서 채팅이랑 실시간 기능들을 가능하게 함!

QUIZ

How many programming languages can you use on the Frontend? Only JS
Can you make a video game using JavaScript? YES
Javascript comes installed with all the browsers. Yes
How long did it take to create Javascript? 10days
Why was Javascript created? To add interactivity to Websites
To use Javascript on a website we need to download it first. NO
To execute a JS file, we need to open it on a browser. NO
How can we 'run' JS files on the browser? We open a HTML file that imports the JS file
What can we do with the console of the browser? We can write Javascript code.
How many programming languages can you use on the Backend? More than 10.

Project

자바스크립트를 다루는 방법은 브라우저의 console을 사용하는 것
브라우저는 HTML을 열고, HTML은 CSS와 JS를 가져오는 것
HTML이 접착제!

Basic Data Types

integer = full number
문자 ""

Variables

console.log(43);
console.log('lalala');
console.log("sleepy");
여러분이 프로그래머가 되고 싶다면, 여러분은 게을러지는 법을 배워야함 ㅎㅎ 조타

const -> 바뀌지 않은 값이라는 뜻
const 그래 이 친구는 variable을 만들 것이니 준비해라!
const a =5;
console.log(a+3); -> 8
const b ="2" ; -> 숫자 2라는 문자를 가진 txt
const myName = 'soo';
띄어쓰기 대신 대문자 사용

let과 constant의 차이점
const는 constant(상수)라는 것, 값이 바뀔 수 없음.
let은 새로운 것을 생성할 때 사용하는 것. 바뀔 수 있음.
자바스크립트는 위에서부터 아래로 진행
코드에서 사람의 의도 파악 가능

let myName = "nico";
myName = "nicolas";
console.lg("my name is" + myName)

-> my name is nicolas

많은 사람들이 const를 기본적으로 맣이 씀, 변수를 업데이트할 때만 let을 씀.

과거 자바스크립트에는 var만 있었음,, 원한다면 어디서든 업데이트할 수 있다는점
근데 언어를 통한 보호를 받지 못한다는 단점이 있음

Booleans

true or false
null means null -> 비어있다기보다는 아무것도 없는 상태로 채워져있는 것

let something;
console.log(something);

something이라는 variable을 만들고 있지만, 값을 주고 있지 않은 상태
variable은 존재하는데 정의되지 않은 상태 undefined.
기억해야할 것은 null은 절대 자연적으로 발생하지 않는다.
null은 우리가 variable 안에 어떤 것이 없다는 것을 확실하게 하기 위해 쓰는거임

Arrays

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"];
array안의 데이터에 접근하고 싶다면, variable의 이름 적어주기 그리고 우리가 얻고 싶은 항목의 번호를 넣고, 대괄호로 닫아주기!

//Get Item from Array
console.log(dayOfWeek[5]);
컴퓨터는 0부터 센다 그래서 sat이 출력됨.

//Add one more day to the array
daysOfWeek.push("sun");
console.log(dayOfWeek); -> ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]

Objects

const playerName = "nico";
const playerPoints = 121212;
const playerHandsome = false;
const playerFat = "little bit";
-> 불편
한 개의 개체(entity) 즉 player에 대해서 설명하고 있다는 걸 알기 때문

const player = {
name: "nico",
points: 10,
fat: true,
};
중괄호 사용
console.log(player);
console.log(player.name);
console.log(player["name"]);

player.fat = false;
console.log(player.fat); -> {name: "nico", points:"10", fat:false}

Q. const는 수정할 수 없다면서요?
여기서 하는건 object안의 무언가를 수정하는것. 여기서 constant는 object.
에러는 constant 전체를 하나의 값으로서 업데이트 하려고 할 때 발생함
ex) player = false;

player.lastname = "potato";
원한다면 원하는 어떤 property든 만들 수 있음

VS list
리스트안에 다양한 데이터 타입이 존재하면 각각이 무엇을 나타내는지 알아내기 어렵다.
Objects는 각각의 데이터들이 무엇을 나타내는지 알아볼 수 있다.

Quiz

1.2 and 2.2 are both integers. No
2.What is the data type of “2”? String
3.‘hello’ is the same as “hello” Yes.
4.A variable can only hold number values. No.
5.After creation, we can change the value of a const. No.
6.After creation, we can change the value of a let.
7.“true” is a boolean value. No
8.null and undefined are the same type. No
9.Why do we use an array for? To organize values on a list.
10.How can I get the second element of an array? arr[1]
11.How can I access the name property of an object player? player["name"]

Functions

function은 어떤 코드를 캡슐화해서, 실행을 여러번 할 수 있게 해줌

ex) function sayHello(){
console.log("Hello!");
}

function을 만드는 규칙
1.()가 필요해
2.실행하게 될 코드 블록이 필요함 -> 여기 작성하는 것이, sayHello를 실행할 때마다 실행되는 거임
3.sayHello();

인수(argument): function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법, function안에서 data를 받는 방법은 ()안에 무언가를 적는 것. 인수 적는 것.

function sayHello(nameOfPerson, age){
console.log("Hello my name is "+ nameOfPerson + " and I'm " +age);
}

sayHello("nico", 10);
sayHello("dal", 23);
sayHello("lynn", 21);

nameOfPerson, age은 function의 body에만 존재해

계산기

function plus(a,b) {
	console.log(a+b);
}

plus(2,3);

a와 b는 function의 body에만 존재
data를 function 안으로 보내는 법

NaN -> not a number

const player = {
	name: "nico",
	sayHello:function(otherPersonsName){
		console.log("hello!" + otherPersonsName + " nice to meet you" );
    },
};
 

console.log(player.name);
player.sayHello("lynn");

() -> 실행한다!

function minusFive(potato){
console.log(potato - 5);
}

minusFive(5,10,12,34,4,5,6,7)

-> 이 funtion은 오직 첫 번째 argument만 받음

const calculator = {
	power: function (a,b){
		console.log(a**b);
	},
}

calculator.power(2,3);
function은 나를 위해 무언가 해주는 것, 어떤 일을 수행하고 그 결과를 알려주는 것

const age = 96;
function calculateKrAge(ageOfForigner){
	return ageOfForeigner + 2;
}

const krAge = calculateKrAge(age);

console.log(krAge);

const calculator = {
	plus: function (a,b){
    	console.log("hello");
        return a+b;
        console.log("bye bye");
    },
    }

return 하는 순간 fuction이 종료 되기 떄문에 bye bye는 작동하지 않음

Conditional(조건문)

true인지 false인지 알려주기 때문에 아주 중요함

prompt를 안 쓰는 이유는, message가 별로 안 예쁘고 아주 오래된 방법이야

사용자가 무엇을 입력하더라도 number로 바꾸기!

const age= prompt("How old are you?");
console.log(typeof age);
-> variable의 type을 보는 방법

parseInt("15")
-> string을 number로 변환해주는

function은 내부에서부터 외부로 실행됨

isNaN() -> 이 function은 boolean으로 알려줄거임~ boolean은 true, false로 되어있음 (숫자가 아니다 -> true, 숫자가 맞다 -> false)

const age = parseInt(prompt("How old are you?"));
console.log(isNaN(age));
if(condition){
/// condition === true
}else{
/// condition === false
}

if(condition){
/// condition === true
}

condition은 boolean으로 판별 가능해야함

const age = parseInt("15");
if ( isNaN(age)){
console.log("Please write a number");
}

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

if(isNaN(age) || age<0){
	console.log("Please write a number");
}	else if (age <18){
	console.log("You are too young.");
}	else  if (age>=18 && age<=50{
	console.log("You can drink");
}	else  if (age>50 && age<=80{
	console.log("You should exercise");
}	else if(age === 100){
	console.log("wow you are wise");
}
	else  if (age>80){
	console.log("You can do whatever you want.");
}

&& and 조건
|| or 조건 둘 중 하나가 true 면 true

===, !==

작은 괄호부터 시작해서 큰 괄호로 넘어감
JavaScript는 본래 사용자와 상호작용하기 위해 만들어진 것

Quiz

Why do we use functions? To encapsulate a piece of code.
How can we ‘run’ a function? We write nameOfFunc + () : nameOfFunc()
Why do we use ‘arguments’ on functions? To send a value to a function.
Functions can receive maximum 3 arguments. NO
Functions always have to receive arguments. No.

6. Why do we use ‘return’ on functions? To get a value from a function

‘return’ is the same as ‘console.log’ No.
What is the return value of parseInt("2")? 2
What is the return value of parseInt("hello")? NaN
What is ‘NaN’? Not a Number
bye

if(false){
    console.log("hi")
}else{
    console.log("bye")
}

hello

if(8 > 10){
    console.log("hi")
}else if(8 < 10){
    console.log("hello")
} else {
    console.log("bye")
}

8 > 5 && 10 > 20 will be?false
5 > 2 || 10 < 23 will be? true
false && true will be? false
true || false will be? true

The Document Object

HTML의 Element들을 JS를 통해 변경하고 읽을 수 있음

document 하면 브라우저에 이미 존재하는 object임
여러분이 접근할 수 있는 HTML을 가리키는 객체
JavaScript는 HTML에 접근하고 읽을 수 있게 설정되어있음
브라우저에서 제공하는 객체(object) 중 document라는 객체는
JS에서 HTML파일을 불러올 수 있도록 도와준다.

document.title 하면 Momentum이 나옴
HTML에 있는 title을 자바스크립트로 가져다 쓸 수 있음

document.title="Hi" - > Hi 나옴
JS에서 HTML을 읽어올 뿐만 아니라, HTML 변경 가능
우리가 HTML에서 여러 정보를 가져올 수 있고, JS코드에서 그 항목들을 볼 수 있음
document가 모든것의 시작점
왜냐면 document는 web site를 의미

HTML in JS

document.getElementById("title");
document의 함수 중에는 getElementById라는 함수가 있음
js에서 HTML 읽을 수 있음
JS는 HTML element를 가지고 오지만, HTML 자체를 보여주진 않음!

우린 HTML에서 항목들을 가지고 와서, JS를 통해 항목들을 변경할거임

Q. document에서 js로 element를 굳이 저렇게 가져오는 이유를 좀 더 자세히 설명해줄 수 있나요? 예를 들어 title을 변경할 거라면 html에서 바로 변경하면 되는데 굳이 js에서 변경하는 이유가 아직 잘 와 닿지가 않네요ㅠㅠ 혹시 앞으로 html에서 변경하는 것만으로는 부족한 무언가를 js에서 해야돼서 이렇게 하는 것인가요?

A. 계속 공부하시다 보면 느끼시겠지만 나중에 서버와 통신을 하거나 다른 복잡한 일들을 처리할 때 js 파일에서 처리하게 되는데 그때 HTML의 element들을 자유자재로 다룰 수 있게 되야 여러 복잡한 처리를 원할하게 할 수 있게 됩니다.
JS를 통해서 브라우져와 communication을 할 수 있고 그를 통해서 html을 변경할 수 있는거에요. server와 client사이에 주고받는것은 JS을 통해 이루어지지 html을 통해 이루어지지 않아요.

Searching For Elements

document.getElementsByClassName("hi");
array를 반환

document.getElementsByTagName("hi");
tag는 anchor, div, section, button 같은 것들을 의미
array를 반환

<div class="hello">
	<h1>Grab me!</h1>
</div>

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

querySelector에는 hello가 class name이라는 것과 그 안의 h1을 명시해야함
querySelector는 동일한 것이 많이 있으면 첫번째 것만 가져옴, 하나의 element만 반환해줌

const h1 = document.querySelector(".hello:first-child hi");
이러케 쓰기두~
querySelector에서는 CSS selector 자체를 전달함

모든걸 찾고 싶다면 querySelectorAll 사용하면 됨
array를 반환

Events

app.js가 있어서 JS를 통해 HTML의 내용을 가져올 수 있음
title.style.color="blue";
h1의 style을 js에서 변경할 수 있음

모든 event를 js에서 listen할 수 있음
eventListener : event를 listen함
→ js에게 무슨 event를 listen하고 싶은 지 알려줘야 함

const title = document.querySelector(".hello:first-child hi");
title.addEventListner("click");

말 그대로 누군가가 title을 click하는 것을 listen할거임

const h1 = document.querySelector("div.hello:first-child h1");

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

h1.addEventListenr("click", handleTitleClick);

내가 원하는 것은 이 function을 JS에 넘겨주고, 유저가 title을 click할 경우에 JS가 실행버튼을 대신 눌러주길 바람

title.addEventListenr("click", handleTitleClick()); 일케 ()쓰면 안됨

click event를 listen하기 위해서는 HTML element를 가져와서, addEventListener function을 실행시켜주면 됨
그리고 유저가 이 element에 해당 event를 했을 때 어떤 함수를 실행할지도 정해야함
여기서 이 function의 실행버튼을 눌러선 안됨!

여러분이 listen하고 싶은 event를 찾는 가장 좋은 방법은, 구글에 찾고 싶은 element의 이름, 예를 들어 h1 element을 Mozilla Developer Network인 MDN에 검색해보는거

search h1 html element mdn
링크텍스트

console.dir(title)
property 앞에 on이 붙어있다면 그게 eventListener임 근데 이런 event를 쓸 때는 on을 떼고 써야함

More Events

Event 해주는 방법 2가지
1.title.addEventListener("click", handleTitleClick);
2.title.onclick = handleTitleClick;

function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
window.addEventListener("resize", handleWindowResize);

document의 body, head, title 이런것들은 중요하기 때문에 이렇게 존재하는 것임

Code Challenge

마우스가 title위로 올라가면 텍스트가 변경되어야 합니다.
마우스가 title을 벗어나면 텍스트가 변경되어야 합니다.
브라우저 창의 사이즈가 변하면 title이 바뀌어야 합니다.
마우스를 우 클릭하면 title이 바뀌어야 합니다.
title의 색상은 colors 배열에 있는 색을 사용해야 합니다.
.css 와 .html 파일은 수정하지 마세요.
모든 함수 핸들러는 superEventHandler내부에 작성해야 합니다.
모든 조건이 충족되지 못하면 ❌를 받습니다.

// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
// <⚠️ /DONT DELETE THIS ⚠️>

const title = document.querySelector("h2");

/*
✅ The text of the title should change when the mouse is on top of it.
✅ The text of the title should change when the mouse is leaves it.
✅ When the window is resized the title should change.
✅ On right click the title should also change.
✅ The colors of the title should come from a color from the colors array.
✅ DO NOT CHANGE .css, or .html files.
✅ ALL function handlers should be INSIDE of "superEventHandler"
*/
const superEventHandler = {
  handleMouseEnter: function () {
    title.innerText = "The mouse is here!";
    title.style.color = colors[0];
  },
  handleMouseLeave: function () {
    title.innerText = "The mouse is gone!";
    title.style.color = colors[1];
  },
  handleWindowResize: function () {
    title.innerText = "You just resized!";
    title.style.color = colors[2];
  },
  handleContextMenu: function () {
    title.innerText = "That was a right click!";
    title.style.color = colors[4];
  }
};

title.addEventListener("mouseenter", superEventHandler.handleMouseEnter);
title.addEventListener("mouseleave", superEventHandler.handleMouseLeave);
window.addEventListener("resize", superEventHandler.handleWindowResize);
window.addEventListener("contextmenu", superEventHandler.handleContextMenu);

CSS in JS

element를 찾아라
event를 listen 해라
그 event에 반응해라

JS로 모든 class name을 변경하지는 않아야함

app.js

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    if(h1.className === "active"){
        h1.className="";
    }else{
        h1.className="active";
    }
}


h1.addEventListener("click", handleTitleClick);

style.css

body{
    background-color: beige;
}

h1 {
    color: cornflowerblue;
}

.active{
    color: tomato;
}

className은 모든걸 교체해버린다. 이전의 class들은 상관하지 않고 말야.
classList를 사용해야 해. class를 목록으로 작업할 수 있게끔 허용해.

const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
	const clickedClass = "clicked";
    if(h1.classList.contains(clickedClass)){
    	h1.classList.remove(clickedClass);
    }
    else{
    	h1.classList.add(clickedClass);
    }
    h1.addEventListener("click", handleTitleClick);
}

-> toggle 사용

const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
    h1.classList.toggle("clicked");
	}

h1.addEventListener("click", handleTitleClick);

}

toggle은 h1의 classList에 clicked class가 이미 있는지 확인해서
만약 있다면 clicked를 지워줌
만약 없다면 toggle은 clicked를 classList에 추가해줌
즉 토큰을 toggle한다. 토큰이 존재한다면 토큰을 제거하고 존재하지 않는다면 토큰을 추가한다.

Code Challenge

import "/style.css";
const body = document.querySelector("body");

const wide = "wide";
const normal = "normal";
const narrow = "narrow";

function handleResize() {
  const width = window.innerWidth;
  if (width > 850) {
    body.classList.add(wide);
    body.classList.remove(normal);
  } else if (width >= 550 && width <= 850) {
    body.classList.add(normal);
    body.classList.remove(wide, narrow);
  } else {
    body.classList.add(narrow);
    body.classList.remove(normal);
  }
}

window.addEventListener("resize", handleResize);

index.js

import "./styles.css";

const body = document.body;

const BIG_SCREEN = "bigScreen";
const MEDIUM_SCREEN = "mediumScreen";
const SMALL_SCREEN = "smallScreen";

function handleResize() {
  const width = window.innerWidth;
  if (width > 1000) {
    body.classList.add(BIG_SCREEN);
    body.classList.remove(MEDIUM_SCREEN);
  } else if (width <= 1140 && width >= 700) {
    body.classList.add(MEDIUM_SCREEN);
    body.classList.remove(BIG_SCREEN, SMALL_SCREEN);
  } else {
    body.classList.remove(MEDIUM_SCREEN);
    body.classList.add(SMALL_SCREEN);
  }
}

window.addEventListener("resize", handleResize);

style.css

body {
  font-family: sans-serif;
  display: flex;
}

h2 {
  color: white;
}

.bigScreen {
  background-color: #f1c40f;
}

.mediumScreen {
  background-color: #9b59b6;
}

.smallScreen {
  background-color: #3498db;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body class="mediumScreen">
    <h2>Hello!</h2>

    <script src="src/index.js"></script>
  </body>
</html>

Quiz

1.From JS we can get elements from the HTML. Yes

What object do we use to access HTML from JS? document
How can I find the #title with JS? document.getElementById("title")
How can I find all the .button with JS ?document.getElementsByClassName("button")
How can I find all the

<a>

? document.getElementsByTagName("a")

How can I find all the .home h1:first-child? document.querySelectorAll(".home h1:first-child")
How can I find the first .home h1:first-child?
document.querySelector(".home h1:first-child")
We can change the CSS of an element from JS. Yes.
Will this work? btn.addEventListener(“click”, handler())
Will this work? btn.addEventListener(“click”, handler) Yes.
document and window are the same. No.
What is the difference between using className and classList
className replaces all classes, classList doesn't

13.What does classList.toggle do?

It adds a class if it does not exist and removes a class that exists.

SOO

다음 포스트

JS

basic

Why JS

QUIZ

Project

Basic Data Types

Variables

Booleans

Arrays

Objects

Quiz

Functions

Conditional(조건문)

Quiz

The Document Object

HTML in JS

Searching For Elements

Events

More Events

Code Challenge

CSS in JS

Code Challenge

Quiz

HTML, CSS, GIT AND GITHUB

0개의 댓글