0120バニラJS

11711 ワード
テキストリンク

ハーブ


ライブラリ/フレームワークが使用されていない純粋なJavaScript.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vanilaJS</title>
        <link href="index.css" rel="stylesheet"/>
    </head>
    <body>

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

変数可変


変更または変更可能です.
let a = 221;
let b = a - 5;
a = 4;
console.log(b, a); => 216, 4

const a = 221;
let b = a - 5;
a = 4;
console.log(b, a); => err (const는 변할 수 X)

オブジェクトオブジェクトオブジェクト

const nicoInfo = {
	name:"Nico",
    age:33,
    gender:"Male",
    isHandsome:false
}

console.log(nicoInfo.gender) => Male

関数＃カンスウ＃

//매개변수
function sayHello(name, age){
	console.log('Hello! ' + name + ' you have ' + age + ' years of age.');
}

//인자
sayHello("Nicolas", 15); => Hello! Nicolas you have 15 years of age.

//백틱(``)
function sayHello(name, age){
	console.log(`Hello ${name} you are ${age} years old`);
}

sayHello("Nicolas", 15); => Hello Nicolas you are 15 years old

//return
function sayHello(name, age){
	return `Hello ${name} you are ${age} years old`;
}

const greetNicolas = sayHello("Nicolas", 15);
console.log(greetNicolas); => Hello Nicolas you are 15 years old

//객체 안에 함수
const calculator = {
    plus : function(a, b) {
        return a+b;
    }
}

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

arithmetic operation

const calculator = {
    plus : function(a, b) {
        return a + b;
    },
    subtract : function(a, b) {
        return a - b;
    },
    multiply : function(a, b) {
        return a * b;
    },
    divide : function(a, b) {
        return a / b;
    },
    squareRoot : function(a, b){
        return a ** b;
    }
}

const plus = calculator.plus(5, 5);
const subtract = calculator.subtract(5, 5);
const multiply = calculator.multiply(5, 5);
const divide = calculator.divide(5, 5);
const squareRoot = calculator.squareRoot(5, 5);

console.log(plus);
console.log(subtract);
console.log(multiply);
console.log(divide);
console.log(squareRoot);

JS DOM Functions

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

console.log(title); => <h1 id="title">This works!</h1>

const title = document.getElementById("title");
title.innerHTML = "Hi From JS"; => This works!가 Hi From JS로 바뀜

document.querySelector();


ノードの最初のサブノードを返します
const title = document.querySelector("#title");
title.innerHTML = "Hi From JS";
title.style.color = "red";
//<title> 변경
document.title="I own you now";

イベントイベントイベント


サイトで起きた出来事(クリック、入力、~~~)
const title = document.querySelector("#title");

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

// resize는 handleResize()를 즉시 호출
// window.addEventListener("resize", handleResize());

// 즉시 호출하지않고 변경될 때 호출
window.addEventListener("resize", handleResize);

if-else

&& 둘다 true
|| or
const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";

function handleClick() {
    const currentColor = title.style.color;
    if (currentColor === BASE_COLOR) {
        title.style.color = OTHER_COLOR;
    } else {
        title.style.color = BASE_COLOR;
    }
}

function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("click", handleClick);
}

init();

toggle

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vanilaJS</title>
        <link href="index.css" rel="stylesheet"/>
    </head>
    <body>
        <h1 id="title" class="btn">This works!</h1>
        <script src="index.js"></script>
    </body>
</html>
h1{
    color: #34495e;
    transition: color 0.5s ease-in-out;
}
body{
    background-color: #ecf0f1;
}
.clicked{
    color : #7f8c8d;
}
.btn{
    cursor: pointer;
}
// title => #title.clicked
const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
    //T/F
    // const hasClass = title.classList.contains(CLICKED_CLASS);
    // if (hasClass){
    //     title.classList.remove(CLICKED_CLASS);
    // } else {
    //     title.classList.add(CLICKED_CLASS);
    // }
    title.classList.toggle(CLICKED_CLASS);
}

function init(){
    title.addEventListener("click", handleClick);
}

init();
Javascriptオブジェクト内で検索すると、新鮮な話題のようです.
ETロボコン開発環境構築 for Mac