728x90
SMALL
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="btn-alert">click</button>
<script>
var btn = document.getElementById('btn-alert');
btn.onclick = () => {
alert('마우스 클림됨.');
};
</script>
</body>
</html>
dom에서 btn-alert라는 id의 dom을 찾음
btn.addEventListener('click', onClickHandler);
function onClickHandler() {
alert('마우스 클릭!!');
}람다식에 익숙치 않으면. 이게 더 이해간다고
var name; //함수레벨 스코프
let name1 = 'abc'; //변수 선언 방법
const name2 = 'abc'; //final (변경 불가능 - 상수)
//선언 - 식별자를 등록
//초기화단계 - 값을 위한 공간을 할당하고 식별자랑 연결함.초기화 하지않았다면 undefined
console.log(name1);
console.log(name2);
//식별자(identifier)
//변수
//함수
//클래스
//식별자 - 실행 컨텍스트에 등록됨
//특수문자 제외한 숫자, 문자, 언더스코어(_), 달러 기호 가능
//숫자로 식별자 이름 시작은 불가능, 예약어 사용 불가능
자바스크립트는 동적타이핑
1.값을 보고 타입추론
2.언제든 식별자의 값이 변경될 수 있음
const obj = {
abc: 'abc'
}
//멤버 접근 연산자(.)
console.log(obj.abc);
//계산된 멤버 접근 연산자([]) computed member access operator
console.log(obj['abc'])
obj['alpha'] = 'a'
obj['beta'] = 'b'
console.log(obj)
const obj1 = {
abc : 'abc'
}
const obj2 = {
abc : 'abc'
}
console.log(obj1==obj2)abc
abc
{ abc: 'abc', alpha: 'a', beta: 'b' }
false
제어문
const a = 10
if ( a> 5) {
console.log('a가 5보다 큽니다.')
}
for (var i = 0; i< 10; i++) {
console.log(`${i+1}번째 출력.`)
}1번째 출력.
2번째 출력.
3번째 출력.
4번째 출력.
5번째 출력.
6번째 출력.
7번째 출력.
8번째 출력.
9번째 출력.
10번째 출력.
- for-in
const obj = {
good: '감자',
number : 10,
arr : [1,2,3]
}
for (p in obj) {
console.log(obj[p])
}감자
10
[ 1, 2, 3 ]
- for-of
const obj = ['감자', 10, [1,2,3]]
for (value of obj) {
console.log(value)
}감자
10
[ 1, 2, 3 ]
728x90
LIST
'Front > Javascript·Jquery' 카테고리의 다른 글
| 화면구현TEST (0) | 2020.12.10 |
|---|---|
| filter (0) | 2020.11.30 |
| 20201113_ 35 노드2 (0) | 2020.11.13 |
| 20201113_ 35 클로저.. (0) | 2020.11.13 |
| 20201113_35 노드생성 (0) | 2020.11.13 |
댓글