JavaScript 23

[JavaScript] BOM (Browser Object Model)

출처 : 생활코딩 -https://opentutorials.org/course/1375/6633 -opentutorials.org/course/743/6577 1. BOM (Broswer Object Model) 웹브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공한다. BOM은 전역객체인 Window의 property와 method를 통해 제어할 수 있다. = Window 객체의 property와 method를 알아야 함. 1). Global Object (전역객체) function func(){ alert('Hello?'); } func(); //경고창에 Hello?라고 뜬다. window.func(); //마찬가지로 경고창에 Hello?라고 뜬다. - window(= 객체)..

JavaScript 2020.06.05

[JavaScript] Object Model (객체화)

출처 : 생활코딩, https://opentutorials.org/course/1375/6622 웹브라우저의 구성요소들은 모두 객체화되어있다. 자바스크립트로 이 객체들을 제어해서 웹브라우저의 요소를 제어할 수 있다. Object Model은 크게 BOM과 DOM로 구성된다. 1. Object Model window - 전역개체 - 모든 속성 앞에 부모 객체를 입력하지 않으면 자동으로 window전역객체에 속한 객체로 인식된다. - DOM, BOM, JAVASCRIPT 객체를 가지고 있다. 1). DOM (Document Object Model) 문서(document), 즉 웹페이지의 내용을 제어하는 중요한 객체이다. 문서내의 주요 요소에 접근할 수 있는 객체를 제공하며 특정 요소의 객체를 획득할 수 있는..

JavaScript 2020.06.05

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - If, else, or / 20.06.04

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #2.5 If, else, and, or if와 else는 프로그래밍에서 어떻게 모든게 잘 동작하는지 조건을 달아준다. if(condition){ block } else { block } - if 안의 조건이 참이어야 그 옆의 함수가 작동한다. : block을 실행시키려면 - elsse if : if문의 조건이 참이 아니라면 이건 참인가? - if (20 > 5 && "nicols" === "nicolas") && = and 양쪽 조건이 모두 참인지 물어보는 것. 하나라도 거짓이면 else문장으로 고! - if 20 > 55 || "ni..

JavaScript 2020.06.05

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - Function, DOM / 20.06.03

출처 : www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #2.1. Your first JS Function Const nicoInfo = { name: "Nico", age: 33, gender: "male", isHandsome: true } console.log(nicoInfo.favFood) - console은 자바스크립트에 내장되어 있는 객체임. log는 객체이자 함수이다. → built in function (내장함수) - fuction : 무언가를 실행할 수 있는 코드. 원하는 대로 쓸 수 있다. - 정의된 함수가 Nicolas를 가지고 갈 수 있도록 함수를 정의할 때 ()안에 변수를 넣어줘야 한다. (p..

JavaScript 2020.06.03

[JavaScript] +연산자로 문자열과 변수 연결하기

+연산자를 써서 문자열에 변수를 연결하는 방법을 알아보자. 예제는 생활코딩에서 사용했었던 예제를 가져와보았다. document.write(''+coworkers[i]+''); -1- 일반태그를 작은 따옴표로 묶고 그곳에 위치할 변수를 +로 연결한다. ''+coworkers[i]+'' 솔직히 사이에는 coworkers가 뜬금 없이 끼어들은 자리도 아니고 아무 것도 안 붙은 글자가 오는게 맞는 것 같은데 변수여서 그대로 올 수가 없는걸 가지고 특별취급해서 끼어준다고 보는 것 같다. 그래서 변수 양옆에 +를 붙이고 오히려 일반 태그인 에 따옴표를 붙여준다. document.write(''+coworkers[i]+''); -2- '일반태그 끼리' 작은 따옴표로 묶고 그 사이에 +변수+를 집어넣는다. ''+cow..

JavaScript 2020.06.03

[JavaScript] 큰 따옴표를 쓸 것인가 작은 따옴표를 쓸 것인가?

헷갈린다. 사람들이 마구 혼용해서 쓰고 있다. 헷갈리지만 알아보니 뭘 써도 값에 큰 영향은 주지 않는듯 하다. ​ 참고1. https://google.github.io/styleguide/javascriptguide.xml?showone=Strings#Strings 구글 코딩 컨벤션에 따라 작은 따옴표를 쓰는 분이 계신다고 한다. 솔직히 shift키를 눌러 써야하는 큰 따옴표보단 작은 따옴표가 훨씬 편하긴 하다. ​ 참고2. https://www.w3schools.com/html/html_attributes.asp html에 대한 얘기이긴 하지만 html에서는 double ""가 많이 쓰인다고 한다. ​ ​ 결론: javascript에서는 작은 따옴표을 우선으로 쓰되 그 다음 구분할 따옴표로 큰 따옴표를..

JavaScript 2020.06.03

[JavaScript] Function (함수)

출처 - 생활코딩 https://opentutorials.org/course/3085/18882 https://opentutorials.org/course/3085/18851 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK 1. Function (함수) 하나의 로직을 재실행 할 수 있도록 해주는 것. ​ 내가 input버튼을 100000개 만들었는데 그 버튼의 속성을 한번에 바꾸려면 정말 시간이 오래 걸릴 것이다. ​ 또한 엇비슷한 버튼이 매우 많이 있을 경우 어떤 점이 다른 버튼인건지? 같은 버튼인지 알기가 힘들다. ​ 이때 함수를 수납상자와도 같이 써주면 된다. 함수는 데이터가 많아질 ..

JavaScript 2020.06.03

[JavaScript] Array (배열)

출처 - 생활코딩 https://opentutorials.org/course/3085/18825 https://opentutorials.org/course/743/4736 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK 1. Array (배열) 연관된 데이터를 리스트에 담아두는 방식. 변수가 하나의 데이터를 지정하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이다. 1). 기본문법 - 배열을 하고 싶으면 대괄호 []안에 따옴표로 각각의 원소명을 쓰면 된다. : 원소(element) = value (각각의 데이터) - 각각의 원소는 순서대로 고유의 자리값(0부터 ..

JavaScript 2020.06.03

[JavaScript] 데이터 타입 (1) - 기본타입

1. 숫자 (number) - 숫자 데이터를 나타내는데 사용한다. - JS는 정수, 실수를 구분하지 않음. 정수, 실수를 구분하는 언어였다면 실수와 정수를 더해줄 수 없음. 따라서 1, 1., 1.0 을 모두 1.0으로 간주한다. - 2^64~(-2^53) 사이의 숫자값이 오며 부동 소수점을 표현할 수 있고 다음과 같은 값을 포함한다. (1). NaN: Not-a-Number 숫자는 아니지만 값이긴 함. (1 * a와 같이 문자 x 숫자의 결과값으로 반환됨. 숫자가 아님에도 값을 설정해서 다른 부분이 죽지않고 작동되도록 해주는 땜빵 같은 부분) (2). Infinity: 양수무한대 (3). -Infinity: 음수무한대 ​ 2. 문자열 (string) - 텍스트 데이터를 나타내는데 사용한다. - "", ..

JavaScript 2020.06.03

[JavaScript] Variable (변수)

출처 - 생활코딩, https://opentutorials.org/course/3085/18871 - Nomad Academy, www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK - 자바스크립트 비기너, www.inflearn.com/course/자바스크립트-비기너# Vaiable (변수) - 값(모든 종류의 값이 들어갈 수 있다)을 모아놓는 책장같은 역할. 대명사의 역할같기도 하다. ​ - 간단한 연산을 하더라도 변수로 지정을 해두고 변수로 써두면 나중에 값을 수정하더라도 변수안의 값만 수정하면 되니까 훨씬 편하다. ​ - 변수명은 특수 문자와 $, _을 제외한 모든 문자로 시작할 수 있다. - 변수를 만들 땐 변수명..

JavaScript 2020.06.03