1.
input 태그의 type 속성은 text 이고,
또
onkeydown 속성은 test(event) 함수를 실행하게끔 되있다.
onkeydown 속성은, 다음과 같다.
- 키를 눌렀을 때 발생.
- 물리키에 반응.
- 현재 눌린 문자와는 상관없이 물리적인 키에만 반응.
test() 함수가 존재해야지 사용할 수 있으니,
function test() { } 를 만들어야 한다.
() 괄호안의 매개변수는 event 인데,
event가 일어났을 때를 의미한다.
30번째 줄 >>
만약에, 이벤트 동작이 일어났어, 근데 어떤 동작이야 ? keyCode가 13인 동작이야.
keyCode가 13인거는 엔터를 의미하니까,
즉, 엔터를 사용자가 쳤다면, if문이 참이 되서, if 문 안의 명령들을 실행 한다.
event.target.value 는
이벤트에 타겟이 되는 애가 가지고 있는 값 (value) 을 의미 한다.
alert() 는 알림창 뜨기.
2.
div 태그가 box 스타일이니, div 태그의 id를 box로 그냥 지어줬고,
속성으로는,
onmouseover
onmousedown
onmouseout
가 있는 모습을 볼 수 있다.
onmouseover 속성은 마우스를 해당 속성값에 올려뒀을 때 이고,
onmousedown 속성은 마우스를 해당 속성값에 클릭 한 경우 이고,
onmouseout 속성은 마우스를 해당 속성값에서 벗어난 경우 이다.
[ 복습 ]
자바 스크립트 에서 -는 사용하지 않는다.
왜냐하면, - 기호를 연산자로 생각할 수 있어서, 의도치 않는 에러를 발생 시킬 수 있다.
그래서, 카멜 표기법으로 변수명 등을 작성 한다.
34번째 라인 ~
test1 이라는 함수가 obj를 매개변수로 받는데,
23번째 라인을 보면 test1(this)를 볼 수 있다.
this는 자기 자신을 의미한다.
따라서,
this.style.backgroundColor = 'lightgreen' 이 된다.
즉,
onmouseover의 속성에서 style 속성의 backgroundColor 속성값은 lightgreen 이라는 말.
나머지도 동일 하다.
onmousedown의 속성에서 style 속성의 backgroundColor 속성값은 lightpink 이라는 말.
onmouseout의 속성에서 style 속성의 backgroundColor 속성값은 lightblue 이라는 말.
3.
9번째 라인
버튼 태그에서 속성 type의 속성값은 button 이고,
속성 onclick의 속성값은 test()과, test2() 함수 이다.
15번째 라인 ~
1번째, 3번째, 5번째 목록은 1개 이상이니,
li 태그에서 속성 class의 이름을 check2로 지어줬다.
16번째 라인의 코드는
2번째 목록이라는 글이 적혀있고, li 태그에서 속성 id의 (PK) 값을 check 라고 주었다.
유일하기 때문에 id 이다.
25번째 라인 ~
test(), test2() 함수는
document.getElementById('check')
document.getElementByName('check2')
인 모습을 볼 수 있다.
() 안의 인자로 check와 check2를 받고 있고,
check와 check2는
ul 형식 태그로 둘러쌓여 있고,
li 태그로 구성되어 있다. (리스트로)
getElement는 결과값을 한개만 받아서, 객체 한개가 오는 개념이고,
getElements는 결과값을 여러개 받기 때문에, 배열의 값이 오는 개념이다.
또한 그 아이들을 저장할 공간이 있어야 하므로, var 타입으로 변수명을 만들어서 값을 대입 해준다.
이미지와 같이,
var obj 라는 변수명으로 결과값을 받고,
obj의 값이 들어왔기 때문에 해당 변수로 무언가를 할 수 있게 되는 상황 이다.
그래서,
obj.style.backgroundColor = '색이름' 의 코드를 확인할 수 있다.
주체.속성.속성값 = 값
35번째 라인을 보면, for문을 확인할 수 있다.
var 타입의 변수 arr의 길이만큼 돌면서,
각 배열값들은 gray 색으로 색이 변경된다.
언제 ? 클릭했을 때..
4.
9번째 라인
li 태그 이름을 가진 애를 { } 안의 속성들로 세팅해줄거야.
margin은 10px로 (여백을 주는 느낌.. 마진 안주면 저 칸들이 모두 붙어 있다)
cursor는 pointer 아이콘이 생기도록 (마우스를 갖다대면 마우스 표시가 생기도록)
border은 테두리를 1px로 하고, 검은색으로..
14번째 라인
.click >> 클래스명이 click인 애를 { } 안의 속성으로 세팅해줄거야.
배경색을 lightpink로 하고,
!important 키워드는 이 페이지에서 이 속성값이 제일 우선 순위가 높다는것을 의미한다.
28번째 라인
ul 형식의 태그로 묶여있다.
li 태그로 목록 5개를 만들어 뒀다.
36번째 라인 ~
li 태그들을 모두 가져올거야 ~
그것을 var 타입의 arr 변수에 저장할거야.
querySelectorAll() 은 All이니까 배열값이다.
for문을 돌리면서,
배열의 각 요소들을
addEventListener() 해줄거야.
addEventListener() 은
이벤트를 연결할 때 이벤트 리스너를 등록하는 방식으로 적용이 가능하다.
흔히 사용하는 기법이다.
사용하는 방법은, 소괄호 안에 이벤트명을 적고 콤마로 함수명을 적어준다.
이벤트명은 현재
mouseover 하고, mouseout 이 있다.
각각,
마우스를 올렸을 때, 마우스를 벗어났을 때를 의미 한다.
함수는 기능이 있어야 하니까 기능을 구현해 준다.
현재 이미지에는, 무명함수가 존재하는 모습을 볼 수 있다.
재사용을 하지 않을거라 이름을 짓지 않고 함수를 직접적으로 넣어서 사용하는 모습을 확인 할 수 있다.
58번째 라인
arr[i].onclick = test
배열의 어떤 요소값을 클릭했을 때, test라는것을 실행한다.
위에서 for문을 돌렸고, for문안에 arr[i].onclick = test 이 문구가 들어있으니,
모든 요소를 각각 클릭했을 때 test라는 함수가 실행된다는 의미 이다.
66번째 라인
this.className >>
?
5.
29번째 라인 ~
div 태그로 속성값이 a인 id 속성과, 속성값이 b인 id 속성 2개가 있다.
이 둘을, 가로로 보이게 하고 싶어서,
속성값이 wrap인 id 속성으로 해서 (wrap 이라고 불리는 id 속성이 있는)
전체를 div 태그로 묶은 상황 이다.
이렇게 하고 7번째 라인을 보면,
#wrap { display : flex; } 를 확인할 수 있다.
wrap 이라고 불리는 id 속성을 style 해줄거야.
display를 flex로 되게.
flex는 가로로 나오게 하는것을 의미.
10번째 라인
#wrap 안에 있는 div 태그에 속해져있는 아이들을 style 할거야.
width는 50px로
height는 50px로
margin은 10px로
각각 cursor를 올렸을 때 pointer 마우스 표시가 되게.
39번째 라인
test2 라는 함수의 기능을 보면
a라는 아이디 이름을 가진 요소를 뽑아서, var 타입의 elem 변수에 넣을거야.
넣었기 때문에, 이제 elem 변수를 사용할 수 있다.
41번째 라인
a의 스타일을 바꿀거야. 어떻게 ? 뒷배경색을 red로 바꿀거야.
라는 기능을 가진 함수 이다.
31번째 라인을 다시 보면, onclick을 했을 때 test2 함수가 실행되는 것을 볼 수 있다.
즉, a를 클릭하면 색이 red로 바뀐다.
44번째 라인
querySelector은 id 속성값을 가져오는게 아니라서 인자에 넣는게
아이디면 #아이디명 이고,
클래스면 .클래스명 이다.
querySelector 함수말고, 그냥 getElementById를 사용해도 된다.
addEventListener 함수 :
앞에서 배웠듯이, 'click'을 하면, (어떠한 이벤트 동작을 사용자가 하면 / 여기서는 click)
함수를 실행시킬거야.
이 함수는 현재, 무명함수이고, 함수 그 자체를 이곳에 대입해서 바로 작성한 모습을 확인할 수 있다.
this.style.borderRadius = '50%';
this는 #b가 된다.
b의 스타일을 바꿀거야. 원이 되도록. 원의 속성값은 50% 이야 ~
3번째로 사용된다는 방법으로는, (36번째 라인)
test1 이라는 이름을 가진 함수를 보면 매개변수 obj를 확인할 수 있는데,
암튼 어디선가 인자를 받아서,
인자.style.backgroundColor = 'pink' 가 되는데,
위의 방법을 사용하려면,
31번째 라인에서, 코드를 바꿔줘야 한다.
<div id = 'a' onclick = 'test1(this)'> </div>
a가 클릭되면 test1 함수를 실행할거야.
test1 함수는 인자로 this를 받고 있는 상황이고,
여기서 this는 id = 'a'를 의미 한다.
그래서, 인자로 a를 받으면
a.style.backgroundColor = '색이름' 이 되는것이다.
마지막으로 48번째 라인을 보자.
토글방식 이라고 하는데,
토글방식의 개념은 아래와 같다.
토글이란, 하나의 설정값 으로부터 다른 값으로 전환하는 것을 의미.
스위치를 한번 누르면 한 값이 되고, 다시 한번 더 누르면 다른 값으로 변하는 것을 의미.
토글 스위치는 두 가지 상태만을 가지고 있는 스위치.
일상생활을 예시로 들면,
방 불 스위치 이다.
틱 하고 키면 불이 켜지고, 다시 끄면 불이 꺼진다.
컴퓨터 키보드로 따지면, Caps Lock 키 이다.
안켜져있을 때 누르면 Caps Lock이 켜지고,
켜져있을 때 누르면 Caps Lock이 꺼진다.
그래서 코드를 보면,
#b를 querySelector 해올건데,
그 애를 onclick 했을 경우, 속성값으로 test 라는 이름을 가진 함수를 호출할거야.
test 라는 이름을 가진 함수는 메서드 바디 안에 있는 기능들을 가진 함수인데,
< 이부분 개념이 모호해서 추후 수정 >
일단 느낌적으로 정리하면,
주체가 click 상태이면 주체를 click 상태에서 해제 시켜주고,
주체가 click 상태 이외에 상황이면, (최소한 click 상태만 아니라면)
주체를 click 상태로 바꿔 준다는 느낌 이다.
6.
input 태그에 type이라는 속성의 값을 text로 줄거야.
그리고,
placeholder 속성의 값은 내용 입력후 엔터 라고 줄거야.
이미지 처럼 동그라미 점이 찍히는 형식으로 나오게 할거야.
ul이라는 태그.
ul 태그의 id 속성의 값을 list 라고 줄거야.
그리고 샘플 느낌 처럼, li 태그를 사용해서 1번째 목록 이라는 문구를 세팅.
7번째 라인 style 부분을 확인 하면,
input 태그는 width를 25% 로 설정,
ul 태그의 id 속성의 속성값은 list 이니까,
#list 로 표기하면서,
#list > li { margin : 5px } 을 확인할 수 있다.
23번째 라인 ~
querySelector 의 인자로 'input'을 볼 수 있다.
input은 태그를 의미.
만약에 input id = 'inputId' 로 했다면,
'#inputId' 로 작성했을것이고,
사실 id 이름값이 있었으면, getElementById를 사용해도 무관하다.
document.querySelector('input') 이 의미하는 것이
요놈이다.
그래서, 저 아이를 변수 obj에 대입하니까 obj로 사용이 가능하게 되는 문법이다.
obj.onkeydown = function(event) { }
input 태그 요소를 onkeydown 하면, 함수를 호출할거야.
이 무명함수는 인자로 event를 가지는데,
★ ( 궁금한점 : event는 타입이랑 값이 딱히 없는데 어떻게 바로 사용되는거지 ? ) ★
만약에 event가 엔터를 쳤을때 그리고 (&&) 사용자가 입력한 값의 길이가 1자리보다 크면
li 태그 요소를 createElement를 해줘 ~
걔의 정보를 var 타입의 elem 변수에 대입 해줘.
그리고,
this.value 즉, input 태그 요소의 값을 (사용자가 입력한 값)
createTextNode 할거야.
그 정보를 var 타입의 msg 변수에 대입 해줘.
★ (궁금한점 : 32번째 라인하고 34번째 라인) ★
[ 참고 ]
.value는 주체가 가지는 값을 의미한다.
this.value 이면 this가 가리키는 주체가 가지는 값이다.
7.
웹에서 기본 제공해주는 객체 이다.
BOM :
Browser Object Model
history 객체
방문기록과 관련된 객체이다.
input 이라는 태그에서 type 속성의 속성값은 button 이고,
value 속성이 있다.
document.querySelector('input') 을 보면,
input은 태그명이다.
9번째 라인에 input 태그가 존재하는것을 볼 수 있다.
만약에 속성을 id나 class로 해서 각각 값을 지정해줬었으면,
'#이름' 또는
'.이름'
이런식으로 표현 했을 것이다.
암튼 인자로 input 태그 받아서, 그 값을 obj에 넣고
obj를 클릭했을 때 뒤로가기 기능이 있는 함수를 실행하는 상황.
8.
★ (궁금한점 : 41번째 라인) ★
새 창 열 기를 하면 새 창이 뜨고,
창 닫기를 누르면, 방금 열은 창을 닫게 된다.
9.
★
23.06.24
08 ~ 09 내용 추가 하기.
&
06, 08 ~ 09 모르는 부분 체크 하기.
★
'Front-end (국비) > 이론' 카테고리의 다른 글
| 23.06.27 수업 정리 (ajax() 메서드와 JSON 데이터) (0) | 2023.06.27 |
|---|---|
| 23.06.26 수업 정리 (0) | 2023.06.26 |
| 23.06.22 수업 정리 (0) | 2023.06.22 |
| JavaScript 에러 (0) | 2023.06.22 |
| 23.06.21 수업 정리 (0) | 2023.06.21 |