error의 종류
1 rangeError : 숫자나 배열의 유효 범위를 벗어났을때 출력되는 Error이다
2 ReferenceError: 정의되지않은 함수,변수를 잘못 참조했을 때 출력되는 Error이다
3 TyepError : 변수나 파라미터가 유효한 데이터 타입이 아닐 때 출력되는 Error이다
4 AggregateError:하나의 동작이 다수의 오류를 발생시키는 경우 다수의 오류를 하나의 오류로 그룹화하여 출력되는 Error이다
5 SyntaxError: 작성된 문법이 잘못되었을 때 출력되는 Error이다
6 InternalError: JS엔진 내부에서 오류가 발생했을때 출력되는 Error이다
Strict Mode(엄격 모드)
1JS문법을 엄격하게 체크하는 모드이다
2JS는 변수를 선언하지않아도 값을 할당 하여 출력 할 수 있는데 이러한 암묵적 문법의 모순을 허용하지 않는다
사용법 : 엄격모드를 사용하고 싶은 js파일 상단에 'use strict'라고 명시한다
ex)
'use strict'
a = 3
console.log(a)
//위코드에서 a란 문자에 3이란 값을 할당 해줬다 엄격 모드가 아니라면 console창에 3이 출력되는게 당연 하다고 생각 할 수 있지만
//문법적으론 잘못된 것이다 이러한 문법의 모순을 엄격모드에서는 허용 하지 않기 때문에 error를 출력한다
REST API
애플리케이션이란? :컴퓨터 상의 프로그램 이라고 해석해도 무관하다
프로토콜이란? : 데이터 통신(데이터를 주고 받는 행위) 이라고 해석해도 무관하다
REST란?
REST(Representational State Transfer)는 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다
자원이란? : 소프트웨어가 관리하는 모든것을 의미한다 데이터,문서,프로그램,그림 등등
주로 json형태로 데이터를 주고 받는다
API란?
API(Application Programming Interface)는 애플리케이션을 구축하고 통합하기 위한 프로토콜 세트이다
즉 컴퓨터 상의 프로그램을 구축하고 통합하기 위해 데이터를 주고 받는 행위이다
ex)
구글지도,카카오지도,네이버 결제 , 영화 조회 등등
API의 장점
1구현방식을 몰라도 애플리케이션(컴퓨터 상의 프로그램)끼리 서로 소통 할 수있다.
2애플리케이션(
REST API는 HTTP(통신 프로토콜의 일종)의 Method(속성이 함수인것)를 통해 자원(소프트웨어가관리하는 모든것)에 대해 CRUD를 실행한다.
CRUD란?
Create(생성),Read(조회),Update(수정),Delete(삭제)를 의미한다
HTTP Method :POST(생성),GET(조회),PUT(수정),DELETE(삭제)
HTTP Method는 웹에 입장에서 봤을때 서버에서 만든 API를 사용자가 호출했을때 생성,조회,수정,삭제와 같은 기능을 서버에 요청 할 수 있게 해준다
JS DOM
1DOM이란? Document Object Model의 약어이다
2 js로 특정 기능을 만들어 html에 적용 시켜 페이지에 동적 기능을 부여하는 역할을 한다
3 DOM은 HTML에 요소와 속성을 변경,추가,제거,JS의 event삽입을 할 수 있고, css의 속성을 추가,제거 할 수 있다.
DOM으로 HTML에 요소를 찾는방법
1 document.getElementById(): ()안에 html에 특정요소 id이름을 명시 하고,JS의 변수와 연결한다
2 document.getElementsByTagName(): ()안에 html에 특정 태그이름을 명시 하고, 태그명에 해당하는 모든 요소와 연결된다
3 document.getElementsByClassName(): ()안에 html에 특정요소 class이름을 명시 하고 JS의 변수와 연결한다
4 document.querySelector(): ()안에 CSS의 선택자의 이름을 명시하고, 해당선택자와 연결된 html에 요소를 조회하여 제일 처음으로 찾아지는 요소를 JS 변수와 연결한다
5 document.querySelectorAll():()안에 CSS의 선택자의 이름을 명시하고, 해당선택자와 연결된 html에 모든요소를 JS 변수와 연결한다.
ex)
<p id="getid">document.getElementById()</p>
<p class="getclass">document.getElementsByClassName()</p>
<p class="getclass">document.getElementsByClassName()</p>
<ul>
<li>getElementsByTagName()</li>
<li>getElementsByTagName()</li>
</ul>
<p class="querySelect">document.querySelector()</p>
<p class="querySelect">document.querySelector()</p>
<ul>
<li class="item">document.querySelectorAll()</li>
<li class="item">document.querySelectorAll()</li>
</ul>
<style>
.querySelect {
color: yellow;
}
.item {
color: brown;
}
</style>
<script>
const idEl = document.getElementById("getid")
//HTML에 getid라는 id를 가지는 요소 조회하여 js와 연결
idEl.style.color = "red"
//id가 getid인 요소의 글자색 빨간색으로 제어
const classEl = document.getElementsByClassName("getclass")[0]
//HTML에 getclass라는 요소를 조회하여 js로 연결
//index번호를 명시해 줘야 제대로 연결된다
classEl.style.color = "blue"
//class가 getclass인 요소의 글자색 파란색으로 제어
const ulEl = document.getElementsByTagName('ul')[0]
//HTML에 ul태그에 요소를 조회하여 js로 연결
//index번호를 명시해 줘야 제대로 연결된다
ulEl.style.color = "green"
//ul이라는 요소의 글자색 초록색으로 제어
const pEl = document.querySelector(".querySelect")
//클레스가 querySelect 인 요소를 css선택자로 조회하여js와 연결
//이때 클레스이름이 중복되면 제일 처음으로 찾아지는 요소와 연결됨
pEl.style.color = "yellowgreen"
//querySelect라는 클레스를 가진 첫번째요소에 글자색을
//yellow에서 yellowgreen으로 변경
const itemEl = document.querySelectorAll('.item')
//querySelectorAll은 전체요소를 찾아주지만 style을 제어할 때는
//index번호를 명시해야하기 때문에 반목문을 사용한다
for(const item of itemEl){
item.style.color = "violet"
}
// for-of라는 반복문을 사용하여 class가 item인 li태그의
//글자색을 보라색으로 변경
</script>
innerHTML = text와 html요소를 삽입하는 기능이 있다
ex)
<body>
<select name="test" id="1"></select>
<script>
const selEl = document.getElementById("1")
//id가 1인 요소 select와 변수 selEl을 연결
console.log(selEl)
//잘 연결되었는지 확인
selEl.innerHTML = `<option>test<option>`
//innerHTML로 option태그와 test라는 text 추가
</script>
</body>
innerText = innerHTML과 다르게 요소를 추가하는 기능은 없고 요소안에 text를 작성하는 기능만 있다
ex)
<p class="hello"></p>
<script>
const pEl = document.getElementsByClassName("hello")
//getElementsByClassName로 p태그와 pEl변수 연결
console.log(pEl)
//제대로 연결되었는지 확인
pEl[0].innerText = `hello world`
//hello world라는 택스트 추가
</script>
remove() : HTML요소를 삭제한다
ex)
<body>
<p id="hello">hello world</p>
<!-- id가 hello인p 태그 생성 -->
<button id="del" click="btnclick()">삭제</button>
<!-- id가 del이고, click이벤트가 btnclick()인 요소 생성 -->
<script>
const pEl = document.getElementById(`hello`)
// pEl이라는 변수에 id가 hello인 요소 연결
console.log(pEl)
// 잘 연결 되었는지 확인
const btnEl = document.getElementById(`del`)
// id가 del인 요소를 btnEl에 연결
console.log(btnEl)
//잘 연결 되었는지 확인
btnEl.addEventListener('click', function btnclick() {
pEl.remove()
})
// btnEl이라는 변수에 click이벤트 추가 1번파라미터는 추가할 event이고
// 2번파라미터는 event가 실행될때 실행될 함수데이터
</script>
</body>
---DOM 이벤트 종류 ---
DOM 이벤트를 사용할때 js파일에선 on을 따로 명시하지않는다 요소에는 명시함
click이벤트 : 요소를 클릭 했을때 event에 해당하는 내용이 출력된다
ex)
<body>
<p class="click" click="clickE();">click 이벤트</p>
<script>
const pEl = document.querySelector('.click')
// 변수 pEl에 class가 css의 선택자가 .click인 요소름 담은 코드
console.log(pEl)
// 제대로 연결 되었는지 확인
pEl.addEventListener('click', clickE = () => {
console.log(`hello world`)
})
// pEl이라는 요소에 이벤트리스너를 설정
//EventListener에 1번파라미터에는이벤트의 종류,2번파라미터 에는 실행내용을 입력함
</script>
</body>
change 이벤트 : html에 옵션이 있는요소에서 옵션이 변경되었을 때 발생하는 이벤트이다
주로 selct태그와 input에 radio,checkbox type에서 사용된다.
focus 이벤트 : 대화형 콘텐츠 즉 input요소와 같은 요소에 초점이 맞춰 졌을때 이벤트를 발생시킨다
blur 이벤트 : 대화형 콘텐츠 즉 input요소와 같은 요소에 초점이 해제 되었을 때 발생하는 이벤트이다
ex)
<body>
<label >텍스트<input type="text" class="hellow"></label>
<style>
.hellow{
outline: none;
background-color:gray;
padding: 2px 10px;
}
</style>
<script>
const inputEl = document.querySelector('.hellow')
// css선택자 .hellow로 input요소와 연결
console.log(inputEl)
// 제대로 연결되었는지확인
inputEl.addEventListener('focus',test=()=>{
return inputEl.style.backgroundColor="black"
})
// input요소가 포커스 되었을때 배경색이 검정색으로 변하는 코드
inputEl.addEventListener('blur',test2=()=>{
return inputEl.style.backgroundColor="green"
})
// input요소가 포커스가 해제 되었을때 배경색이 초록색으로 변하는 코드
</script>
</body>
scroll 이벤트 : 브라우저에서 마우스를 스크롤 했을 때 발생하는 이벤트이다
ex)
window.addEventListener('scroll', function () {
console.log(this.scrollY)
})
위 코드에서 window는 브라우저이고 브라우저가 스크롤 될때마다 스크롤된 위치를 숫자로 출력한다
DOM으로 css 스타일을 제어하는 방법
1 DOM으러 css 스타일을 제어 할 요소를 선택하여 변수에 담는다
2 변수에 담긴 요소에 style이라는 속성을 사용한후 css속성과 속성값을 명시한다 이때 css속성은 카멜표기법으로 작성 해야한다
ex)
<body>
<p class="hello">hellow</p>
<style>
.hello{
font-size: 20px;
color:red;
}
</style>
<script>
const pEl = document.querySelector('.hello')
// css의 class가 hello인 선택자를 pEl이라는 변수에 담음
console.log(pEl)
pEl.style.backgroundColor = "black"
// pEl이라는 요소에 style속성을 사용하여 CSS속성 backgroundColor 명시
// 통상적인 css라면 background-color이지만 JS에선 카멜표기법을 사용해야함
pEl.style.fontSize = "16px"
</script>
</body>'front-end 국비과정 학습일지' 카테고리의 다른 글
| front-end 국비과정 일차 24일차 학습일지 :SCSS (0) | 2022.05.12 |
|---|---|
| front-end 국비과정 일차 25일차 학습일지 JS:bundler(webpack,parcel) (0) | 2022.05.01 |
| front-end 국비과정 일차 22일차 학습일지 TypeScript: (0) | 2022.04.27 |
| front-end 국비과정 일차 21일차 학습일지 TypeScript:설치와 실행법,Type Annotation (0) | 2022.04.25 |
| front-end 국비과정 일차 20일차 학습일지: this, call(),apply(),bind() (0) | 2022.04.23 |
