루체

JavaScript코드를 옮기기 위해서 새파일을 만들어 줍니다 뒤에 확장자명은 .js입니다. 그리고 작성했던 코드들에서 태그를 제외하고 붙여넣어 주세요 그리고 JavaScript를 사용하려고 하는 곳 부분에 아래처럼 추가해주시면 사용을 할 수가 있습니다. 그러면 하나의 파일만 수정해도 이 파일을 공동으로 사용하는 웹페이지 전체에 적용되는 편리함을 얻을 수 있습니다.

객체에는 여러 가지의 데이터를 넣을 수 있습니다. 심지어 함수까지 넣을 수 있습니다. 이것을 한번 해보도록 하겠습니다. 그런데 이렇게 하는 것은 아주 좋은 방법은 아닙니다. 왜냐하면 변수의 이름이 document.write()안에 있기 때문입니다. 변수의 이름이 바뀌게 되면 이 데이터를 가져오지 못하는 현상이 생길 수가 있습니다. 이런 경우에는 어떻게 하면 되냐면 showAll이라는 함수 안에서 함수가 소속된 객체를 가리키는 약속된 기호가 있습니다. 바로 this라는 키워드 입니다. this는 자기 자신을 가리키는 것입니다. 이렇게 작성을 해주시면 똑같은 결과가 나오는 것을 확인하실 수 있습니다. 그리고 또 하나 아쉬운 것은 coworkers안에 showAll이라는 것도 포함이 되는 것이기 때문에 웹페이..

배열과 반복문을 활용하기 위해 검색을 또 먼저 해봅시다. a태그의 폰트색깔을 바꿔주려고 하는 것이기 때문에 모든 a태그를 가져와야 합니다 그런데 여태까지 사용을 했던 querySelector은 하나의 태그만을 가져 오는 것이기 때문에 검색이 필요합니다. javascript get element by css selector multiple 검색을 하고 뒤적거리면 이런 코드가 나오게 됩니다. 그런데 이 코드가 자신이 원하는게 맞는건지 잘 확신이 안되잖아요? 그러면 이 코드도 검색을 해보면 됩니다. javascript querySelectorAll 검색을 한 것을 콘솔창에서 입력을 한번 해봅시다. querySelectorAll은 해당 태그를 모두 가져와 배열 형식으로 가지고 있습니다. 그래서 이것을 변수에 추..

night와 day의 버튼을 하나로 합치는 것에 대한 영상입니다. 우선 버튼을 이렇게 새로 만들어 줍니다. 아직 if안에는 value값을 어떻게 가져오는지 몰라서 임의대로 작성을 했습니다. 이제 value 값을 어떻게 가져와야 하는지 검색을 해봅시다 javascript element get value https://stackoverflow.com/questions/4173391/getting-dom-element-value-using-pure-javascript Getting DOM element value using pure JavaScript Is there any difference between these solutions? Solution 1: function doSomething(id, val..

웹페이지의 버튼을 눌러서 body태그의 style 속성을 동적으로, 프로그래밍적으로, 또 상호작용에 의해 넣으려고 한다. 그러려면 JavaScript의 문법에 따라서 웹브라우저에게 이 body 태그를 선택하라고 해야한다. 그걸 하기 전에 우선 검색부터 해봅시다. JavaScript Select Tag by CSS Selector https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector Element.querySelector() The querySelector() method of the Element interface returns the first element that is a descendant of the element on w..

변수라는 것은 바뀔 수 있는 어떤 값이라고 할 수 있습니다. 예를 들어서 x = 1이고 y=1일 때 x+y는 2입니다 여기서 x의 값을 1000으로 변경해서 더하기를 하면 1001이 됩니다 바로 이 맥락에서 여기서 x라는 것을 변수, 영어로는 variable이라고 합니다. 그리고 여기 있는 = 이것을 대입 연산자라고 합니다. 오른쪽 항에 있는 왼쪽에 있는 변수에 대입한다라는 대입연산자입니다. 이 대입 연산자는 하나의 특징이 더 있습니다. 좌항과 우항을 결합해서 우항의 값을 만들어 낸다라는 뜻입니다. 모르셔도 되는 내용입니다. 항상 변하지 않는다는 숫자인 상수 영어로는 constant에 숫자를 대입하려고 했기 때문에 오류가 납니다. 그러면 상수를 쓰면 되지 변수는 왜 쓰는가? 라는게 궁금할 수 있습니다. ..

문자열(String)과 숫자(Number)의 데이터 타입에 대해서 알아보기 위해서 아무 사이트에서 검사를 켜봅시다. 검사 안에서 Console을 찾아서 눌러줍시다. 여기서 이제 숫자를 표현해보겠습니다. 숫자를 표현하기 위해선 그냥 숫자를 입력해주시면 됩니다. 너무 당연해보이지만 이것이 당연하지 않을 수 있습니다. 이렇게 입력을 해봅시다. 입력을 하면 창이 뜨면서 숫자 1이 뜨게 될 것입니다. 그런데 이렇게 테스트를 할 때마다 alert를 계속 치는 것과 그 창을 끄는 것이 귀찮을 수 있습니다. 그럴 땐 아래 와 같이 해주세요. 1+1를 입력을 했더니 아무런 창도 뜨지 않고 결과가 보이는 것을 알 수가 있습니다. 그리고 이 숫자, number라는 데이터 타입에서 아주 중요한 것은 연산입니다. 이 더하기는 ..