🍌바닐라 JS로 크롬 앱 만들기
1.[바닐라 JS로 크롬 앱 만들기] # 1.0 Introduction
자바스크립트는 모든 브라우저에 내장되어 있고 프론트엔트 개발자가 사용할 수 있는 유일한 프로그래밍 언어이다.우리는 파이썬과 다르게 자바스크립트를 설치하거나 다운로드 한 기억이 없다. 자바스크립트는 모든 브라우저(my 컴퓨터, your 컴퓨터, 애플, 안드로이드, mac
2.[바닐라 JS로 크롬 앱 만들기] # 2.0 Your First JS Project
브라우저에서 inspect(검사) -> console 창에서 JavaScript 코드를 쳐서 경고창을 만들었다. alert('hi') 하지만 콘솔 창에서의 코드는 한 줄 이상 작성할 수 없기 때문에 VS Code 상에서 하는 것이 좋다. Window 사용자 참고
3.[바닐라 JS로 크롬 앱 만들기] # 2.1 Basic Data Types
# 2.1 Basic Data Types 데이터 타입의 종류 Number Number타입은 서로 연산기호를 이용하여 계산할 수 있다. 정수(Integer) // 1, 2, 3, 4 ... 소수(Float) // 1.555, 2.545345 ... String
4.[바닐라 JS로 크롬 앱 만들기] # 2.2 Variables
const: 변수 정의 함수console.log( ): 출력 함수 const으로 변수를 선언해서 코드 수정 시, 불필요한 시간을 줄일 수 있다.const는 constant(상수)에서 따왔고 항상 변하지 않는 값을 의미한다.콘솔 결과창JavaScript에서 변수의 이름을
5.[바닐라 JS로 크롬 앱 만들기] # 2.3 const and let
기본적으로 const을 쓰고 필요할 때만 let을 쓰되, var은 쓰지 말것.always constsometimes letnever varconst는 변수 값이 절대 안 바뀔 때 사용하고, let은 변수 값이 바뀔 때 사용한다.<콘솔 결과창>const를 쓰면 변수
6.[바닐라 JS로 크롬 앱 만들기] # 2.4 Booleans
절대 자연적으로 생기지 않음개발자가 직접 "빈 값" 자체를 입력해 줘야함variable 안에 어떤 값도 "없음"을 확실히 하기 위함variable이 존재하고, 값이 주어졌는데 그 값은 "비어있음"JS에서는 null, 파이썬에서는 'None'"정의되지 않음" "변수에 값
7.[바닐라 JS로 크롬 앱 만들기] # 2.5 Array
array는 하나의 variable 안에 데이터의 list를 가지는 것이다.시작과 끝에 대괄호 를 사용한다.array 안의 각각의 항목은 쉼표(,)로 구분한다.array 안에 number, string, boolean, null, undefined 등 아무거나 넣어도
8.[바닐라 JS로 크롬 앱 만들기] # 2.6 Objects
설명이 필요하지 않은 데이터 리스트들은 array로, 설명이 필요한 정보가 담긴 데이터 리스트들은 object로! 이 variable이 존재한다는 것을 기억해야 하고, 이 모든 variable의 이름, 즉 property 이름을 지어야 하기 때문에 별로다. cons
9.[바닐라 JS로 크롬 앱 만들기] # 2.7-2.8 Function
Function function은 계속 반복해서 사용할 수 있는 코드 조각 어떤 코드를 캡슐화 해서 여러번 실행 가능 ex) 동영상 반복 재생 function 선언하기 function 실행하기
10.[바닐라 JS로 크롬 앱 만들기] # 2.11 Returns
console.log : console에 무언가를 log하는 것(기록하여 보여줌)
11.[바닐라 JS로 크롬 앱 만들기] # 2.13 Conditionals part One
Conditionals(조건문)은 true인지 false인지 알려준다. prompt는 사용자에게 창을 띄울 수 있게 해준다. prompt는 2개의 argument를 받을 수 있고 첫번째 argument자리는 message(string)이 함수 'prompt'로 인해
12.[바닐라 JS로 크롬 앱 만들기] # 2.14 Conditionals part Two
업로드중..condition 자리에는 boolean으로 판별 가능해야 한다.➡️ true, falseisNaN()은 ()안에 있는것이 NaN인지 판별하는 방법이다.⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️age = 문자 -> isNaN =
13.[바닐라 JS로 크롬 앱 만들기] # 2.15 Conditionals part Three
AND (&&)은 false가 하나라도 있으면 결과는 false다.OR (| |)은 true가 하나라도 있으면 결과는 true다.else는 선택 사항이다. 써도 되고 불필요하면 안써도 된다.입력값이 숫자가 아니거나 음수이면 "Please write a real posi
14.[바닐라 JS로 크롬 앱 만들기] # 2.16 Recap
업로드중..= -> value를 할당== -> 값만 같으면 true=== -> 값과 값의 종류(Data Type)이 모두 같은 지를 비교해서 같으면 true, 다르면 false!== -> 같지 않음을 확인age가 만약 100이면을 표현할 때는 ===를 사용한다.이때 해
15.[바닐라 JS로 크롬 앱 만들기] # 3.0 The Document Object
JavaScript와 HTML은 연결되어 있다. JavaScript를 통해 HTML의 element들을 변경하고 읽을 수 있다. document는 브라우저에 이미 존재하는 object다.
16.[바닐라 JS로 크롬 앱 만들기] # 3.1 HTML in Javascript
핵심: Javascript 파일로 document(는 html을 의미한다)의 element를 가지고 올 수 있고, 그것을 변경할 수 있다.className, id, innerText, autofoucs..getElementById: 말그대로 id, 하나의 값을 반환해줄
17.[바닐라 JS로 크롬 앱 만들기] # 3.2 Searching For Elements
getElementsByClassName: 많은 element를 가져올 때 쓴다. (array 반환)<결과>모든 h1 elements가 나온다.element를 CSS selector 방식으로 검색할 수 있다.<결과>querySelector는 동일한 class
18.[바닐라 JS로 크롬 앱 만들기] # 3.3-3.5 Events
Event란? click을 하면 그게 event, h1 위로 마우스가 올라가면 event, 내가 입력을 끝내거나, 내 이름을 적거나, enter를 누르거나, wifi에서 접속이 해제되는 등 이 모든 것들이 event다. 이 모든 event들을 JavaScript는 l
19.[바닐라 JS로 크롬 앱 만들기] # 3.6-3.8 CSS in Javascript
step 1. element를 찾아라 step 2. event를 listen 해라 step 3. 그 event에 반응해라 마우스로 h1를 클릭했을 때 h1의 색을 blue -> tomato -> blue -> tomato 순으로 바꿔보는 코드를 짜보려고 한다. h1
20. [바닐라 JS로 크롬 앱 만들기] # 4.0 Input Values
HTML에서 element를 가져와서 JavaScript에 쓰려고 한다. id="login-form" 부분을 가져와보자. 방법 1) querySelector 이용하기 방법 2) getElementById 이용하기 const loginForm로 변수 선언을 해줬
21.[바닐라 JS로 크롬 앱 만들기] # 4.1 Form Submission
개발자가 user name에 조건을 걸어서 user가 유효한 user name만 입력할 수 있도록 컨트롤 할 수 있다.user가 만약 다음과 같은 경우처럼 user name을 만들 경우, 개발자는 'alert(알림)'을 띄워서 user에게 적절한 user name을 입
22.[바닐라 JS로 크롬 앱 만들기] # 4.2-4.3 Events
user name을 입력한 후에 Log In 버튼을 클릭하거나 엔터를 누르면, 바로 submit이 되고 웹 페이지 전체가 새로고침된다. ✔️왜? 브라우저는 엔터가 눌리면 새로고침을 하고 form을 submit하도록 셋팅되어 있기 때문이다. 새로고침이 일어나는 건 fo