본문 바로가기

TIL

[TIL-47] 노마드코더 크롬앱(JS) 클론코딩 #6.1~#7.2 #6 명언과 배경 배경 준비 js 파일 만들어서 html에 연결. 이미지 파일들 따로 폴더 만들어서 넣어둠. js images 배열 만들어서 안에 이미지 파일의 이름들 넣음. 배열에서 가져올 이미지 이름을 랜덤 인덱스로 뽑음. 이전까지는 html에 만들어놓은 요소를 js에서 찾았음. 근데 이번엔 js에서 만들고 나서 html에 추가해야 함. document.createElement("img") : img 태그를 만들 수 있음. elements 탭에서 찾을 수 없는데(페이지에 존재하지 않음) 만들었으니 일단 존재함. 변수로 정의하면 img 태그를 객체로, 그 안의 src도 찾을 수 있음. string으로서 태그 만들어놓고 html 에 추가. document.body.appendChild(추가할 태그) bo.. 더보기
[TIL-46] 노마드코더 크롬앱(JS) 클론코딩 #5.0~#6.0 #5 시계 Intervals 파일 세팅 css는 css폴더에, js는 js 폴더에 js 파일은 greeting, clock 등으로 기능별로 쪼개서 만듦. 각각 html 파일에 잘 연결시키기 html clock 아이디 가진 h2 태그 만듦. "00시 00분"을 디폴트값으로 둠. js h2 태그 불러와 텍스트 집어넣기. interval : 매번 일어나야 하는 무언가. 예) 매 2초 setInterval(실행할 함수, 함수가 호출될 간격 ms); Timeouts and Dates timeout : interval과 달리 일정 시간이 지난 후 한번만 실행. setTimeout(sayhello, 5000ms); date new Date() : 오늘 날짜 가져옴. Date.prototype.필요한함수() getFu.. 더보기
[TIL-45] 노마드코더 크롬앱(JS) 클론코딩 #4.4~#4.7 #4 로그인 getting username username 입력받고 나면 form 없애기 html 요소 자체를 없앰. css를 통해 없앰. .hidden {display: none;} form에 submit event 발생 시 작동하는 함수에 hidden 클래스 추가하는 코드 작성. 표시할 텍스트(username)가 있으면 h1이 표시되게 하기 h1은 hidden 클래스 있어서 숨겨진 상태. h1에 greeting 아이디 추가해서 JS에서 찾음. 변수로 정의해둠. const greeting = document.querySelector("#greeting"); h1 안에 텍스트 입력. greeting.innerText = "Hello " + username; hidden 클래스는 여러 번 사용되었으므로 변.. 더보기
[TIL-44] 노마드코더 크롬앱(JS) 클론코딩 #4.0~#4.3 #4 로그인 input values input과 button 생성 일단 html에 작성하고 js에서 가져와야함. 이 앱에는 인풋과 버튼 많음. 구분을 위해 div로 묶어서 클래스나 id 추가해줌. 요소 가져오기. loginForm(div)를 정의하고 나면, 이 변수를 이용해서 그 안의 input과 button도 검색할 수 있음. loginForm은 HTML element이기 때문. 혹은 loginForm 변수 없이 input과 button 각각을 쿼리셀렉터로 검색해서 정의. button 클릭 이벤트 발생 시, input의 값 출력 console.dir(loginInput)으로 확인해보면 값 property의 이름은 value. 따라서 function {} 안에 console.log(loginInput.v.. 더보기
[TIL-43] 노마드코더 크롬앱(JS) 클론코딩 #3.6~#3.8 #3 JS로 브라우저에 HTML과 상호작용하기 클릭하면 파란색, 한 번 더 하면 빨간색, 또 하면 파란색으로 반복되게 하기 어떤 조건이 true인지 확인해줘야 함. 즉, if 조건문 필요! function handleTitleClick() { if (title.style.color !== "teal") { title.style.color = "teal"; } else { title.style.color = "tomato"; } } title.style.color를 변수 이용해서 코드 개선 function handleTitleClick() { const currentColor = title.style.color; let newColor; if (currentColor !== "teal") { newColo.. 더보기
[TIL-42] 노마드코더 크롬앱(JS) 클론코딩 #3.3~#3.5 #3 JS로 브라우저에 HTML과 상호작용하기 이벤트 event : console.dir 통해 요소 객체의 안을 살펴보면 on으로 시작하는 것들 있음. 클릭할 때, 마우스 올릴 때, 입력 끝낼 때, 이름 적을 때, 엔터 누를 때, 와이파이 해제될 때 등. object.addEventListener("event") : 이런 모든 이벤트들을 자바스트립트가 감지할 수 있음. click 이벤트 클릭했을 때 동작할 요소를 선택함. const title = document.querySelector("div.hello:first-chile h1"); 실행할 동작을 함수로 정의해줌. function handleTitleClick() { console.log("title was clicked"); } 이 함수를 이벤트 .. 더보기
[TIL-41] 노마드코더 크롬앱(JS) 클론코딩 #3.0~#3.2 #3 JS로 브라우저에 HTML과 상호작용하기 자바스크립트를 통해 HTML의 요소들을 변경하고 읽을 수 있음. document 객체 콘솔에 "document" 입력하면 html 코드 볼 수 있음. 브라우저에 이미 존재하는 object 중 하나. console.dir(document) : document로 가져올 수 있는 내용 다 보여줌. 그런데 html 코드를 그대로 보여주기만 하는 게 아니라 객체의 형태로 가져옴. document.title 등, html의 내용 확인할 수 있음. html 코드를 javascript 관점에서 보는 것. 그렇다면 html 내용을 호출하는 것과 반대로, html 내용을 변경할 수도 있음. 자바스크립트는 html에 이미 연결되어있음. html에서 특정한 뭔가를 가져오기 : d.. 더보기
[TIL-40] 노마드코더 크롬앱(JS) 클론코딩 #2.11~#2.16 #2 JS 기초 이론 Return console.log 없이 function의 코드 안에서 결과값 얻고 싶음. console창 말고 화면에서 출력하거나 데이터를 받아서 이용할 수 있게. console이나 alert 사용하면 브라우저에 띄워지는 사건이 일어나고 그게 끝임. 즉, function의 계산 결과를 받고 싶음! 보통은 어떤 값을 얻기 위해 function 사용. { } 안 코드 앞에 return을 씀. const age = 96; function calculateKrAge(ageOfForeigner) { return ageOfForeigner + 2; } const krAge = calculateKrAge(age); function을 실행하면 그 결과로 calculateKrAge(age)를 대체함.. 더보기

티스토리툴바