이렇게 삽니다

출처 - 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..

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

출처 : 생활코딩 -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(= 객체)..

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

출처 - 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..

출처 : 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..

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

헷갈린다. 사람들이 마구 혼용해서 쓰고 있다. 헷갈리지만 알아보니 뭘 써도 값에 큰 영향은 주지 않는듯 하다. ​ 참고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에서는 작은 따옴표을 우선으로 쓰되 그 다음 구분할 따옴표로 큰 따옴표를..

출처 - 생활코딩 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개 만들었는데 그 버튼의 속성을 한번에 바꾸려면 정말 시간이 오래 걸릴 것이다. ​ 또한 엇비슷한 버튼이 매우 많이 있을 경우 어떤 점이 다른 버튼인건지? 같은 버튼인지 알기가 힘들다. ​ 이때 함수를 수납상자와도 같이 써주면 된다. 함수는 데이터가 많아질 ..

출처 - 생활코딩 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부터 ..