JavaScript

JS : 프로그래밍 언어
Specification : 언어 작동 설명서, 메뉴얼
Specification의 버전
ECMAScript
ES6 : ECMAScript6

JS는 중앙집권화 되어서 업데이트하면 모든 브라우저에서 작동

각 브라우저가 Specification을 받아서 각 방식으로 실행

모든 웹브라우저에는 JS가 설치되어 있어서 사용자가 따로 다운로드할 필요 없음

Vanilla JS

Library가 없는 JS
브라우저가 제공하는 JS

Variable

JS ≒ 훈육하지 않는 아빠

instruction을 제외하고 ';'을 붙여야 한다.

위에서 아래로 실행

var : 재선언 가능, 재할당 가능
let : 재선언 불가, 재할당 가능
const : 재선언 불가, 재할당 불가

Data Type

string, boolean, number, float

Array

list format

camel case : 변수명을 소문자로 시작해서 스페이스 대신에 대문자 사용

const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", true, 123];

console.log(daysOfWeek); // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', true, 123]

console.log(daysOfWeek)[2]; // Wed

Object

key-value format

const myInfo = {
	"Dasol", 1, 21
}

const yourInfo = {
	name:"Minjeong", // name은 text가 아니라 variable
    	month:8,
        day:20,
        fav:["Apple", "Food", "Photoshop"] // Array
        apple:[
        {
            name:"Macbook Air", // Object
            price:116
        },
        {
            name:"IPad", // Object
            price:69
        }
        ]       
}

console.log(myInfo); // ERROR:Array가 아님

console.log(yourInfo); // { name:"Minjeong", month: 8, day: 20 }

console.log(yourInfo.name); // Minjeong
yourInfo.name = "MJ"; // const object의 값을 바꿀 수 있다.
console.log(yourInfo.name); // MJ

console.log(yourInfo.apple[1].name); // IPad

Array와 Object 안에서 ,(comma) 빼먹지 않기

JS가 에러나도 HTML/CSS는 작동함

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

JS파일은 항상 Body 안에 있어야 한다.

HTML

<h1 id="title">This works!</h1>

CSS

 #title {
 }

JS

const title = document.getElementById("title");

const title = document.querySelector("#title"); // id
const title = document.querySelector(".title"); // class

title.innerHTML = "HI! From JS";
title.style.color = "red";
document.title = "I own you now";

document : object
HTML document는 JS가 된다.

Function

function sayHello(name, day) {
	console.log("Hello" + name);
	colsole.log('You were born in', day);
	console.long(`His name is ${name}. He was born in ${day}.`);
    
    return `His name is ${name}. He was born in ${day}.`
}

sayHello("Dasol", 21);
// HelloDasol
// You were born in 21
// His name is Dasol. He was born in 21.

const greetMan = sayHello("Dasol", 21);
console.log(greetMan) // return 없으면 undefined

const calculator = {
    plus: function (a, b) {
        return a + b;
    },
    minus: function (a, b) {
        return a - b;
    },
};

const plus = calculator.plus(5,5);
console.log(plus);

console, calculator : object
log(), plus() : function

DOM (Document Object Model)

자바스크립트는 HTML(Document)의 모든 태크, 요소를 가져와 Object로 바꾼다.
JS로 HTML을 바꿀 수 있다.

Event

웹사이트에서 발생하는 것

이벤트에서 다룰 함수 : click, resize, submit, input, change, load, before closing, printing

이벤트 중간에 가로 챌 수 있다.

listen to event : 이벤트 받기를 기다림

function handleResize() {
	console.log("I have been resized");
}
function handleResize(event) {
	console.log(event);
}

window.addEventListener("resize", handleResize) // 필요한 시점에 함수 호출 (resize event가 발생할 때마다 호출)
window.addEventListener("resize", handleResize) // 즉시 함수 호출

자바스크립트는 이벤트를 다루는 함수를 만들 때마다 자동적으로 함수를 객체에 붙인다.

const BASE_COLOR = "rgb(0,0,0)";
const OTHER_COLOR = "#FFFFFF";

function handleClick() {
	const currentColor = title.style.color;

	if (currentColor === BASE_COLOR) {
    		currentColor = OTHER_COLOR;
        } else {
        	currentColor = BASE_COLROR;
        }
}

title.addEventListener("click", handleCLick);
// title은 click을 기다리고 있다.

HTML은 HTML파일에서만 작업하고 CSS는 CSS파일에서만 작업하고
JS가 로직을 처리하게 만들기 위해

// HTML
<h1 id="title" class="btn">This works!</h1>

// CS
.btn {
    cursor: pointer;
}

// JS
// (클래스)가 없으면 add, 있으면 remove 
title.classList.toggle(CLICKED_CLASS);

Author And Source

이 문제에 관하여(바닐라 JS로 크롬 앱 만들기 (1) [정리 중]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@solda/바닐라-JS로-크롬-앱-만들기-1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

바닐라 JS로 크롬 앱 만들기 (1) [정리 중]