노마드코더-바닐라JS로_크롬앱_만들기

JS가 완벽한 언어라고 할 수 없지만 프론트엔드에서 쓸 수 있는 유일한 프로그래밍 언어이다. JS는 웹 전체를 아우르는 유일한 프로그래밍 언어이다.JS는 설치한 적이 있는가? 없을거다. 왜냐면 JS는 모든 브라우저에 내장되어 있기 때문이다.백엔드의 경우 루비, 파이썬,

threejs위 사이트에 들어가면 JS로 이런걸 만들 수 있다고?!를 느낄 수 있다.데이터의 시각화, 비디오 게임 등등...JS 기술을 좀 더 가다듬어서 더 깊게 배우고 싶다면 프레임 워크로 넘어가면 된다.프레임 워크 : 소프트퀘어 어플리케이션이나 솔루션의 개발을 수월

강의JS를 다루는 방법은 브라우저의 콘솔을 사용하는거다. ( 우클릭 > 검사 : inspect > Console )콘솔은 자바스크립트와 상호작용하긴 좋은데, 한줄만 작성이 가능하기 때문에 정말 긴 JS 프로그램을 작성해야 한다면 그리 유용하진 않다.그렇기 때문에!!!!

정수와 소수는 더할 수 있다. (2+3.5 = 5.5)처음부터 끝까지 글자로 이루어진것"hello""hello" + "my name is mini" = "hellomy name is mini"

강의콘솔에게 메세지를 보내는 함수괄호 안에 정수나 소수 문자열을 넣을 수 있다.값을 저장하거나 유지하는 역할을 한다.const는 constant(상수)라는 것을 의미하고, 바뀌지 않는 값이라는 뜻이다. (계속 유지)변수 a에 정수5라는 바뀌지 않는 값을 저장한다. 단순

변수를 만드는 방법에 2가지가 있다. 1\. const2\. letconst는 값이 바뀔 수 없다. 그렇지만, 가끔은 변수 값을 바꾸는게 필요할 때도 가끔 있을거다.값이 바뀌기를 원할때 let을 사용해야 한다. let은 새로운 것을 생성할 때 사용하는 것이다.업데이트

강의true = on / false = off"true" (x) / "false" (x)true는 1, false는 0이라고...나는 그렇게 받아들이고 있음 ㅇㅇ어디에 사용되는가?? => 로그인을 했는가? / 웹사이트가 로딩되고 있는가? 존재하지 않음, 정의되지 않음

강의데이터 타입에 알았다면, 데이터를 정리하는 법을 알아야 한다. 이게 컴퓨터과학에 있어서 매우 큰 부분인데, 바로 데이터 구조에 대한 것이다.가장 기본적인 구조는 array(배열)이다.

강의우리는 console.log()나 list.push()같은 xx.xx같은 형태를 많이 봐았다. 무슨 의미 일까?object는 무엇인가가끔은 list를 만드는게 아니라 object를 만들어야 할 때가 있다.예를 들어 게임을 만든다고 했을때, 플레이어 구상을 짜기 위해

console.log()에는 괄호가 있었는데, object때 만든 player.points 여기엔 괄호가 없다.왜냐면 우리의 player.points는 함수(function)가 아니기 때문이다. player.points는 단지 숫자일 뿐이다. 계속 반복해서 사용할 수

강의 2.10 강의 과제 - 계산기 만들기 이번 강의의 요지는 위 코드에서 console.log를 쓰지 말자는거다. 왜냐하면 우린 사실 함수 밖에서 결과값을 얻기를 원하기 때문이다. console.log 처럼 단순히 화면에 출력하는것을 원하는게 아니라, 어디 저장소

강의조건문은 무언가 확인할 때 사용한다.사용자에게 창을 띄울 수 있도록 해준다. 2개의 인자를 받는다. (문자,기본값)메세지를 보여주고 값을 넣으라고 말해준다.=> 이 함수를 사용하게 되면, js는 여기서 멈춰 있게 된다. 우리를 기다림. 아직 작동 안함. 이것은 실행

강의이번 편에서는, JS를 이용해서 브라우저에 대해 조금 더 이해해보는 시간을 가질거다!듣고 나면 JS가 어떻게 브라우저를 어떻게 움직이게 하는지 알게 된다.JS를 사용하는 이유는 HTML과 상호작용하기 위해서다.= HTML의 Elements들을 JS를 통해 변경하고,

h1 태그 생성 JS로 정보를 가지고 올 수 있는 방법은, document 객체와 , element를 가져오는 수 많은 함수들을 이용하는 거다. 오늘 배울것은 정말정말정말정말정말 자주 사용한다!!!!! 콘솔에 document.getElementById("title

강의위의 코드는 에러가 생긴다.Cannot set properties of null (setting 'innerText') = 코드 내에 어떤 값이 null이라는 뜻. 근데 우리는 아무것도 없는(null)의 innerText를 접근하려고 한거다.JS코드를 보면, tit

강의복습JS파일이 있기 때문에 JS를 통해 HTML의 내용을 가져올 수 있다. 우리가 JS파일을 import하지 않았다면, document는 여기 존재할 수 없다. 포인트는, document가 HTML이 JS를 load하기 때문에 존재하는 것이다.

강의listen하고 싶은 event를 찾는 가장 좋은 방법은, "h1 html element mdn"이런식으로 검색해보면 된다. 링크에 Web APIs라는 문장이 포함된 페이지를 찾을거다. 왜냐하면 이건 JS 관점의 HTML Heading Element란 의미이기 때문

강의event는 저번 강의때 배운 mouseenter, mouseleave 뿐만 아니라 정말 다양한 기능들이 많다. 오늘을 여러 event들에 대해 알아보자!오늘 배울건 window의 interface 또는 object이다.(1) addEventListener()를 통

강의저번에는 클릭하면 글자색이 파란색으로 바뀌는걸 만들었음. 근데 그건 한번만 실행되고 뭐 다음 event가 없었다.그래서 이번에는 파란색에서 다른색, 다른색에서 다시 파란색이 되도록 만들어보자!그러기 위해서 무언가가 true인지 확인을 해주면 된다. => 조건문 사용

강의우리는 이제껏 해왔던거와는 다르게 JS에 색상 이름을 사용하지도 않을거고 style이름도 적지 않을거다! 왜? 그런 것들은 CSS파일에 적는게 더 나으니까!clicked라는 class를 어떤 요소에 저장하면, 그게 누구든 토마토색을 가지게 된다.h1에 clicked

강의이번 강의에서는 class name을 바꾸는 다른 방법인 classList를 사용해보자!classList : class들의 목록으로 작업할 수 있게끔 허용해준다!className은 클래스 이름이 여러개일수도 있는데, 클래스들을 하나로 생각하기 때문에 모든걸 교체해버

강의우리는 이제부터 어떤걸 해야할까?우리는 유저에게 물어봐야한다. 이름이 뭐냐?그 다음 그 정보들을 어떻게 받을지에 대해 배울거다. 왜냐면 우리는 아직 그 정보들을 어떻게 받는지 모르기 때문이다. 우린 아직 어떻게 저장하는지 모른다.받은 정보를 화면에 표시할거다.아마

강의이번 강의에서는 유저이름(username)의 유효성을 검사할거다. 유저이름은 비어있으도 안되고, 너무 길어도 안된다.우리는 조건문을 통해 유저이름 즉, loginInput.value을 계속 언급할거기 때문에, 변수로 지정해준다!!이렇게 작업을 하긴 했지만 니꼬가 선

강의우리는 이제 버튼의 클릭여부 말고 form의 submit에 관심이 있다.변수 loginButton 삭제하고, loginForm 개같이 부활 ㅋㅋform을 submit할 때 입력값을 받아내온다. 하지만, 입력값이 콘솔에 출력되는 동시에 새로고침이 되기 때문에 적은게

강의이전 강의에서 form의 기본 동작은 submit이라는 것을 배웠다. 그럼 링크의 기본 동작은 뭘까?= 링크의 기본 동작은 클릭 시 다른 페이지로 이동하는거다.기본 동작을 막기 위해 JS파일로 가서 코드를 작성해보자!!(참고로 이건 설명용으로 넣어준 링크라서 cla

강의우리가 해야하는 것은 유저가 이름을 제출하면, form을 없애는 것이다.이걸 구현하려면 2가지 방법이 있다.1\. HTML 요소 자체를 없앤다.or2\. CSS를 이용해서 숨긴다. CSS에 hidden이라는 classname을 만들어 주자!어떤 요소에게든 이 cla

강의이제 value를 저장하는 방법을 배우자! 유저에게 매번 질문하기에는 번거로우니까 ㅇㅇ뭔가를 저장하는건 자주 사용되는 기능이다. 그러니 아마 API가 존재할거다. 우리가 브라우저에 공짜로 뭔가를 기억할 수 있게 해주는 기능이 존재한다. 그 API이름은 local s

강의ls가 비어 있으면 form부터 보여주면서 지금가지 해오던걸 하면 된다. 하지만 ls에 유저정보가 있으면 form을 보여주면 안된다. 그럼 우리가 먼저 할 일은, ls에 유저정보 유무를 확인하는거다.우선 ls 데이터를 다 삭제한다.콘솔에 localStorage.ge

강의인사하는 작업은 끝났고, 이제 시계를 만드는 작업을 할거다.시작 하기에 앞서!!!!!!!!!!!!!서로 다른 기능들에 대해서 하나씩 다른 파일로 분리시키고 시작할거다.세분화해서 관리하는 방식(divide and conquer)을 선호하자!그 전에 했던 방식이랑 비슷

강의setTimeout(함수, 얼마나 기다릴지(ms))일정시간이 흐른 뒤에 함수를 한번만 호출한다.새로고침 하고 5초 후, hello가 출력된다.우리의 임무는 시간을 보여주는거다. 몇시 몇분 몇초인지JS가 가지고 있는 Date object를 써보자!콘솔에 new Dat

강의지금부터 우리가 해볼 건 string을 문자 2개로 채우는거다.1 ---> 01처음 들었던 생각= 단순히 숫자앞에 0을 출력하면 되는거 아니야...?는 아니다. (12 ---> 012(X)) 2자리수는 필요없기 때문이다. 잘 생각해야 한다. 어떻게 해야 01로 출력

강의인사하는것도 만들었고, 시계도 만들었고...이제 랜덤으로 나오는 명언과 배경이 남았다!!이번 강의에서는 랜덤으로 명언이 출력되게 만들거다!이런 식으로 명언 10개를 array 형태로 만들어준다. 단순 text가 아니라, object형태로 만들어준다.어떻게 array

강의 이번 시간에는 랜덤 배경 화면을 만들어보자!

강의투두리스트를 만들기 위해 우리는 form이 필요하다. 사용자가 todo를 입력해야만 하고, list도 필요하기 때문이다. 사용자가 todo를 나열할 수 있어야 하기 때문이다. li 태그는 작성하지 않는다. 왜? JS를 통해서 추가해줄거니까!!! ( •̀ ω •́ )

강의위 코드를 오해하면 안된다. 변수 newToDo에 toDoInput.value을 저장해놓고 toDoInput.value을 비우는거기 때문이다. 1 ) 함수 paintToDo( )를 생성하여 todo를 그리는 역할을 담당할거다. 2 ) 우리는 <li> </

강의todo를 삭제하는 버튼을 추가해보자. 당연히 JS에서 만들어질거다. 여기서 중요한건 버튼이 click event를 기다리고 있어햐 한다는거다. 왜냐하면 그게 누군가 뭔가를 클릭했을때 알 수 있는 유일한 방법이기 때문이다. 기억해라!!! append는 맨 마지막에

강의자 이제 실제로 todo들을 저장해보자! 새로고침하면 모든게 사라지기 때문이다. 브라우저에 저장하려면? ls(local storage)=로컬에 저장하면 된다.입력한걸 ls에 저장하고, 새로고침하면 ls에 저장된걸 불러와서 화면에 그려주고 싶은거다. 1 ) array

강의로컬에 저장은 되지만, 화면에 출력되지 않는다. 이번 강의는 로컬에 저장된 데이터를 화면에 출력하는걸 해보자!JSON.parse : 단순한 string ---> JS objectstring을 JS가 이해할 수 있는 즉, 살아있는 array로 만들었다.처음 우리가 로

강의복습JS는 함수를 호출하면서 array에 있는 각각의 item을 준다는거다. sayHelllo( )를 6번 실행하는것이 아니다. sayHello("a")를 한 번 실행하고, 또 한번은 sayHello("b"),또 한번은 sayHello("c")... 계속 한번씩 하

강의우리가 화면상에 todo를 지워도 local storage(로컬)은 업데이트 되지 않는다. 이 부분을 수정해보자!!로컬을 데이터베이스라고 생각해보자. (데이터베이스는 아니다.) 로컬은 toDos array를 복사해두는 곳이다. toDos array가 로컬과 같지 않

강의array에서 어떻게 element를 삭제하는지 알기 위해, 10000000000% function paintToDo( ) 에서 어떤 일이 일어나는지 이해해야 한다. 만약 array에서 뭔가를 삭제할 때, 실제로 array에서 그걸 지우는게 아니다. 진짜 일어나는

강의내가 삭제버튼을 누를때마다, 다른 id를 얻는걸 이제는 안다.배열에서 지우기로컬에서 지우기둘 중에 어떤걸 지워야 하는거지...???????????우선 저장하는 로직부터 생각을 해보면, 배열에 있는걸 로컬이 불러들여서 저장한다. 입력할때 엔터를 눌러 "제출"을 하게

강의