lil.dev
Published on

✨ 바닐라 JS 크롬 앱 만들기 #2 강의 정리

글쓴이

    📌 목차

    Welcome

    ✨ 바닐라 JS로 크롬 앱 만들기

    💁🏻

    1. INTRODUCTION
    2. WELCOME TO JAVASCRIPT
    3. JAVASCRIPT ON THE BROWSER
    4. LOGIN
    5. CLOCK
    6. QUOTES AND BACKGROUND
    7. TO DO LIST
    8. WEATHER

    Welcome to JavaScript!

    2.0

    자바스크립트를 다루는 방법은, 브라우저의 console을 이용하는 거야
    자바스크립트는 네가 어떤 코드를 작성하기를 기다리고 있어. 물론 자바스크립트가 이해할 수 있는.
    콘솔은 자바스크립트와 상호작용하기는 좋지만 코드를 한 줄씩만 작성할 수 있기 때문에
    긴 자바스크립트 프로그램을 작성할 때는 에디터를 이용하는 게 좋다.

    터미널에서 (맥 기준)

    Documents 폴더로 이동해서
    mkdir (폴더이름)명령어로 폴더를 만들고
    code (폴더이름)명령어를 입력해서 VSCode로 폴더를 열어보자.
    VSCode에 빈 폴더가 잘 열렸다면 그 안에 index.html과 app.js를 만들어보자.
    app.js 안에 alert("hi");을 입력하고 파일을 브라우저에 끌어다놓으면
    실행이 되지 않는다. 실행하게 하려면 html을 이용해야 해.

    브라우저는 Html을 열고, Html은 Css와 자바스크립트를 가져오는거야.
    Html이 접착제라는 걸 기억하면 돼.

    보통 script파일은 html파일의 <body>부분의 끝에 집어넣어.

    2.1 Basic Data Types - 가장 기본적인 데이터 타입 2가지

    • number
    • integer
    • float
    • string : 처음부터 끝까지 문자인 것 모든 프로그래밍 언어는 숫자와 문자를 사용할 수 있고 이 두가지는 가장 기초적인 것들이지.

    2.2 Variables - 간단한 계산기 만들기

    모든 프로그래밍 언어에서 변수는 값을 저장하거나 유지하는 역할을 한다.

    2.3 const and let

    const - constant(상수):변하지 않는 수 - 선언 후 값 업데이트가 불가하다!
    기본적으로는 const를 사용하고, 나중에 변해야하는 값만 let을 쓰면 된다.

    const a = 5

    let - 값을 바꾸고 싶을 때는 let으로 선언 후 값만 업데이트 하면 된다

    바꿔도 되는 값과 변하면 안되는 값을 구분함으로써, 코드의 의도를 파악할 수 있지!!

    2.4 Booleans

    const amIhuman = true

    true or false로 값을 나타내는 값.

    null은 그 변수에 아무 겂도 없음을 의미. false랑 다르다.
    undefined는 정의되지 않은 값을 의미. 아무것도 아닌 것.

    let something

    이 something은 undefined이다.

    2.5 Arrays - 데이터를 정리하는 방법. 데이터 구조

    가장 기본적인,필수적인 데이터 구조는 배열이다.

    목적

    하나의 변수안에 데이터의 list를 가지는 것!

    ####만드는법 []기호안에 여러가지 값을 ,기호로 구분해 넣으면 됨.
    아무거나! (null, false, true, undefined 다 가능)
    배열의 순서는 0부터 센다.
    새로운 값을 넣으려면
    array이름.push(새로운 값);을 하면 된다.

    2.6 Objects

    데이터를 정리하는 좋은 방법. 그러나 리스트는 아님!

    const player = {
  name: 'nico',
  points: 10,
  fat: true,
}
console.log(player)
console.log(player.name)
console.log(player['name'])

    object안의 property를 바꾸거나 업데이트하려면 정확히 어느것인지 알려줘야해.

    2.7~8 Function

    function은 내가 계속 반복해서 사용할 수 있는 코드 조각. function은 어떤 코드를 캡슐화해서, 실행을 여러 번 할 수 있게 해줘.

    argument : 인수 argument는, function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법이야.

    function sayHello(nameOfPerson) {
  console.log(nameOfPerson)
}

    argument의 이름은 마음대로 정할 수 있고, argument의 이름으로 값을 받는게 아니라 argument의 순서대로 함수에 들어오는 값을 출력해주는 거야

    function plus(a,b){
	console.log(a + b);
}

plus(8, 60);
const player = {
	name: "nico",
	sayHello: function (otherPersonsName) {
		console.log("Hello " + otherPersonsName + " nice to meet you "
	},
};

player.sayHello("lynn");
player.sayHello("nico");

    2.9~10 Recap

    2.11 Returns

    function에서 원하는 값을 얻고 싶으면 , 콘솔이 아닌 브라우저에 출력하고 싶으면,
    값을 변경한다던지 값을 받아서 function에 넣고 싶으면
    console.log가 아니라 return을 써야해.

    function은 한번 return하면 작동을 끝낸다.

    2.12~14 Conditionals -조건문

    조건문은 true인지 false인지 알려주기 때문에 아주 중요해
    if()문으로 조건문을 작성할 수 있어.

    if (condition) {
  /// condition === true
  //조건이 참이라면 여기에 있는 코드 실행
} else {
  // condition === false
  //조건이 거짓이라면 여기에 있는 코드 실행
  //이 부분은 없어도 됨
  //여기에 다른 조건을 걸어도 된다
}

    if - else
    if - else if - else(뒤에 올 else가 없으면 else if를 쓰지말자)
    parseInt() 함수를 쓰면 문자열을 숫자로 바꿀 수 있어
    isNaN()함수를 쓰면 입력값이 숫자인지 아닌지 알 수 있어