코더
바닐라 JS 크롬 앱 만들기 본문
맥북 사용시
zsh: no such file or directory 이러한 에러가 발생해
chmod +x /Users/qlgh2gh/Desktop 로 권한을 넣어주니 해결이되었다
/desktop mkdir momentum 명령어로 파일생성 후 visual studio code를 이용해 만들었다
기본적인 문법
배열
array = [mon,tue,wed];
ex). console.log(A + B)' == const c = [A, B]; console.log(c)와 같다.
player.name 은 player[name]으로 사용이 가능하다
const age = parseInt(prompt("how old are you?"); ==> age가 number인지 아닌지 확인해준다
if(isNaN(age)) {
console.log("숫자사용하세요");
}
else{
console.log("맞아요");
}
함수
const player = {
name: "kim"
sayHello function(other) {
console.log("hello" + other);
}
console.log(player.name);
player.sayHello("jun");
addEventListener
const title = document.querySelector("div.hello:first-child h1);
function handle() {
console.log("title was clicked");
}
titile.addEventListener("click", handle);
.hello:first-child h1
이 부분의 first-child는 css의 선택자로서 첫번째
.css
css에서
위와 같은 코드를 js의 코드에서 사용하지 않기 위해서 css에서
h1{
color: blue;
}
.active{
color : tomato;
}
를 사용하고(이때 .active는 css에서 html에서의 active클래스를 가르킨다.) 이것을 자바스크립트에서 사용하자 한다면
const title = document.querySelector("div.hello:first-child h1);
function handle() {
h1.className = "active";
}
h1.addEventListener("click",handleTitleClick)
class와 classList
.clicked{
color: tomato;
}
로 .active를 .clicked로 바꾸어준다.
classList를 만든이유는 기존 html 코드에서 h1이라는 변수명을 불러올때 h1에 다른 class이름을 추가해서 사용하게 되면 기존의 class이코드상에서 사라지기 때문이다.
h1.classList.toggle("clicked");는 h1의 classList에서 cliked class가 있는지 확인해서 있으면 toggle이 class를 제거해주고 없다면 toggle이 class를 추가해준다.
document
const l_f = document.getElementById("login-form");
const loginInput = l_f.querySelector("input");
const loginButton = l_f.querySelector("button);
(위의 코드가 아래와 같이 바뀌는데 value는 input안에 들어있는 특성이기 때문에 화면상에 타이핑을 해주면 그 정보가 그대로 들어가다.)
const loginInput = document.querySelector("#login-form input");
const loginbutton = document.querySelector("#login-form button");
function onClick() {
console.log(loginInput.value);
}
loginbutton.addEventListener("click" , onClick)
Form
html에서 <form> 요소를 사용해 서버를 전송하는 경우,기본 동작은 페이지를 새로고침 한다.
(위와 같은 일을 막아주기 위해서는 preventDefault(); 라는 메서드를 사용해준다.
submit은 엔터를 누르거나 버튼을 클릭할때 발생을 한다.(form을 submit한다.)
argument는 함수에 전달된 모든 인수(매개변수)를 나타내는 객체이다.
처음 입력된 값이 submit되는 것을 막아준 후 입력된값이 화면에 나타나지 않게 한다 그 후 입력된 값이 login-form input에 들어갈 수 있도록 loginInput.value;라는 요소를 사용해준 후 innerText로 불러온다. 이 때 화면에 나타내야 함으로 .hidden의 값을 remove해준다.
localStorage
setItem = localStorage에 정보를 저장한다 [ex)localStorage.setItem("username",username)] <==(ket,value)
getItem = 정보를 불러온다.
removeItem = 정보를 삭제한다.
처음 loginForm은 display된 상태이다(html파일에서 <form class="hidden" id="login-form">를 시켜준상태)
savedUsername에 값이 없을때 display된 상태를 다시 없애준다 ==>(what is your name이 나오게 될것)
새로고침되는것을 맊고 다시 display를 시켜준다
localstorage를 생성해 (key,value)값을 넣어준다
그 후 paintGreetings값이 생성이 되었기 때문에 ‘Hello ${username)’값이 나오게 되고 이 부분을 다시 display된 상태를 없애준다.
clock만들기
app.js => greetings.js로 바꾸어 주었으며 js,css파일로 나누었다 그로인해 href = "css/style.css"로 변경을 하고
<script src = "js/greetings.js"></script>
<script src = "js/clock.js"><script> 코드를 추가함
setTimeout
function aaa() {
console.log("asd");
}
setTimeout(aaa,5000); ====> ( setTimeout(function,ms);이다.)
setInterval
let intervalID = setInterval(function() {
console.log('1초마다 반복해서 실행됩니다.');
}, 1000); // 5초 후에 interval 중지
setTimeout(function() {
clearInterval(intervalID);
}, 5000); =====>(setInterval을 종료하려면 clearInterval값이 필요하다.)
setInterval(getClock, 1000);은 1초후에 값이 나타나기 때문에 getClock();을 사용해 바로 화면에 띄어준다.
quotes
Math.random * quotes의 길이를 곱해주고 나머지는 버린다. ==>
이 부분을 todaysQuote안에 넣어 quotes[0~9];까지의 배열을 만들어준다 ==>
todaysQuote.quote는 지금 이 .js파일에서 quotes의 배열중 객체인 quote를 선택한다.==>
여기서 의문
어떻게 todayQuote.quote에서 quote가 이미 html에서 id를 가져오기 위해 정의되었음에도 불구하고 어떻게 또 사용이 가능한가?
그 이유는 배열에서 객체로 quote가 사용되었기 때문에 배열은 지역변수로 보지않지만 배열에서의 객체는 지역변수로 보기 때문에 quote라는 지역변수를 사용해 아무 문제가 없다.
background
image를 똑같이 만들어주고 bgImage라는 변수명에 img라는 html태그를 생성해준뒤 src로 Img폴더 뒤에 추가해준 뒤 이미지를 넣어준다 그 후 append해준다
TO DO LIST
todolist를 만들기위해 index.html에
이 태그를 추가시켰다
이때 placeholder="Write a To Do and Press Enter"이건 기본적인 안내문구이며 사라지는 순간 텍스트를 입력할 수 있다.
required이 부분은 반드시 필드를 채우게끔 한다.(안할시 경고 후 제출을 막는다)
click의 parentNode가 li태그인것을 확인하고 li태그를 button을 클릭했을 때 발생하는 event를 target(클릭된 html의 요소이다)으로 삼아 제거해준다.
위의 코드를 추가해준다.
중요
local storage에 array로 저장이 안되기 때문에
JSON.stringify로 array처럼 생긴 string으로 저장한 후
다시 JSON.parse 이용해 array로 꺼내 사용을 한다.
함수 예제
parsedToDos.foreach(sayHello);
function sayHello(item){
console.log("this is the turn of",item));
}은
parsedToDos.foreach((item)=>console.log("this is the turn of",item));과 같다.
foreach문 예제
const array = [1, 2, 3, 4, 5]; array.forEach(function(element) { console.log(element); });
JSON.parse는 string을 array로 만들어 준다.
JSON.stringfy는 javascript object나 array 또는 어떤 javascript코드이든간에 string으로 만들어준다.
newtodoobj
newtodoObj를 만들어 주었다. (id값을 할당하기 위해서 ===> id값을 할당 즉 객체를 만들어 값이 object가 되었기 때문에 newtodo.text로 만들어 object를 text로 만들어 주었다.)
filter()
-function myfilter() {
-}
-[1,2,3,4].filter(myFilter)
-filter는 myFilter에 1,23,4를 넣어서 부른다.
-myFilter는 반드시 true를 리턴해야한다
-myFilter(4) ----> ( javascript가 myfilter를 4번 부른다.)
-function myFilter(item){return item != 3}
-const arr = ["pizza","tomato","carrot"];
-function myFilter(item){return != "todos"};
-arr.filter(myFilter);
-function todos = [{text:"lala"},{text:"lulu"}];
-function myFilter(todo){return todo.text != "lala"};
-todos.filter(myFilter);
