clear_uncertainty

2021-07-26 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Intervals] 먼저, 지난 시간까지 만들었던 자바스크립트 파일을 greetings.js로 바꿔주고 clock.js 파일을 새로 생성해줍시다. 위와 같이 js라는 폴더에 clock.js와 greetings.js 를 저장한 후, html에 js를 import 해줍시다. 자바스크립트로 주기적인 작업을 실행하기 위해서 setInterval과 setTimeout 메소드를 사용할 수 있습니다. setInterval 함수 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다. clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업..

2021-07-26 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Local Storage] 저번 게시글에서는 유저가 username을 입력하면, loginForm을 hidden class를 이용해 숨기고, Hello, username이 나오는 것을 구현했습니다. Saving Username 유저가 매번 username을 입력하는 것은 번거로우니 username을 저장하는 것을 해봅시다. local stage를 이용해 저장할 수 있습니다. local stage는 작업자도구에서 Application > Storage 에서 확인할 수 있습니다. Storage에는 Session Storage, IndexedDB, Web SQL 등이 있지만 Local..

2021-07-25 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Login - (2) ] 저번 포스팅에서는 submit의 기본동작인 새로고침을 preventDefault를 통해 제어하는 방법을 배웠습니다. 이번 시간에는 링크의 기본동작인 페이지 이동을 막아보도록 하겠습니다. Go to naver 먼저 HTML에서 Go to naver 을 통해 링크를 생성해 줍시다. const link = document.querySelector("a"); function handleLinkClick() { alert("clicked!") } link.addEventListener("click", handleLinkClick); 위와 같이 JS를 작성하면 al..

2021-07-25 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Login ] 이제, 실제로 어플리케이션을 만들며 자바스크립트를 배워봅시다. 먼저, 자바스크립트로 로그인 기능을 구현해봅시다. Input Values 자바스크립트가 작업을 하기 전에, 시작은 HTML이여야 합니다. HTML을 작성한 이유 HTML의 element를 JS로 끌고오는 것입니다. 먼저 HTML을 작성해봅시다. Login 그리고 앞에서 배웠던 내용으로 Input과 Button을 JS에 가져와줍시다. const loginForm = document.getElementById("login-form") const loginInput = document.querySelector..

2021-07-25 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Javascript On The Browse - ( 3 )] CSS in Javascript 이번 포스팅에서는 CSS와 Javascript를 함께 사용할 때 효율성이 좋아지는 방법에 대해 공부해봅시다. 먼저, 우리가 익숙한 자바스크립트를 통해 Click me! 라는 문구를 클릭할 때, 글자의 색깔이 바뀌는 코드를 짜봅시다. click me! 세가지 스텝을 밟으면 됩니다. STEP 1 : element를 찾기 - const triger = document.querySelector ("div.hello h1") STEP 2 : event를 listen STEP 3 : event 에 ..

2021-07-24 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Javascript On The Browse - ( 2 )] Javascript는 브라우저에서 매우 강력합니다. 브라우저 안의 스타일도 쉽게 바꿀 수 있습니다. const title = document.querySelector("div.title h1"); title.style.color = "blue"; ↑ 자바스크립트를 이용해 HTML의 글자 색깔을 수정 Events 모든 Events를 자바스크립트는 감지 (Listen) 할 수 있습니다. const title = document.querySelector("div.title h1"); function handleTitleCli..

2021-07-24 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Javascript On The Browse - (1)] 자바스크립트는 HTML에 접근하고 읽을 수 있게 설정되어 있습니다. 또한 자바스크립트를 통해 HTML을 변경할 수도 있습니다. HTML in Javscript 그 모든 출발점은 document 입니다. 예를 들어 자바스크립트에서 HTML의 title을 읽고 불러와 봅시다. document.title; //javascript // title: javascript를 불러옵니다. document.title = "Hi"; // Hi // title을 Hi로 바꿉니다. 자바스크립트는 HTML 자체를 보는 것이 아닌, HTML의 Ob..

2021-07-23 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Conditionals] 조건문은 true인지 false인지 알려주기때문에 중요합니다. 우리는 주로 뭔가를 확인하기위해 사용합니다. 키워드는 "if"와 "else"입니다. "else if"는 else와 if를 합친 개념입니다. 조건을 하나 추가할 수 있는 키워드죠. 조건문의 기본형태는 아래와 같습니다. if (condition) { statement1 } else { statement2 } condition이 true이면 statement1을 실행하고 condition이 false면 statement2를 실행합니다. 유저에게 나이를 물어보는 코드를 짜봅시다. prompt를 통해 ..

2021-07-20 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Function] 함수를 사용하는 이유는 '코드블럭'을 '반복적'으로 실행할 수 있기때문이다. 따라서 효율적이다. 함수를 사용하기위해선 함수를 호출하고자 하는 범위 내에서 함수를 정의해야한다. 함수는 두가지를 이해해야한다. 1. 함수 선언 2. 함수 호출 1. 함수 선언 선언을 할 때는 어떤 값을 불러올 것인지 인자(argument)들을 정하고 코드블럭을 작성하게된다. 단, 선언만 하면 수행되지 않는다. 정의한 선언한 함수를 수행하기 위해선 함수를 호출해야한다. ( ) 의 의미는 함수를 실행한다는 의미로 생각하면 된다. ( ) 가 없이는 함수가 실행하지 않는다. function ..

2021-07-19 자바스크립트 학습일지입니다. 해당 내용은 노마드코더님의 강의를 들으며 추가적인 학습을 정리한 내용입니다. [Array] 자바스크립트 배열 선언 방법 let fruits = ['사과', '바나나'] console.log(fruits.length) // 2 인덱스로 배열의 항목 접근하기 let first = fruits[0] // 사과 let last = fruits[fruits.length - 1] // 바나나 배열의 항목들을 순환하며 처리하기 fruits.forEach(function (item, index, array) { console.log(item, index) }) // 사과 0 // 바나나 1 배열 끝에 항목 추가하기 - push let newLength = fruits.p..