JavaScript 23

[JavaScript] 백틱(``)으로 값을 작성하는 것에 대하여

백틱(``)을 배웠다..! 근데 쓰임새가 조금 어려운듯 하다. 편하라고 쓰는데 말이다. 오히려 그냥 문자열끼리, 변수끼리 단일 따옴표로 감싸고 +로 이어주기만 하면 되는 방식이 단순하게 생각해도 되서 더 편한 것 같기도 하다. 하지만 백틱을 쓰는 것이 번거러워도 꽤 코드를 단순화시킬 수 있을 때가 있는데 그것은 바로 삼항연산자를 쓸 때이다. 삼항 연산자는 어떠한 조건의 값이 true냐 false냐에 따라 원하는 값을 달리 작성하고자 할 때 요긴하게 쓰인다. 우선 백틱은 문자열과 변수를 함께 사용하고 싶을 때 변수이름은 ${}안에 넣어주고 그렇게 감싸준 변수명과 문자열을 다시 한 번 감싸줄 때 사용된다. 그리고 값을 작은 따옴표에 써줘야 할 때 백틱을 사용해서 써주고 싶다면 어떻게 해야 하나? 그것은 이렇..

JavaScript 2021.06.04

[JavaScript] 새로운 요소를 생성하고 텍스트 삽입하기

pick on.. 픽온.. 급 피곤하다. 사용자가 읽을 정보는 가급적 html안에 작성하는 것이 좋다고 생각하긴 하지만 자바스크립트를 연습할겸 새로운 요소를 만드는 법을 연습하였다. innerHTML로 생성하는 방법이 있고 createElement로 만드는 방법 두 가지 이상의 방법이 있다. (성능 비교해보면 innerHTML이 더 좋은 것 같다. 그러나 뭔가 표준은 createElement인듯..) createElement로 요소를 생성하는 방법이 좀 더 복잡하니까 먼저 알아보도록 하자. 일단 어디에 새로운 요소를 만들 것인지를 생각해야 한다. ┌ 이미 생성되어있는 요소 안에 넣을 것이라면 선택자로 불러와야하고 └ 아무것도 없는 body에 만들 것이라면 document를 불러와준다. 그 뒤에 .crea..

JavaScript 2021.06.03

[JavaScript] 예외 발생시키기 - try / throw / catch / finally

1. try / catch / finally var value; try{ value = ball; //1. ball이란 변수가 선언되어 있지 않으므로 에러가 발생됨. } catch(error) //2. catch문을 실행한다. error라고 꼭 고정해서 쓰지 않아도 된다. console.log("catch 실행"); }; //catch 실행 var sports; try{ sports = ball; } catch(error) { log("catch 실행"); } finally { log("finally 실행"); // try또는 catch문을 실행한 후 finally블록을 실행시킴. }; - try문에서 예외 발생을 인식 (주로 에러 상황인듯) : try문에 작성한 코드에 에러가 발생해도 프로그램은 죽지 ..

JavaScript 2021.03.24

[JavaScript] 반복문 (loop or iterate)

목록에서 2, 3을 반복해서 쓰고 싶다. 이럴 경우 단순히 복사해서 붙여넣기를 할 수도 있지만 그 반복의 횟수가 100000단위를 넘어서도 복붙을 할것인가? 반복문을 써서 더 쉽게 쓰는 법을 알아보자! 1. while //주로 변수를 정의하는 자리 while(조건문 - 주로 변수의 범위이다){ 반복해서 실행할 코드 - 변수가 늘어나는 규칙을 포함한다 } Loop while뒤에 오는 괄호안의 조건에 대해 boolean값이 오게 되고 그 값이 true면 코드를 반복실행하다가 false가 되면 반복을 멈춘다. while반복문은 사용하기 쉽지만, 변수와 관련된 자리에 다른 여러 가지 코드들이 개입될 수 있다는 단점도 있다. ​ ①. 태그에서 JavaScript를 작동시키기 위해 태그의 document.write..

JavaScript 2021.03.24

[JavaScript] 조건문 (Conditional statements)

1. IF //1. true if(true일 경우){여기에 있는 코드가 실행 } else{else뒤에 오는 코드는 실행되지 않는다 } //1. false if(false일 경우){false 바로 뒤에 오는 코드는 실행되지 않는다 } else{여기에 있는 코드가 실행 } 조건문 if 다음에 오는 괄호 안에는 분리연 값이 오고 그 값이 true냐 false냐에 따라 {}안의 코드가 실행되거나 무시된다. 따라서 자신이 원하는 조건에 따라 if뒤 소괄호에 오는 값(value)이 true나 false가 될 수 있게끔 조건문을 써야 한다. var a = 10; var b = 20; var c = 30; if(a>b){ document.write('a가 b보다 크다'); } else if(b>c){ document...

JavaScript 2021.03.24

[JavaScript] 연산자 (operator)

연산자는 규칙에 따라 계산하여 값을 구해주는 것이다. 연산자를 통해 표현식을 작성하면 자바스크립트 엔진이 그 JS코드를 기계어로 바꾸어(Compile) 해석하고 실행한다. 이를 표현식을 평가한다고 하며 그 반환값을 평과 결과라고 한다. 1. 대입 연산자 (할당 연산자) 오른쪽 항에 있는 숫자를 왼쪽에 있는 변수에 대입한다. ​ 1=2; 라고 하면 에러가 뜬다. 1에 2를 대입할 수 없어서 그런것이다. 변하지 않는 수인 1은 상수이다. ​ 2. 산술 연산자 종류 설명 예시 +, - *, / (기본 산술 연산자) 더하기, 빼기, 곱하기, 나누기 1+1 결과값 = 2 + 더하기로 연결된 문자를 이어서 붙여준다. var name1 = "java" var name2 = "script" name1+name2 결과값..

JavaScript 2021.03.23

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - to do list만들기 / 20.06.08

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK //1. 변수 작성 : 스크립트 파일이 따로 있어도 같은 변수를 정의하지 말자.. const toDoForm = document.querySelector(".js-toDoForm"), //form태그 뭐하는지 좀 봐라.. : 새로운 li추가해야 해서 정의한것. toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); //2. Function 실행 function init() { loadToDos(); toDoForm.addE..

JavaScript 2020.06.08

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - local storage에 값 저장하기 / 20.06.06

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #3.3-3.4 Saving the User Name part 1-2 1). 기본개념 - local storage : 작은 정보를 개발자 유저 컴퓨터에 저장하는 방법이다. - localStorage.setItem("key", value); local storage에 데이터 입력하기 - localStorage.getItem("key", value); local storage에서 데이터 가져오기 - form을 제출하는 event가 발생하면 document까지 가서 다른 곳으로 그 데이터가 이동한다. 그리고 페이지는 새로고침이 된다. : 이것..

JavaScript 2020.06.06

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - 시계만들기 / 20.06.05

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #3.1 Making a Js Clock part One - html, css, javascript에서 동일한 클래스명을 써주고 싶기 때문에 clock에 대한 div태그의 class명을 js-clock이라고 지정한다. - javascrpt에서 clockContainer와 clockTitle변수를 만들고 init라는 이름의 함수를 지정한다. const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); fun..

JavaScript 2020.06.05

[JavaScript] DOM - 제어 대상 찾기

출처 - 생활코딩 https://opentutorials.org/course/1375/6656 문서를 자바스크립트로 제어하기 위해 제일 먼저 할 일은 제어 대상을 찾는 것이다. 문서 내의 객체를 찾기 위해 document객체의 method를 이용한다. document.getElementsByTagName() ()안에 들어가 있는 태그명에 해당되는 요소가 담긴 배열과 유사한 리스트(NodeList)를 불러온다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 요소를 조회할 수 있다. document.getElementsByClassName() ()안에 들어가 있는 클래스명에 해당되는 요소가 담긴 배열과 유사한 리스트(NodeList)를 불러온다. document.getElement..

JavaScript 2020.06.05