728x90 반응형 전체 글69 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. 01 데이터 타입과 변수 Data Type, Variable 데이터 타입과 변수 1. Data Type 2. Variable 1. Data Type 자바스크립트 등 프로그래밍에서 일반적인 숫자, 문자열을 그대로 인식하여 출력함 1, 2, 3, 4+5, 등등 "나" , "my" , "is to get" , " i " + " have" , 등등 변수의 선언및 할당은 정해지지 않은 숫자나 문자열을 다른 입력을 통해 대입시키기 위해 필요함 즉, 인터페이스를 통한 입력을 위해서 하나의 메모리를 사용하기 위한 초기 설정이라고 볼 수 있음 이러한 데이터는 선언 > 초기화 > 할당의 순서로 이뤄짐 const 상수 (변하지 않음) constant 재선언x, 재할당x 기본으로 사용 let 변수 (변하는) 재선언x, 재할당o 필요시만 사용 var 변수 상수 개념없음 재선언o, 재할당.. 2023. 5. 30. 이전 1 ··· 3 4 5 6 7 다음 more
