chat1, chat2
첫주 쉽지 않다.. J가 되.
용어 노트로 클래스카드를 만들었답.
끝까지 달려보잡..!
error massege
- RefrenceError // 예외처리
Uncaught RefenceError : ___ is not defined
// ___부분을 잘못입력함.
- SyntaxError // 구문오류
Uncaught SyntaxError : Invalid or unexpected token
// ""따옴표 안 닫힘.
Uncaught SyntaxError : missing ) after argument list
// ()괄호 안닫힘
표현식과 문자
표현식 : 값을 만들어내는 간단한 코드
문장 : 하나 이상의 표현식이 모인 것
키워드
자바스크립트에서 특정한 목적을 위해 사용하는 단어이다.
- 문법 상 어떤 역할을 하는 단어들이라고 이해하면 편하다.
- 이런 키워드들은 전부 예약어로 지정되어 있다.
식별자
- 키워드를 사용X
- 숫자로 시작X
- 특수 문자는 _와 $만 O
- 공백 문자는 포함X
클래스 : 대문자로 시작
변수, 인스턴스, 함수, 메소드 : 소문자로 시작
식별자 : 각 단어의 첫글자 대문자
식별자 종류
| 구분 | 단독으로 사용 | 다른 식별자와 사용 |
| 식별자 뒤에 괄호 없음 | 변수 | 속성 |
| 식별자 뒤에 괄호 있음 | 함수 | 메소드 |
주석
html 태그 주석
<!-- 주석 -->
자바스크립트 주석
// 주석
/* 주석 */
출력
- google console
*간단한 연산식만 가능
> 10
10
> 10 + 10
20
> 10 * 10
100
- 경고창에 출력
<script>
alert('Hello JavaScript...!')
</script>- 콘솔에 출력
<script>
console.log('Hello JavaScript...!')
</script>
chat2 자료와 변수
문자열 자료형
문자열 만들기
> '안녕하세요'
"안녕하세요" // 문자열이라 " "
> "안녕하세요"
"안녕하세요"\n : 줄바꿈
\t : 탭
\\ : \
문자열 연산자
문자열 + 문자열 - > 문자열 연결 연산자
문장열[ 숫자 ] -> 문자 선택 연산자 // 숫자 = 문자 인덱스칸
문자열 길이 구하기
> "안녕하세요".length
5
> "".length
0 // 빈 문자열도 문자열
- Uncaught SystaxError: Unexpected identifier // 식별자 위치가 이상함
Uncaught SystaxError: Unexpected identifier
식별자가 뜬금없는 곳에서 나옴
숫자 자료형
소수점 유무 관계X
숫자 연산자
| 연산자 | 설명 |
| + | 더하기 연산자 |
| - | 빼기 연산자 |
| * | 곱하기 연산자 |
| / | 나누기 연산자 |
| % | 나머지 연산자 |
boolean 자료형
boolean 만들기
true, false
비교 연산자
| 연산자 | 설명 |
| === | 양쪽이 같다. |
| !== | 양쪽이 다르다. |
| > | 왼쪽이 더 크다. |
| < | 오른쪽이 더 크다. |
| >= | 왼쪽이 더 크거나 같다. |
| <= | 오른쪽이 더 크거나 같다. |
부정 연산자
> !true
false
> !false
true
boolean 논리합/ 논리곱 연산자
| 연산자 | 설명 |
| && | 논리곱 연산자 |
| || | 논리합 연산자 |
- &&연산자
| 좌변 | 우변 | 결과 |
| true | false | true |
| true | false | false |
| false | true | false |
| false | true | false |
- || 연산자
| 좌변 | 우변 | 결과 |
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |
자료형 검사
typeof(자료)
> typeof('문자열')
"string"
> typeof(273)
"number"
> typeof(true)
"boolean"
> typeof '문자열'
"string"
> typeof 273
"number
> typeof 10 === 'number'
True
== / !== 연산자
> 1 == "1" // 자료형은 달라도 변환하면 같음
true
> false == "0" // false가 0으로, "0"으로 변환된 뒤 비교
true
> "" == [] // 빈 문자열은 false, 비어이는 배열 []는 false로 변환된 뒤 비교처리
true
> 0 == [] // 0은 false, 비어있는 배열 []는 false로 변환된 뒤에 비교합니다.
true
상수
상수 : 어떠한 자료에 이름 붙인다. '항상 같은 수'
선언 : 상수를 만드는 과정
const 이름 = 값
> const pi = 3.141592
undefind
> pi
3.141592
> const r = 10
undefind
> 2 * pi * r // 반지름으로 원의 둘레
62.83184
> pi * r * r // 반지름으로 원의 넓이
314.1592
- Identifier has already declared // 같은 이름으로 상수 한 번 더 선언 함.
Uncaught SyntaxError: Identifier 'name' has already been declared
'name' 이 두번 선언 되었음 - Missing initializer in const declaration // 상수의 값을 선언할 때 지정 안함
Uncaught SyntaxError: Missing initializer in const declaration
상수 선언 할 때 값 지정 안함 - Assignment to constant variable // 선언된 상수의 값을 바꿀 수 없음
TypeError: Assignment to constant variable.
선언된 상수 값을 또 변경 했음
변수
let 이름 = 값
> let pi = 3.141592
undefind
> pi
3.141592
> let r = 10
undefind
> 2 * pi * r // 반지름으로 원의 둘레
62.83184
> pi * r * r // 반지름으로 원의 넓이
314.1592변수 의 값을 변경
변수 = 값
> let g = 9.8 // 중력 가속도
undefined
> let m = 10 // 질량
undefined
> m * g // 힘
98
> g1 = 9.80665 // 변수 값 변경
9.80665
- ldentifier has already been declared // 변수는 한 파일에서 한 번만 선언 할 수 있음
Uncaught SyntaxError: Idenrifier 'name' has already been declared
같은 이름으로 변수 또 선언
변수에 적용할 수 있는 연산자
복합 대입 연산자
| 복합 대입 연산자 | 설명 | 사용 예 | 의미 |
| += | 기존 변수의 값에 값을 더합니다. | a += 1 | a = a+1 |
| -= | 기본 변수의 값에 값을 뺍니다. | a -= 1 | a = a-1 |
| *= | 기본 변수의 값에 값을 곱합니다. | a *= 1 | a = a*1 |
| /= | 기본 변수의 값에 값을 나눕니다. | a /= 1 | a = a/1 |
| %= | 기본 변수의 값에 나머지를 구합니다. | a %= 1 | a = a%1 |
<script>
// 변수를 선언합니다.
let list = ''
// 연산자를 사용합니다.
list += '<ul>'
list += ' <li>Hello</li>'
list += ' <li>JavaScript..!</li>'
list += '</ul>'
// 문서에 출력합니다.
document.write(list)
// 결과
// Hello
// JavaScript..!
</script>
증감 연산자
| 증감 연산자 | 설명 |
| 변수++ | 기존의 변수 값에 1을 더합니다(후위). |
| ++ 변수 | 기존의 변수 값에 1을 더합니다(전위). |
| 변수-- | 기존의 변수 값에 1을 뺍니다(후위) . |
| --변수 | 기존의 변수 값에 1을 뺍니다(전위). |
Undefined 자료형
// 상수와 변수로 선언하지 않은 식별자
> typeof(abc)
"undefined"
> typeof(그냥식별자)
"undefined"
// 값이 없는 변수
> let a
undefined
> typeof(a)
"undefined"
문자열 입력
prompt(메시지 문자열, 기본 입력 문자열)
<html>
<head>
<title>prompt() 함수 매개변수의 역할</title>
</head>
<body>
<script>
// 상수를 선언합니다.
const input = prompt('message', '_default')
// 출력합니다.
alert(input)
</script>
</head>
</html>
boolean 입력
confirm(메세지 문자열)
<html>
<head>
<title>confirm() 함수의 사용</title>
</head>
<body>
<script>
// 상수를 선언합니다.
const input = confirm('수락하시겠습니까?')
// 출력합니다.
alert(input)
</script>
</head>
</html>
숫자 자료형으로 변환하기
Number(자료)
> Number("273")
273
> typeof(Number("273"))
"number" // 자료형 숫자
> Number("273")
NaN // 값은 숫자X
> typeof(Number("273")
"number" // 자료형 숫자
> Number(true)
1
> Number(flase)
0
문자열 자료형으로 변환하기
String(자료)
> String(52.273) // 슷자 자료형이 문자열 자료형으로 변환됩니다.
"52.723"
> Strind(true) // boolean 자료형이 문자열 자료형으로 변환합니다.
"true"
> String(flase)
"flase"
Boolean 자료형으로 변환하기
Boolean(자료)
> Boolean(0)
false
> Booleasn(NaN)
false
> Boolean("")
false
> Boolean(null)
false
> let 변수
undefined
> Boolean(변수)
false
기본 미션
p. 54의 <파일 만들고 저장해 실행하기>에서 'Hello World' 출력하기
선택미션
Ch.01(01-1) 확인 문제 1번 상세하게 적고 인증하기
- 구글 = 검색, 구글 맵, G메일, 번역, 클래스룸, 구글 드라이브, 등..
- 인스타그램 = 이미지 및 동영상 업로드 기능, 스토리 기능, 릴스, 무한 스크롤 피드, DM(다이렉트 메시지) 및 소셜 기능, 등..
- notion = 페이지 생성 및 편집, 데이터베이스 기능, 템플릿 지원, 협업 및 공유 기능, 다른 도구와의 통합, 등..
- 네이버 = 검색 포털 서비스, 네이버 지도, 네이버 메일, 네이버 블로그 및 카페, 네이버 페이(Naver Pay), 등..
- Microsoft Edge = 웹 탐색 및 검색, 컬렉션 기능, 탭 관리, 읽기 모드 및 음성 읽기, 보안 및 개인정보 보호, 등..
'13기 혼공단(js)' 카테고리의 다른 글
| [혼공JS] 5주차 (1) | 2025.02.16 |
|---|---|
| [혼공JS] 4주차 (0) | 2025.02.09 |
| [혼공JS] 3주차 (0) | 2025.01.24 |
| [혼공JS] 2주차 (0) | 2025.01.19 |