JavaScript Study 01

방학이 시작되고 프론트엔드 스터디를 시작하기로 했다.
JavaScript는 처음 다뤄보는데 '여태 내가 한 건 제대로 된 프론트도 아니었구나 ..' 라는 생각이,,^-^

프론트 공부를 위한 참고자료이다.
설명도 친절하고 이해도 잘 되지만, 기초가 없던 나는 다른 참고 자료도 많이 찾아봐야했다.😭

JavaScript 기초문법

- Data type

javascript는 data type을 따로 선언해주지 않아도 된다!

- 변수 선언

let 변수 명 : 변할 수 있는 값을 선언할 때 사용
const 변수 명 : 변하지 않는 값을 선언할 때 사용

- 출력

문자열을 출력할 때, 백 스팁을 이용하면 +을 사용하지 않고도 바로 붙여서 출력이 가능하다.

- 우선순위

변수마다 우선순위를 주고 싶을 때는 symbol 식별자를 사용한다.
대신, 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};`

- 동기식 vs 비동기식

    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() : 배열안에 들어있는 value마다 내가 전달한 함수들을 출력한다.

//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를 다뤄보는 거라 구글링도 엄청 많이 해봤다.
위 기능을 구현하는데에 도움을 준 참고 사이트를 첨부하겠다.

Search 기능
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에서 동물이름을 animal로 지정하고 If문과 indexOf를 이용하여 문자열을 추출하였다.
같은 문자열을 추출할 경우, .style.display = "flex"로 화면에 표시되도록 하고 그렇지 않을 경우, .style.display = "none"으로 화면에 표시되지 않도록 한다.

실행 화면

트러블슈팅

다행히도 .. 트러블슈팅은 크게 없었고 다만 오타때문에 왜 안되는지 혼자 ~~몇십분동안 짜증을 낸...ㅓ것~~ 빼고 괜찮았다 ^.^

다음주 미션도 화이팅!

Author And Source

이 문제에 관하여(JavaScript Study 01), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yyeonhee/JavaScript-Study-01

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