1. CSS 추가하는 방법

<head>
  <title>Something</title>
  <link rel="stylesheet" href="index.css" />
</head>

head 태그 내부에 추가합니다.
link 태그를 활용하여 href에 css파일 경로를 입력합니다.

index.css

body {
  background-color: peru;
}

h1 {
  color: white;
}

결과

2. JS 추가하는 방법

<body>
  <h1>This Works!</h1>
</body>
<script src="index.js"></script>

body 태그 밑에 추가합니다.
script 태그를 활용하여 src에 js파일 경로를 입력합니다.

index.js

alert("Hello World!");

결과

variable(변수)

1. let

let a = 100;
let b = 100 - 10;
a = 10;

console.log(b, a);

90, 10
let은 초기화한 변수값을 다시 할당하는 순간 그 값을 가진 변수가 됩니다.

2. const

const a = 100;
let b = 100 - 10;
a = 10;

console.log(b, a);

에러 발생 : Uncaught TypeError: Assignment to constant variable.
const는 상수로서 초기화한 값 그대로를 가지고 있습니다.

3. var

var a = 100;
var b = 100 - 10;
a = 10;

console.log(b, a);

90, 10
var는 let과 비슷하게 초기화한 변수값을 다시 할당하는 순간 그 값을 가진 변수가 됩니다.

데이터 타입

1. String

// String
const name = "junjang";

console.log(name);

문자열을 ""안에 넣고 변수에 넣고싶을 떄 사용합니다.

2. boolean

const what1 = true;
const what2 = false;

console.log(what1);
console.log(what2);

참, 거짓 값으로 0 혹은 1로 표현됩니다.
문자열이 아닌 true, false 를 입력하여 표협합니다.

3. number

const number = 55.1;

console.log(number);

숫자를 표현할 떄 사용합니다.

데이터 정렬

1. Array

const someThing = "someThing";
const dayOfWeek = ["mon", "tue", "wed", "thu", "fri", someThing];

console.log(dayOfWeek);
console.log(dayOfWeek[2]);

["mon", "tue", "wed", "thu", "fri", "someThing"]
wed
문자열을 ""안에 넣고 변수에 넣고싶을 떄 사용합니다.
컴퓨터는 0부터 시작하기 때문에 3번 째인 값을 꺼내오고 싶다면 2를 가져옵니다.
배열에는 어떤 타입이든 넣어서 출력이 가능합니다.
내가 특정 값을 깅거해서 가져오는 부분이 데이터가 많아질 경우 힘들어집니다.

2. Object

const myInfo = {
  name: "junjang",
  age: 28,
  gender: "Male",
  isHandsome: true,
};

console.log(myInfo);

{name: "junjang", age: 28, gender: "Male", isHandsome: true}

값 가져오기

const myInfo = {
  name: "junjang",
  age: 28,
  gender: "Male",
  isHandsome: true,
};

console.log(myInfo.name);

배열보다 편리하게 원하는 값을 가져올 수 있습니다.

값 바꾸기

const myInfo = {
  name: "junjang",
  age: 28,
  gender: "Male",
  isHandsome: true,
};

console.log(myInfo.name);

myInfo.name = "junhyeoung";

console.log(myInfo.name);

myInfo내에 있는 값은 바꿀 수 있지만 myInfo자체는 바꿀 수 없습니다.

Array를 Oject에 넣기

const myInfo = {
  name: "junjang",
  age: 28,
  gender: "Male",
  isHandsome: true,
  favMovies: ["Shutter island", "Inception", "Old boy"],
};

console.log(myInfo.favMovies);

["Shutter island", "Inception", "Old boy"]
Object내의 배열이 출력됩니다.

Object에 Array에 Object넣기

const myInfo = {
  name: "junjang",
  age: 28,
  gender: "Male",
  isHandsome: true,
  favMovies: ["Shutter island", "Inception", "Old boy"],
  favFoods: [
    {
      name: "kimchi",
      fatty: false,
    },
    {
      name: "hamberger",
      fatty: true,
    },
  ],
};

console.log(myInfo.favFoods);

{name: "kimchi", fatty: false}, {name: "hamberger", fatty: true}
Array 안에 Object를 넣을 수도 있습니다.

function(함수)

1. Function

function sayHello(name, age) {
  console.log("my name is", name, "i'm", age);
}

sayHello("junjang", 28);

my name is junjang i'm 28
function 함수이름(인자값) { 함수 내용 } 공식을 이용하여 함수를 만듭니다.
인자값에는 어떤 이름이 들어가도 무방하며 외부 값을 입력받아 사용하기 위해 사용합니다.

백틱 사용

function sayHello(name, age) {
  console.log(`my name is ${name} i'm ${age}`);
}

sayHello("junjang", 28);

백틱내에 String과 \${} 문법을 통해서 스마트하게 가능합니다.

return 사용

function sayHello(name, age) {
  return `my name is ${name} i'm ${age}`;
}

const returnFunction = sayHello("junjang", 28);

console.log(returnFunction);

returnFunction은 return 값을 가지기 때문에 sayHello 함수의 return 값을 가지게 됩니다.

Object 사용

const calculator = {
  plus: (a, b) => {
    return a + b;
  },
};

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

calculator 객체의 key값을 이용하여 함수를 만들고 return값을 받아 console.log로 출력합니다.

DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 id="title">This Works!</h1>
  </body>
  <script src="index.js"></script>
</html>

const title = document.getElementById("title");
const title = document.querySelector("#title");
title.innerHTML = "Hi! From JS";
title.style.color = "red";
console.dir(title);

h1에 id를 title로 선언해서 고유값을 줍니다.
document.getElementById()를 사용해 id값을 가져옵니다.
innerHTML을 사용하여 글자를 바꿀 수도 있습니다.
dir함수를 활용하여 DOM에서 수정할 수 있는 것들을 찾아서 style등을 수정할 수도 있습니다.
querySelector는 해당 고유값을 가진 태그를 찾아줍니다.

event(이벤트)

WINDOW

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 id="title">This Works!</h1>
  </body>
  <script src="index.js"></script>
</html>

resize

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

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

window.addEventListener("resize", handleResize);

window 객체의 addEventListener함수를 사용하여 이벤트를 기다립니다.
handleResize와 handleResize()의 차이점은 이벤트를 기다리는가 혹은 즉시 실행하는가의 차이입니다.

click

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

function handleClick() {
  title.style.color = "red";
}

title.addEventListener("click", handleClick);

title 객체의 addEventListener함수를 사용하여 이벤트를 기다립니다.
click시 handleClick함수를 호출하여 red로 바꿉니다.

조건문

1. if / else

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 id="title">This Works!</h1>
  </body>
  <script src="index.js"></script>
</html>

if ("10" === 10) {
  console.log("hi");
} else {
  console.log("ho");
}

if ("10" === "10") {
  console.log("hi");
} else if ("hello" == "hello") {
  console.log("ho");
} else {
  console.log("hu");
}

if (20 > 5 && "junjang" === "junjang") {
  console.log("hi");
} else {
  console.log("hu");
}

if (20 > 5 || "junjang" === "junjang") {
  console.log("hi");
} else {
  console.log("hu");
}

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

if (age > 18) {
  console.log("you can drink");
} else {
  console.log("you can't");
}

if / else를 통해 true 값이면 if문을, false 값이면 else문을 처리할 수 있습니다.
&&(and) 와 ||(or) 을 통해 추가적인 조건을 사용할 수도 있습니다.

2. if / else function

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

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

// resize
function handleClick() {
  const currentColor = title.style.color;
  console.log(currentColor);

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

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

init();

색 두가지를 변수에 담고 init 함수를 즉시실행 하여 기본 컬러를 담고 click시 handleClick이 발생하도록 합니다.
만약 현재 색이 기본 컬러면 다른 컬러로 바꾸고, 다른 컬러면 기본 컬러로 바꾸는 if / else문 입니다.

3. if / else classList

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

const CLICKED_CLASS = "clicked";

function handleClick() {
  /* title.classList.toggle(CLICKED_CLASS); */
  const hasClass = title.classList.contains(CLICKED_CLASS);

  if (!hasClass) {
    title.classList.add(CLICKED_CLASS);
  } else {
    title.classList.remove(CLICKED_CLASS);
  }
}

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

init();

classList를 통해 class를 포함할 떄 추가 혹은 제거를 할 수 있습니다.
toggle은 위의 handleCheck 함수를 한 번에 처리해줍니다.
MDN 공식문서

옵저버 패턴을 활용하여 인스타그램 피드 렌더링 해보기 (0)	2020.09.09
객체지향...? 그게 뭐죠..;;; (0)	2020.08.30
자바스크립트 배열을 탐구 & 활용하기 (0)	2020.08.01
조건문과 반복문을 이용해 별을 찍어보기 (feat. Javascript) (0)	2020.07.29
자바스크립트의 데이터 타입에는 어떤 것들이 있을까? (0)	2020.07.27

ABOUT ME

개발 여행 개발 여행

1. CSS 추가하는 방법

index.css

결과

2. JS 추가하는 방법

index.js

결과

variable(변수)

1. let

2. const

3. var

데이터 타입

1. String

2. boolean

3. number

데이터 정렬

1. Array

2. Object

값 가져오기

값 바꾸기

Array를 Oject에 넣기

Object에 Array에 Object넣기

function(함수)

1. Function

백틱 사용

return 사용

Object 사용

DOM

event(이벤트)

WINDOW

resize

click

조건문

1. if / else

2. if / else function

3. if / else classList

'Front-end > Javascript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. CSS 추가하는 방법

index.css

결과

2. JS 추가하는 방법

index.js

결과

variable(변수)

1. let

2. const

3. var

데이터 타입

1. String

2. boolean

3. number

데이터 정렬

1. Array

2. Object

값 가져오기

값 바꾸기

Array를 Oject에 넣기

Object에 Array에 Object넣기

function(함수)

1. Function

백틱 사용

return 사용

Object 사용

DOM

event(이벤트)

WINDOW

resize

click

조건문

1. if / else

2. if / else function

3. if / else classList

'Front-end > Javascript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바