ul태그나 ol태그 그 자체로도 리스트형태 동작 가능하나, li와 조합되었을때 제대로된 역할을 할 수 있음.
ul 태그안의 li태그는 점 리스트 형태로 출력.
ol태그안의 li태그는 번호 리스트형태로 출력.
ul: unordered list ⇒순서 없는 목록작성 시 사용.
ol: ordered list ⇒ 순서있는 목록 작성시 사용.
DOM(Document Object Model)
:브라우저가 html문서를 파싱(해석)하는 과정에서 생겨나는 객체
브라우저가 Dom객체를 html 파일을 읽고 생성,
트리구조로 생성됨.
빨간태그 부분들은 엘리먼트 노드,파란텍스트 부분은 텍스트 노드 라고 함.
DOM: 트리구조에서는 뻗어나가는 가지 부분을 '노드' 라고 부른다.보라색은 어트리뷰트 노드(속성노드)라고한다. 클래스나 소스, 아이디 등이 적혀있는 태그내에서 지정해준 속성 부분이다.
모든 노드들은 객체의 형태를 가진다.예를 들면body { name:'body'}이런식으로
document.querySelector("#todo-input").value;실제 html태그가 아니라 그것을 기반으로 브라우저가 만들어준 dom객체 였기에 input박스에 들어있는 value라고하는 속성이 할당되어있는 데이터를 가지고 올 수 있음.
콘솔 창에서 도큐먼트 내부속성 보기
=⇒
console.dir(document)
여기서 document는 DOM의 가장 최상단부분.
만든 코드에는 버튼이 없음. 따라서 리스트 추가할 경우에는 onclick속성이 아니라 다른 속성을 사용해 추가할 수 있어야 하는데, 키보드 버튼을 누를 경우 추가되게 하기위해
`onkeydown= ' 속성을 사용.input태그에 추가해주는데 onkeydown을 함수와 연결해 console.log(window.event)하게되면 (//window는 전역객체( 최상위에 존재한다는 얘기) 현재 존재하는 페이지의 이벤트를 체크해 줄 수 있는 속성이 event)
또는 console.log(event)을 찍고 저장하고,
( //window라는 객체내부에 존재하는 속성들은 window를 생략가능하기에 그냥event만 써도 됨.)
콘솔창을 확인하면 키보드버튼이 하나 눌릴때마다 고유의 키코드번호가 생성됨을 확인할 수 잇다. 그런데 우리는 엔터키를 눌렀을때 내용이 반영되게 하고싶기에 엔터키의 키코드가 13임을 확인하고 조건문을 작성하여 window.event.keyCode === 13 일때로 조건을 만들어 이때에만 반영이되게 한다.
js에서 태그만들기.
js에서 태그를 만들 때: createElement()사용 소괄호 안에는 작성해주고 싶은 태그를 문자열( ‘ ‘ )로 작성.
document.createElement('li')
==>li태그를 만들겠다.
document.createElement('span')
==>span태그를 만들겠다.
이 두개를 사용하기 편하게 변수에 담고,
li태그 안에 span태그가 들어있는 모양으로 만들기 위해 사용하는 것이 appendChild인데,
const newLi =document.createElement('li')
const newSpan
=document.createElement('span')
newLi.appendChild(newSpan)==>li태그의 하위속성으로 span태그를 추가해준다는 의미로 소괄호 안에는 하위로 추가할 태그를 입력하면 된다.
스코프는 변수가 참조될 수 있는 모든 부분
전역 스코프(글로벌 스코프):
전체부분.전역 스코프에 잇으니 함수 내(지역스코프)에서도 참조되어 사용가능
지역 스코프:
함수 내에있는 부분.
함수마다 생겨남.따라서 함수는 자신만의 지역스코프를 가짐.
지역스코프 내의 변수를 전역스코프에서 사용하려면 undifined가뜸.
지역스코프의 경우 함수레벨 스코프, 블록레벨 스코프 두가지로 나눔.
함수레벨 스코프:
선언된 함수 내부의 스코프
var 키워드에서 이 경우에는 함수레벨 스코프 안에 쓴 내용을 바깥에서 보려면 정의 되지 않았다 라고 뜸,
블록레벨 스코프 : 중괄호 사용하는 반복문, 조건문 등이 따르는 것
var키워드는 블록레벨 스코프를 따르지 않아 중괄호 블록을 벗어나서도그 변수를 입력했을 때 정상적으로 출력된다,따라서 var키워드는 사용하지 않도록.
let 키워드는 둘다 따름. 함수안에 선언된 변수는 그 안에 갇히고, 블록레벨 스코프 에서도 중괄호 안의 값은 중괄호에 갇힘
글로벌(스코프):==>브라우저가 자바스크립트 실행환경 생성할때 자동으로 생성하는 값들, 전역변수.
글로벌이라는 공간 브라우저자체적으로 가지고있는 데이터들이 담김 var키워드는 글로벌로 올라가는데 이때 var 키워드의 변수와 글로벌에있는 변수가 이름이 같으면 글로벌의 그 값이 var키워드의 값으로 재할당이 되어버리니 절대절대 var키워드 쓰지 않기.
Local이라는 스코프 안쪽
this: Window ==>열어보면 글로벌로나왔던것이랑 같은거라는 것을 알 수 있음.
따라서Window는 글로벌을 뜻한다고 이해하면 됨.
지역스코프 즉, local스코프에서 변수를 찾을 수 없다면 상위스코프로 올라가게됨.
가장 최상위 스코프가 Grobal스코프(전역스코프)
