JS (26) 썸네일형 리스트형 [인프런x코드캠프] 훈훈한 Javascript_10日 오늘은 onkeydown함수를 통해 입력할 때마다 어떤 변화가 일어나게 하게 만들었다. keycode를 통해서 Enter를 누를때마다 html ul태그 안에 li태그와 span태그를 추가할 수 있게 했다. window의 event를 통해서 keyCode를 가져올 수 있다. if(window.event.keyCode === 13 ) { createTodo(); } appendChild함수를 통해서 ul 태그 내부에 원하는 태그를 추가했다. 아주 기본적인 todo-list형태를 만들었다! 내일은 버튼을 눌렀을 때 내부 태그들을 삭제하는 기능을 구현해 볼 계획이다. 설날에 아주 푹 쉬고와서 컨디션이 좋다. 새복많~~ [인프런x코드캠프] 훈훈한 Javascript_9日 디데이 카운터를 완성시키고 두번 째 예제를 다룬다. 이번에는 to-do-list를 만든다. 사용자의 위치를 가져와 위치의 지역명, 지역의 날씨, input을 통해 할일 목록을 list up 해주는 기능을 가진 웹 이다. 본격적으로 들어가기 전에 어떻게 JS에서 HTML에 접근하는 지 알수있었다. DOM(Document Object Modal)을 통해서 HTML의 값에 접근할 수 있다. DOM은 브라우저가 HTML문서를 파싱하는 과정에서 생겨나는 객체이다. 이 객체는 트리구조를 가지고 있고, 이를 통해 HTML에 접근 가능하다. 뜻도 정확히 모르고 기능 구현만을 위해서 썼다면, 이제는 차근차근히 뜻과 함께 좀 더 깊은 이해를 통해서 예제를 받아들여야 한다. 두번 째 예제인 투두리스트도 열심히 만들어야겠다. [인프런x코드캠프] 훈훈한 Javascript_8_디데이 카운터 완성 오늘 수업을 통해서 D-Day-Counter 를 완성했다. 함수에 인자를 활용하고 localStorage를 통해 브라우저를 종료해도, 또는 컴퓨터를 꺼도 계속 실행되는 D-Day-Counter가 완성됐다. 함수 내부에서 인자를 받은 함수를 사용할 때 : 화살표 함수 사용 (익명 함수) ex) const intervalId = setInterval(counterMaker(targetDateInput), 1000); X const intervalId = setInterval(() => counterMaker(targetDateInput), 1000); O Web Storage 1. Session Storage : key-value 형태 저장 , 로컬 환경에 데이터 저장 세션 단위로 구분되며 활용 세션: 사용.. [인프런x코드캠프] 훈훈한 Javascript_7日 오늘은 D-day Counter가 어느정도 Counter의 역할을 할 수 있게 학습했다. 현재는 시간을 입력하는 남은 시간이 표시만 된다. 그리고 아래 함수들을 통해서 반복적으로 실행되게 만들어주어 Counter의 형태를 갖추게 만들어줬다. setTimeout(~, 지연시간[ms]) : 함수의 실행을 지연시켜주는 함수 setInterval(반복실행 할 함수의 이름,지연 시간) 초기화 버튼을 누르면 실행되고 있는 Counter를 초기화 시켜주는 기능도 구현했다. 1. 실행되고 있는 interval을 intervalArr이라는 배열에 intervalId를 담아준다. 2. 초기화 버튼을 누르면 intervalArr의 길이만큼 clearInterval(intervalId)함수를 실행 시켜주어 멈춰준다. for .. [인프런x코드캠프] 훈훈한 Javascript_6日 오늘은 반복문과 js파일에서 html의 값들을 변경하는 내용을 배웠다. 기본적인 for문, while문은 java와 동일해서 넘어갔다. for-in , for-of에 대해서도 학습했다. for-in : java의 향상된 for문과 비슷 => 객체에만 사용 가능 ex) for( let key in documentObj ) {} : documentObj에 있는 key 값들이 key라는 변수에 담겨진다. for-of : 배열에만 사용 가능 ex) for( let tag of documentArr) {} : documentArr에 있는 요소들이 tag라는 변수에 담겨진다. js파일에서 getElementId, textContent, innerHTML을 통해서 html의 값들을 조작할 수 있다. getElelme.. [인프런x코드캠프] 훈훈한 Javascript_5日 오늘은 조건문, 논리연산자 그리고 스크립트 태그의 위치에 대해서 학습했다. if문 (조건문)을 활용하는 방법은 Java와 크게 다르지 않았다. 아니 똑같았다. 다만 조건문에 '==='이 사용되는 정도만 달랐다. 지금 예제로 만들고 있는 D-day Counter 입력값에 유효하지 않은 날짜가 들어왔을 때는 NaN이 출력됐다. 그래서 조건문에 isNaN() 함수를 통해서 유효한 입력값인지 아닌지 검사했다. isNaN() : NaN인지 확인하는 함수 스크립트 태그의 위치 형태로 사용하면 된다. 지금까지 head 태그 안에 script 태그를 사용했다. 문제점 기본적으로 script 태그를 만나면 html탐색을 중단하고 js 파일을 해석한다. 그러나, html 태그가 만들어지지 않은 상태에서 js 파일에 doc.. [인프런x코드캠프] 훈훈한 Javascript_4日 오늘은 비교연산자에 대해서 학습했다. java와 꽤 많이 달라서 흥미로웠다. js의 비교연산자는 '==' 과 '==='이 있다. '==' 은 느슨한 비교, '==='은 엄격한 비교다. '=='은 우리가 예측하기 어렵다. ex) 1 == "1" => true 0 == "0" => true 0 == [] => true "0" == [] => false '==='은 완벽하게 같아야 true를 반환한다. 겉으로 보기에는 같지만 false를 반환하는 예시가 있다. ex) const arr = [1, 2, 3] arr === [1, 2, 3] => false arr === [1, 2, 3] => false가 나오는 이유를 알기 위해서는 원시 타입(Primitive type)과, 참조 타입(Reference type.. [인프런x코드캠프] 훈훈한 Javascript_3日 함수의 선언과 호출에 대해서 학습했다. onclick: 버튼을 누르면 동작 (ex: 함수 호출) document : 작성한 html 문서 (객체의 일종: 추후에 다룸) querySelector: html tag의 id, class를 통해서 값을 가져올 수 있음 (ex: document.querySelector('#target-year-input').value) Math.floor(소수점 내림) 함수: 표현식, 선언문 ,화살표함수 표현식 : 호이스팅으로 인해 예측하기 어려움 선언문 : 흐름대로 따라가면 됨 화살표함수 : 일반적으로 Method 안에서 많이 사용됨 앞으로 학습과정기록을 gitHub에 남기기위해 새로 Repository를 생성했다. GitHub - jootang2/JavaScript_Basic.. 이전 1 2 3 4 다음
