js로 크롬 앱 만들어보기

거의 모든 브라우저에서 js를 사용 할 수 있다. 브라우저에 기본적으로 내장되어있기 때문이다. 안드로이드, 윈도우, 맥, 리눅스 다 포함. 프론트엔드는 js 한가지만 알면 된다. 백엔드는 루비, 파이썬, 고, 자바 등 선택 할 수 있다. Framework. 프

변수만들때 let, const, var차이let 재선언 금지, 재할당 가능const 재선언 금지, 재할당 금지var 재선언 가능, 재할당 가능let a = b;let a = c;//재선언 금지let a = b;a = c;//재할당은 가능const a = b;const

상수로 선언된 변수에 값을 할당하는 것=> 변수에 그 값을 갖는 메모리 주소를 할당한다.=> 주소를 할당할 때에 그 주소가 갖는 값이 배열이 아닌 값이라면 (문자열이든, 정수든, 소수든) '그 값' 을 갖는 변수 자체는 상수로 고정됨. == 그 값을 참조해오는 메모리

object는 property를 가진 데이터를 저장해주며, { } 를 사용한다.const player = {name : tomato,color : red,food : true,};console.log(player);property를 불러오는 방법은 2가지가 있다.con

player.points(); 라고 사용하지 않았다. player.points은 function이 아니기 때문. player.points은 숫자다.player에게 function을 주기 전에, 어떻게 function을 만드는지를 배워야 한다.function은 내가 계속

펑션의 괄호 안의 매개변수에서 아규먼트(인자)를 받아들일 수 있다.ex)function sayHello(nameOfPerson) {console.log(nameOfPerson);}sayHello("nico")sayHello("dal")sayHello("lynn") //

let과 const의 차이는 let은 업데이트를 할 수 있다는 것이다. let을 업데이트 할 땐 다시 let을 붙이지 않아도 된다ex) 기존 변수의 값을 업뎃하고 싶은 경우let a = 5; // 기존의 값이 5인 상태a = 10; // let을 생략하고 10으로 업데

function안에서 return과 추가작업을 입력하면return만 작업하고 추가 수행은 이뤄지지 않는다.만약 return 앞에 기타작업이 있다면 이 작업은 수행된다.즉, return"까지만" 수행된다!

prompt();라는 함수는 사용자에게 창을 띄어 값을 받는다.prompt();를 사용하면 답을 할때까지 코드의 실행을 멈추고, 매우 오래된 방법임. 별로 안예쁘다. css로 바꾸지도 못한다.const age = prompt("how old are you?");cons

isNaN 은 무언가가 NaN인지 판별하는 방법const age= parseInt(prompt (“How old are you?”));console.log(isNaN(age));숫자입력하면 false글자입력하면 tureif(condition){실행코드=true ---실

&& 는 '이며'|| 는 '이거나' 를 대입해보면 쉽다.예시>'트럼프는 남자 이며(&&), 성인 입니다' (둘 다 사실이어야 함)'트럼프는 여자 이며(&&), 성인 입니다' 틀림'트럼프는 남자 이며(&&), 아동 입니다; 틀림'트럼프는 남자 이거나(||) 성인 입니다.

==는 동등연산자, 값만 같으면 true이다.===는 일치연산저, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다..ex)alert(1 == '1') //truealert(1 === '1') //falseale

HTML : CSS와 JS를 가져오는 풀과 같은 도구, Js는 HTML과 상호작용을 위해 사용한다.JS는 애초에 HTML에 접근, 읽기가 가능하도록 구성(configured)되어 있다.즉, JS는 그냥 HTML을 자동으로 읽는다. 추가적으로 뭔가 설치할 필요도 없다.이

JavaScript를 사용하여 스타일을 수정하는 것이 CSS를 사용하는 것보다 불편하다는 것은 맞다. 그러나 JavaScript를 사용하여 스타일을 수정하는 것에는 몇 가지 장점이 있다.1.동적인 스타일링CSS는 정적인 스타일링을 제공한다. 즉, CSS는 웹 페이지가

getElementById()getElementsByClassName()getElementsByTagName()이렇게 자바스크립트를 통해 HTML을 가져올 수 있는 것이 여러가지가 있다.하지만 querySelector를 가장 많이 쓸 것이다.getElementById(

지금 js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 것이다.document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해준다.element의 내부를 보고 싶으면 cons

title.onclick = handleMouseEnter;title.addEventListener(“mouseenter” , handleMouseEnter);위에 두 코드는 동일하나 addEventListener를 선호하는 이유는removeEventListener을

currentColor는 getter로써, 최근 color값을 복사하는 역할을 한다. 그렇기에 의미론적으로 봤을 때 const로 선언하는 것이 적절하다.newColor는 setter로써, 변수에 대입된 색상값을 h1.style.color에 최종적으로 할당하는 역할을 한

위의 코드와 아래의 코드는 같은 기능을 수행한다.\`toggle( String , force )\`하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.두번째 인

1번과 2번은 같은 코드이다. 3번은 5번과 같은 코드이고 4번은 6번과 같은 코드이다.

function onLoginSubmit(event){event.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기 // event object는 preventDefault함수를 기본적으로 갖고 있다.console.log(event);}l

addEventListener 안에 있는 함수는 직접 실행하지 않는다.사람이 addEventListener에 있는 이벤트를 발생시키면 브라우저가 함수를 실행시켜주고, 브라우저에서 해당 이벤트에 대한 정보 즉, object를 가지게 된다.addEventListener의

const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.que

개발자 도구를 열고 콘솔창에 localStorage를 입력하면 이미 정의되어 있는것을 알 수 있다. 이것은 Storage 라는것을 반환하고 있다. localStorage는 우리가 브라우저에 저장할 수 있게 해준다.콘솔창에 localStorage.setItem("key"

기본적으로 로컬스토리지에 저장된 값이 있을때의 form은 보이지 않고, 저장된 값이 없을때의 h1은 보이지 않는다.paintGreeting() 함수는 여기서 두 번 호출되는데 15번째 줄과 29번째 줄에서 호출될 때 각각 인자를 받는곳이 다르다. 15번째 줄에서 호출

setInterval(sayHello, 1000);sayHello() 라는 펑션을 1초마다 반복한다는 의미.단 바로 실행되지 않고 1초 후 첫 시작이 되고 계속 1초마다 반복된다.setTimeout(sayHello, 1000);1초 기다렸다가 한번만 실행.

padStart() 메서드는현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다.padEnd() 메서드는 현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을

Math.floor는 소수점을 버리는 것(버림), Math.ceil은 소수점을 올리는 것(올림), Math.round는 소수점을 반올림 하는 것이다.

img {position:absolute;width:100%; (화면 좌우)height:100%; (화면 상하)left: 0px;top: 0px;right:0px;bottom:0px;z-index: -1; ( z-index는 text의 z-index 보다 낮으면 뒷 배

Math 객체 기능Math.random() 0부터 1미만 무작위의 값을 반환해준다.Math.floor() 내림 : 소수점 버리기Math.ceil() 올림Math.round() 반올림const bgImage = document.createElement("img");JS에

1) Todo-list 를 만들기를 원하니 html 에 form 태그로 구조를 만들어 준다. 나중에 JavaScript에서 만지기 쉽게 id는 todo-form으로 설정2) form 자체는 submit이라는 기본 기능을 내장하는 하나의 묶음 밖에 되지 않는다. 우리는