JavaScript Study 01

50969 ワード
JavaScript テキストリンク

休みが始まり、フロントで勉強を始めました.
初めてJavaScriptを使って「今までやってきたのは本当のフロントじゃないんですよね…」という思いで、^-^
フロントの参考資料を学ぶためです.
説明も親切で、理解も良いのですが、基礎のない私は他の参考資料をもっと探さなければなりません.😭

JavaScript基礎構文


- Data type


JAvascriptはdatatypeを単独で宣言する必要はありません!

-宣言変数

let変数名:可変値を宣言するために使用const変数名:不変値を宣言するために使用

-出力


文字列を出力する場合、backstepを使用して+を使用せずに出力を直接貼り付けます.

-優先度


各変数に優先順位を付けたい場合は、symbol識別子を使用します.
ただし、符号を出力する場合は、${symbol**.description**}を付けて文字列に変換して出力しなければならない.

-ユーザー入力の受信

prompt:ユーザー入力を受信するため(必須!文字)、デジタル入力を受信する際にフォーマットコピーを変換する必要があります.🌟)alert:通知ウィンドウとして表示された場合に使用confirm():確認用

-関数

함수 선언문 
Function sayHello() {
	console.log('Hello');
}
함수 표현문 
let sayHello = function() {
	console.log('Hello');
}
화살표 함수 
let add = function(num1, num2) => (
	return num1+num2;
)
let add = (num1, num2) => num1 + num2;
let sayHello = (name) => `Hello, ${name};`

-同期と非同期

    function printImmediately(print) {
        print();
    }

    function printWithDelay(print, timeout) {
        setTimeout(print, timeout);
    }

    console.log('1'); //동기
    setTimeout(() => console.log('2'), 1000); //비동기 콜백함수 사용
    console.log('3'); //동기
    printImmediately(() => console.log('hello')); //동기 콜백함수 사용
    printWithDelay(() => console.log('async callback'), 2000); //비동기 콜백함수 사용

- Array

forEach():各配列の値は、私が渡した関数を出力します.
//array에 들어있는 값마다 콜백함수 수행.
fruits.forEach((fruit, index, array) => console.log(fruit, index));
push():要素の追加
//push
fruits.push('🍑');
pop():要素の削除
//pop
fruits.pop();
console.log(fruits);
unshift():前から順に要素を追加
fruits.unshift('🍨');
shift():前から順に要素を削除
fruits.shift()
splice():指定された場所を削除
//unshift, shift는 push, pop보다 시간이 엄청 걸림
fruits.push('🍈', '🍒');
fruits.splice(1, 1); //어디 인덱스부터 몇개를 지울지 말해야함
fruits.splice(1,1,'🍅'); //지워진 위치에 추가도 가능
console.log(fruits);
배열 합치기 & 배열 찾기 
//combine two arrays
const fruits2 = ['🍨'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);

// array searching
console.clear();
console.log(fruits);
console.log(fruits.indexOf('🍑')); //해당하는 인덱스를 알려줌
console.log(fruits.includes('🍑')); //있는지 없는지 true or false로 알려줌

-継承と多形性

class Shape{
    constructor(width, height, color) {
        this.width = width;
        this.height = height;
        this.color = color;
    }
    draw() {
        console.log(`drawing ${this.color} color of`);
    }
    getArea() {
        return width * this.height;
    }
}

class Rectangle extends Shape{}
class Triangle extends Shape{
    draw() {
        super.draw()
    }
    getArea() {
        return (this.width * this.height / 2);
    }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle = new Triangle(20, 20, 'red');
triangle.draw();

- Object

object = { key : value } 
const obj1 = {};
const obj2 = new Object();

function print(person) {
    console.log(person.name);
    console.log(person.age);
}

const yeon = {name: 'yeonhee', age: 22};
print(yeon);

yeonhee.hasJob = true;
console.log(yeonhee.hasJob);

delete yeonhee.hasJob;
//for (key in obj) key에 할당이 되면서.. 따라서 모든 키들을 받아서 처리하고 싶을 때 사용
console.clear()
for (key in yeonhee) {
    console.log(key);
}

//for (value of iterable) 배열과 같은 것을 출력하고 싶을때
const array = [1,2,3,4,5];
for (value of array) {
    console.log(value1)
}

Week1 Mission


第1週ミッション!
  • 検索機能とダークモードを実現!
    • JSは初めてなので、Googleも何度もやっています.
    上記の機能を実現するための参考サイトを添付します.
    検索機能
    Darkmode機能

    HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mission 01.css">
    <script src="mission 01.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="head_title" onclick="DarkMode()">
        <p>여러분의 눈은 소중하니까, <strong>지금 바로 다크 모드를 켜보세요!</strong></p>
    </div>

    <button onclick="DarkMode()" id="dark_bt">다크 모드로 보기</button>
    <div class="search">
        <input onkeyup="search()" type="text" id="searchbar" placeholder="원하는 동물을 검색해보세요.">

        <p id="list_title">ANIMAL LIST</p>
        
        <div class="animal">
            <p class="item">호랑이</p>
            <p class="item">토끼</p>
            <p class="item">사자</p>
            <p class="item">다람쥐</p>
            <p class="item">고양이</p>
            <p class="item">강아지</p>
        </div>

    </div>

</body>

</html>

    CSS

    @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

.notosanskr * {
  font-family: "Noto Sans KR", sans-serif;
}

* {
  font-family: "Noto Sans KR", sans-serif;
}

body {
  margin: 0;
}

.head_title {
  background-color: #d7d0e3;
}

.head_title p {
  margin: 0;
  font-size: 18px;
  display: block;
  text-align: center;
  color: #000;
  padding: 1rem 1rem;
}

#dark_bt {
  background-color: #d7d0e3;
  display: flex;
  margin-top: 1%;
  margin-left: 80%;
  font-size: 15px;
  border: none;
  border-radius: 20px;
  width: 232px;
  height: 40px;
  padding: 0.5rem 3.5rem;
}

#searchbar {
  font-size: 15px;
  margin-top: 5%;
  width: 650px;
  height: 55px;
  box-shadow: 3px 3px 3px 3px #e4e4e4;
  border-radius: 10px;
  border: none;
}

#list_title {
  font-size: 20px;
}

input:focus {
  outline: none;
}

.search {
  text-align: center;
  margin-top: 1%;
}

.animal {
  margin-top: 2%;
  font-size: 17px;
  border-radius: 10px;
  width: 100%;
  height: 320px;
  text-align: center;
}

.animal p {
  display: flex;
  justify-content: center;
  /* text-align: center; */
  margin-top: 1.5%;
}

.dark-mode {
  background-color: black;
  color: white;
}

    JS

    'use static';

// DarkMode 구현
function DarkMode() {
    var body = document.body;
    body.classList.toggle("dark-mode");

    var button = document.getElementById("dark_bt");

    if (button.innerHTML == "다크 모드로 보기") {
        button.innerHTML = "라이트 모드로 보기";
        button.style.backgroundColor = "#FFEFB2";
    } else {
        button.innerHTML = "다크 모드로 보기";
        button.style.backgroundColor = "#E3DBEB";
    }
}

// Search 기능 구현
const item = document.getElementsByClassName('item');
function search() {
    var searchbar, i;
    searchbar = document.getElementById("searchbar");
    for (i = 0; i < item.length; i++) {
        //각 동물을 의미
        const animal = item[i].textContent;
        if (animal.indexOf(searchbar.value) > -1) {
            item[i].style.display = "flex";
        } else {
            item[i].style.display = "none";
        }
    }
}
    Darkmode
    IfゲートとinnerHTMLを使用して「暗いモードで表示」ボタンをクリックすると、ボタンのフォントを「光モードで表示」に変換できます.
    また、ボタンの色を変更するために、button.style.backgroundColorによりボタンの背景色を変更した.
    Search
    各動物名を表すitemを用いてsearch()という関数を作成した..lengthを用いて、FOR文は、動物の個数毎に実行される.
    itemは動物を動物と命名し、If文とindexOfを用いて文字列を抽出した.
    同じ文字列を抽出する場合は、.style.display = "flex"を選択して画面に表示する必要があります.そうしないと、.style.display = "none"を選択して画面に表示しません.

    実行画面



    問題シュート


    幸いなことに...あまり問題なくシュートして、ただ間違えたから、どうしてだめなのか、一人で数十分もかんしゃくを起こしただけ・・・o.^以外はいいですね
    来週のミッションも頑張ります!
    フォルダバックアップツール
    mysqlバックアップインスタンス攻略