본문 바로가기
728x90
반응형

Javascript: to do list22

09 Event 행위를 인지하고 반응하게 만들기 행위의 인지와 반응 우리가 뭔가 행위를 하여 입력하는 상황을 event라고 합니다. 그럼 이걸 인지하기 위해서 뭘 해야 할까요? ① 먼저 js에서 대상이 될 html 요소(element)를 불러와야겠죠. ② 출력할 무언가에 대한 함수를 만듭니다. (일종의 기능이죠. 예를 들어 글자가 커져라!, 색이 바뀌어라, 얼마큼 움직여라 등등) ③ 입력받을 값과, 위에서 만든 출력할 함수를 연결시켜 줍니다. 아래와 같이 문자열이 있고, 우리는 이것을 클릭하면 우측 콘솔에 Title was ckicked라는 문구를 출력하라고 할 겁니다. 순서대로 해보죠. 이전 장에서 사용했던 html을 그대로 사용합니다. DOCTYPE html> Momentum Come on me! ① 먼저 js에 무엇을 불러올 것인가? html에 .. 2023. 5. 31.
08 Elements 엘리먼트와 쿼리셀렉터 엘리먼트 Element의 활용 getElementsByClassTagName & querySelector 이전 장에서 javascript 를 이용해 classID로 불러오기를 해봤다. 이번에는 className으로 불러오기, classTagName으로 불러오기, querySelector로 불러오기를 해보겠다. html은 다음과 같이 title을 className으로 하고, h1 Tag에 감쌌다. DOCTYPE html> Momentum Come on me! 1. getElementsByClassName js파일은 다음과 같이 className을 통해 title을 출력하고 있다. const title = document.getElementsByClassName("title"); console.log(tit.. 2023. 5. 30.
07 html , javascript에서 html을 다루기 javascript에서 html을 다루는 방식 먼저 html에 body안에 제목을 만들고, 그 제목의 class 이름과 id를 정의하였다. DOCTYPE html> Momentum Come on me! 이제 javascript에서 id를 통해 element를 오브젝트로 불러와서 변경하는 작업을 해보자. 먼저, 콘솔에 title이라는 id를 불러와 오브젝트의 프로퍼티를 살펴보자 콘솔에서 작성했던 구문을 다음과 같이 js파일에 작성해서 콘솔로 확인해 보자. title이라는 id를 통해 element를 불러와 title에 할당했고, 콘솔에 그 dir 오브젝트 정보를 모두 모여달라고 했다. const title = document.getElementById("title"); console.dir(title); .. 2023. 5. 30.
06 Document 도큐멘트에 대한 이해 도큐멘트 Document에 대한 이해 도큐먼트는 브라우저가 이미 갖고 있는 오브젝트를 담고 있으며, 우리가 만든 html을 불러오고 연결할 수 있음을 의미한다. 웹브라우저 / 콘솔에 'document'라고 입력하고 엔터를 쳐보자. 우리가 작성하고 있는 html 소스를 보여주고 있다. 이제 콘솔에 'console.dir(document); '라고 입력해 보자. 그럼 도큐먼트의 모든 오브젝트를 볼 수 있다. 이 말은 브라우저가 이미 도큐먼트 안에 모든 오브젝트를 담고 있다는 의미다. 즉, 우리가 주로 사용하는 오브젝트와 함수를 이미 브라우저가 담고 있기 때문에, 우리가 html코드를 짜서 웹에 올리면 이를 읽어서 화면에 보여줄 수 있는 것이다. 즉 브라우저라는 의미는 언어해석기 같은 것이다. 우리가 눈으로 .. 2023. 5. 30.
EX. 마우스 움직임에 반응하는 텍스트 만들기 오늘 과제! 마우스 움직임에 따라 반응하는 텍스트 마우스를 글자 위에 올리면 text가 변하고 마우스가 벗어나면 또 text가 변하고 화면사이즈를 조절하면 text가 변하고 마우스 우클릭하면 text가 변하는 js를 작성함 함수를 이용하여 마우스 반응에 대한 동작을 정의하고 이벤트 리스너를 통해 각 행위에 대해 연결해줌 텍스트 내용과 컬러에 대한 변수를 불러와 할당하고 각 함수에 변수를 적용함 참고사항(이벤트) 마우스 온 = "mouseover" 마우스 릴리즈 = "mouseout" 마우스 우클릭 = "contextmenu" 윈도우창 크기조절 = "resize" BR.h 2023. 5. 30.
Ex. 화면 사이즈 변경에 따라 바뀌는 배경색 오늘의 과제! 화면 사이즈를 변경하면 배경색이 바뀌도록 해보자. body에 클래스를 적용하여 css를 통해 배경색을 여러 종류로 설정한 후 js를 통해 resize시 배경색을 변경하는 함수를 만들자. 먼저 .html 태그에 class를 추가해놓자. 사이즈를 변경할 것이고, 배경색을 컨트롤할 것이므로 이를 css에 설정한다. .css .smallSized{ background-color: blueviolet; } .mediumSized{ background-color: deepskyblue; } .bigSized{ background-color: darkorange; } 세가지 사이즈에 적용할 배경색 컬러를 설정했다. 현재 body에 적용된 사이즈는 medium이며, small과 big을 변경될 것이다. .. 2023. 5. 30.
05 Condition 조건문 연습하기 조건문 ( Condition ) Practice 1 음주 가능 연령 측정기 이번에 만들 것은 음주 가능 연령 측정기를 간단하게 구현해볼 것이다. 브라우저 팝업창을 통해 질문을 통해 답을 구할 수 있는 필드를 구현할 수 있다. 간단한 입출력 구문이 가능한 것을 활용하여 구현해보자. prompt();라는 명령어를 사용해볼 것이다. 그리고 데이터 타입을 string =>> number로 바꾸는 작업을 해보고, if / else로 경우에 따라 다른 실행이 가능하도록 해보자. const age = prompt("How old are you?"); console.log(typeof age); console.log(age, parseInt(age)); 먼저 prompt();를 통해 팝업창을 띄워 "How old ar.. 2023. 5. 30.
04 Function에서 Return의 의미 Return function에서 사실상 가장 중요한 개념을 이제 알아야 한다. 이전까지 결괏값을 보고 확인하기 위해 console을 활용했다. 브라우저에서 콘솔 화면에 값을 띄워주는 함수가 console.log();라는 것이 있기 때문이었다. 하지만 실제로 function을 사용할 때는 콘솔에서 확인하기 위해 만들지는 않기 때문에 실제 코드에서는 그 결과값을 어떻게 가져오는 지를 알아야겠다. 1. Function에서 Return의 의미 이전처럼 콘솔로 결과를 확인하는 함수를 잠시 살펴보자 const a = 10; function plus(kAge){ console.log( kAge + 2); } plus(a); 이처럼 함수 plus 라는 것은 a 값을 kAge에 대입해서 +2 더하기를 실행한다라고 정의하.. 2023. 5. 30.
03 Function으로 계산식 만들기 Function 1. Function의 사용방법 2. Function을 이용한 계산식 만들기 Function은 계속 반복해서 뭔가 재생하고 만들 수 있게 해 준다. 이제 그냥 변수로 뭔가를 정의하는 차원이 아니고, 어떤 명령어를 우리가 직접 만들어서 사용한다고 보면 된다. 1. Function 의 사용 방법 console.log(); Array.push(); alert(); 우리가 여태 본 것들, 이런 것들이 모두 function의 일종이다. 그 특징은 보다시피 끝에 () 괄호를 넣는다는 것이다. console.log("Hello, My name is Petter, I am 25 years old."); console.log("Hello, My name is Sonnay, I am 21 years old.. 2023. 5. 30.
02 배열과 오브젝트 Array & Object Array 배열과 Object 오브젝트 1. Array 배열 2. Object 오브젝트 우리는 데이터를 만들 것이다. 그리고 그것을 가져다 써야 할 뭔가를 또 만들 것이다. 데이터를 만드는 방식을 간단히 살펴보자. Array는 여러 속성 값들을 나열하여어 하나의 통 안에 넣어둔다는 의미이며 Object는 속성과 값을 대응시켜 나열하여 담아둔다는 것에서 차이가 있다. 1. Array 만들기 배열이라는 것 자체는 데이터 관리를 편리하게 하기 위해 만들어진 것이다. string과 같은 데이터가 무수히 많이 있는데, 그 안에서 무언가를 꺼내와서 사용하고 싶을 때 어디에 있는 몇 번째 아이를 가져오겠다. 할 경우에 배열을 사용한다. 보통 변수 하나에 하나의 값을 가지는데, 이는 여러 값을 동시에 담을 수 있다는 .. 2023. 5. 30.

티스토리툴바