[22강 for-of 와 for-in]
1.for-in문 : 객체에 주로 사용한다.
documentObj 객체에 있는 속성(Property)들의 key를 받아오겠다는 의미
2.for-of문 : 배열에 많이 사용한다.
3.display값을 ‘flex’로 변경 시, 값을 나타나게 할 수 있다.
| 24강 setInterval (0) | 2023.01.24 |
|---|---|
| 23강 반복문을 사용한 텍스트 갱신 (0) | 2023.01.24 |
| 21강 반복문을 활용한 날짜 데이터 리팩토링 (0) | 2023.01.23 |
| 20강 for문과 while문 (0) | 2023.01.23 |
| 19강 반복문 (0) | 2023.01.23 |
[21강 반복문을 활용한 날짜 데이터 리팩토링]
1.Object.keys ( ) 메서드 : 선택한 객체의 속성(key)만 선택해서 불러오는 기능
*Object.keys ( ) 메서드 추가내용 참고 :
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
| 23강 반복문을 사용한 텍스트 갱신 (0) | 2023.01.24 |
|---|---|
| 22강 for-of 와 for-in (0) | 2023.01.23 |
| 20강 for문과 while문 (0) | 2023.01.23 |
| 19강 반복문 (0) | 2023.01.23 |
| 18강 JS로 HTML, CSS 조작 (0) | 2023.01.23 |
[20강 for문과 while문]
1.for문
2.while문
- while문의 경우, 최초식이 바깥에 작성되어야 한다.
- 조건식하나만 소괄호에 들어간다. 증감문은 중괄호 사이에 들어간다.
1) while문 유의사항 : 종료 조건을 제대로 설정하지 않으면 무한 반복된다.
| 22강 for-of 와 for-in (0) | 2023.01.23 |
|---|---|
| 21강 반복문을 활용한 날짜 데이터 리팩토링 (0) | 2023.01.23 |
| 19강 반복문 (0) | 2023.01.23 |
| 18강 JS로 HTML, CSS 조작 (0) | 2023.01.23 |
| 17강 스크립트 태그의 위치 (0) | 2023.01.23 |
[19강 반복문]
1.반복문 : 반복적인 코드의 양을 획기적으로 압축
2.for문 : 구문작성법 > (최초식; 조건식; 증감문) {반복실행할 코드}
For(let i = 0; i < 10; i = i + 1) {
console.log(i)
}
| 21강 반복문을 활용한 날짜 데이터 리팩토링 (0) | 2023.01.23 |
|---|---|
| 20강 for문과 while문 (0) | 2023.01.23 |
| 18강 JS로 HTML, CSS 조작 (0) | 2023.01.23 |
| 17강 스크립트 태그의 위치 (0) | 2023.01.23 |
| 16강 조건에 따른 메시지 출력 (0) | 2023.01.23 |
[18강 JS로 HTML, CSS 조작]
1.style 명령어는 CSS 스타일 속성을 변경시킬 수 있다.
2.innerHTML : 해당하는 태그 안쪽에 직접 html자체를 입력해줄 수 있는 기능 혹은 속성
3.html 본문에서 특정 요소를 가져올 때 사용할 수 있는 기능 2가지
- getElementById(‘min’) : ID값만 가져올 수 있는 기능 > #입력하지 않아도 된다
- querySelector(‘#min’)
4.브라켓 노테이션 (*bracket Notaion) : 객체에서 속성값을 가져올 때, [ ] 브라켓을 사용하며, 브라켓 내부에 반드시 따옴표 입력 필수!
| 20강 for문과 while문 (0) | 2023.01.23 |
|---|---|
| 19강 반복문 (0) | 2023.01.23 |
| 17강 스크립트 태그의 위치 (0) | 2023.01.23 |
| 16강 조건에 따른 메시지 출력 (0) | 2023.01.23 |
| 15강 조건문과 논리연산자 (0) | 2023.01.23 |
[17강 스크립트 태그의 위치]
1.반복문 : 반복적인 코드의 양을 획기적으로 압축해주는 문법
.textContent : 해당 태그에 텍스트를 직접적으로 추가해줄 수 있는 기능
2.브라우저가 html 문서를 읽어가는 순서 : 위에서부터 한줄 한줄 내려오게 된다.
그때 브라우저가 script 태그를 만나게 되면, html 파일을 해석(*파싱)하는 과정을 중단하고
자바스크립트 파일을 먼저 해석한다. 해당 파일을 다 해석한 이후에 다시 html을 해석하게 된다.
이때, 해당 문제점을 해결할 수 있는 방법 2가지!
- 자바스크립트 태그를 <body>태그의 가장 마지막으로 이동
- 자바스크립트 태그 안에 defer(*디퍼)를 입력 (*script 태그 해석하면서 동시에 html 파일 해석)
| 19강 반복문 (0) | 2023.01.23 |
|---|---|
| 18강 JS로 HTML, CSS 조작 (0) | 2023.01.23 |
| 16강 조건에 따른 메시지 출력 (0) | 2023.01.23 |
| 15강 조건문과 논리연산자 (0) | 2023.01.23 |
| 14강 배열과 객체의 비교 (0) | 2023.01.23 |
[16강 조건에 따른 메시지 출력]
*자바스크립트에서 NaN값을 판별할 때에는 비교연산자가 통하지 않는다.
주어진 값이 NaN인지 아닌지 판별하는 함수는 따로 존재.
자바스크립트 안에 내장되어 있는 isNaN( ) 이라는 함수 사용가능.
>추가 :
CSS에서 가로축을 중심으로 정렬할 때, justify-content 활용
CSS에서 세로축을 중심으로 정렬할 때, align-items 활용
| 18강 JS로 HTML, CSS 조작 (0) | 2023.01.23 |
|---|---|
| 17강 스크립트 태그의 위치 (0) | 2023.01.23 |
| 15강 조건문과 논리연산자 (0) | 2023.01.23 |
| 14강 배열과 객체의 비교 (0) | 2023.01.23 |
| 13강 비교 연산자 (0) | 2023.01.22 |
[15강 조건문과 논리연산자]
1.조건문 : 로직의 실행 분기점 (*true or false)
2.if문 : if( ) > 소괄호 안에 조건식 입력 / 소괄호 안에 조건식 통과 시, true 반환
- if( true ) { 조건이 성립하면 실행되는 코드 } > true라면, 조건 성립
(*닷노테이션 : 객체에서 property=속성값을 가져오고자 할 때, 객체 뒤에 “.속성”을 입력!)
(ex. const obj = {name : ‘Jason’}; / obj.name)
3.if else문 : 코드를 skip하는 것이 아니라, 또 다른 코드를 실행한다
4.else if문 : if문 이후에 한 번 더 조건문을 확인하는 코드
5.논리연산자 : && ||
- && : AND연산자 => 양쪽에 위치한 조건을 모두 만족하는 경우, true
- || : OR연산자 => 양쪽에 위한 조건 중, 하나라도 만족하는 경우, true
| 17강 스크립트 태그의 위치 (0) | 2023.01.23 |
|---|---|
| 16강 조건에 따른 메시지 출력 (0) | 2023.01.23 |
| 14강 배열과 객체의 비교 (0) | 2023.01.23 |
| 13강 비교 연산자 (0) | 2023.01.22 |
| 12강 localhost란? (0) | 2023.01.13 |
[14강 배열과 객체의 비교]
1.자바스크립트의 데이터 타입 분류 :
- 원시타입 (Primitive type) : String / Number / Boolean / Bigint / Undefined / Symbol / Null
> 특징 : 불변성 (*데이터 변화 無)
- 참조타입 (Reference type) : 원시타입 외 모든 것을 의미
| 16강 조건에 따른 메시지 출력 (0) | 2023.01.23 |
|---|---|
| 15강 조건문과 논리연산자 (0) | 2023.01.23 |
| 13강 비교 연산자 (0) | 2023.01.22 |
| 12강 localhost란? (0) | 2023.01.13 |
| 11강 함수 선언의 종류 (0) | 2023.01.13 |
[13강 비교 연산자]
1.비교 연산자의 정의 : 자바스크립트의 데이터를 서로 비교
- “===” : 서로 같은지 확인해주는 비교 연산자 (ex. “abc” === “abc” / true or false)
- “==” : 느슨한 비교 / “===” : 엄격한 비교
- 1 == “1” > false가 맞으나, 느슨한 비교에서는 true로 나타남.
- 0 == "0” > 느슨한 비교에서는 true로 나타남.
- 0 == [ ] > 숫자 “0”과 빈배열 비교시에도 true가 나타남. (*느슨한 비교의 문제)
- "0” == [ ] > 논리전개상 true가 나와야할 것 같지만, false로 나타남 (*예측 불가)
| 15강 조건문과 논리연산자 (0) | 2023.01.23 |
|---|---|
| 14강 배열과 객체의 비교 (0) | 2023.01.23 |
| 12강 localhost란? (0) | 2023.01.13 |
| 11강 함수 선언의 종류 (0) | 2023.01.13 |
| 9강 날짜를 생성하는 new Date (0) | 2023.01.13 |