23.06.22 수업 정리

1.

 

 

27번째 줄 ~ 31번째 줄

 

<div> 태그로 묶을건데,

<div> 태그의 id를 "box"라고 지을거야.

 

onclick 하면 (클릭하면) changeColor 함수를 실행 시킨다.

 

this는  onclick 에 대상이 되는 주체 이다.

<div> 태그(요소) 안에 onclick 속성에 있으니, 주체가 div id = 'box' 가 되는듯 ?

 

16번째 줄 ~ 25번째 줄

 

<script type = "text/javascript"> : javascript 공간을 열어주기.

 

function changeColor(obj) {

 obj.style.backgroundColor = 'green';

}

 

객체로 (매개변수 obj) this를 받는다.

this는 태그 자체를 의미한다.

( this는 어떤 액션 == 이벤트의 대상이다. (주체 이다) 일반적으로 요소 == 태그 이다. )

 

div id = "box" 이다.

 

div.style.backgroundColor = 'green';

 

div >> 요소

 

style >> 속성

 

backgroundColor >> 속성값 (옵션)

 

요소.속성.속성내부에 지정할 수 있는 속성 = '값'

 

 

2.

 

 

document.querySelector()

 

querySelector() >> 

제공한 CSS 선택자를 만족하는 첫 번째 Element 객체.

결과가 없다면 null을 반환 한다.

 

선택자가 여러개일 수도 있다.

즉, test 라는 이름의 선택자가 여러개 일 수 있는데,

제일 위에 있는 선택자를 반환한다.

 

 

 

29번째 라인

 

onclick을 하면은 함수를 실행하는데,

getElementById('test').src = 이미지 링크;

 

하면은, test라는 이름을 가진 id의 src를 이미지 링크로 보여준다.

 

 

 

3.

자료형 

 

 

 

 

 

 

4.

 

 

 

5.

 

prompt() >>

창이 뜨고, 값을 받음.

 

alert() >>

창만 뜨고, 값을 받진 못함.

 

 

 

 

7.

6번을 함수로 작성해보기.

 

 

 

 

 

8.

 

 

 

 

 

 

9.

 

 

 

append()랑

prepend() 

개념 추가하기..

 

10.

 

 

 

11.

 

 

new 키워드로 객체를 생성해도 되고, 객체 생성을 하지 않아도 된다.

 

 

12.

 

 

 

13.

 

 

 

 

14.

 

 

사용자가 예를들어, 차례대로

1 2 3 4 5 6 7을 입력 했다.

 

그러면 결과값이

sum = 28

 

avg = 4

 

arr 배열의 값을 차례대로 1 2 3 4 5 6 7로 밀어넣어줬는데

 

사용자에게 배열의 값을 입력받으면서 값이 덮어씌워지는 상황.

 

사용자에게 입력받는 값은 무조건 var 타입이다.

 

그래서 parseInt 로 강제 형변환을 해줘서 정수로만 입력받게 해주는 상황이다.

 

 

15.

 

 

랜덤값 받기 >> Math.random() 함수 사용.

 

Math.floor >> 소수값 덜어내기.

 

obj.style.backgroundColor = colorDatas[randNum];

 

주체(this)(인자).style (속성).backgroundColor (속성값 / 옵션)

 

이거자체가 뜻하는게,

 

colorDatas 변수명을 가진 배열의 [randNum] 인덱스의 값에

색이름이 현재 있는 상황인데,

이 색이름을 backgroundColor가 자동으로 색으로 인지해서,

색이름에 해당하는 색으로 지정 해준다.

 

innerHTML >> ???

 

 

 

 

 

 

16.

 

 

실습

 

배열을 생성할 때는

 

var 변수명 = new Array();

 

과 같이 나타낸다.

 

 

 

 

 

 

17.

 

16번 다른 버전

 

 

var L 과

var H 를

 

선언 및 초기화 해서, 사용자 편의성을 고려하여 만든 상황.

 

1)

맨 처음에 초기값이 1과 100 이므로,

1 ~ 100 까지의 정수중에서 정답을 정수로 입력하세요. 라는 멘트를 보여준다.

 

2)

사용자가 num을 입력하고, num이 랜덤값과 동일하지 않으면,

else 문으로 빠지게 된다.

 

각 else 문들은, H = num - 1과, L = num + 1 식을 가지고 있다.

 

3)

[참고]

자바스크립트 문법상, 태그언어는 ' ' 작은따옴표 안에 넣어서 사용이 가능하다.

 

 

[ 참고 ]