Web 8일차 1-1(자바스크립트 함수)
2022. 12. 29. 11:06ㆍ코딩배움일지/Web 구현
js 컴파일 없기 때문에 할때 마다 읽어야 한다.
호이스팅
- 변수를 뒤에서 선언하지만, 마치 앞에서 미리 앞에서 선언한
것처럼 인식함
- 함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로
끌어올려 인식함
<script>
function a(){
console.log(number);
var number = 10;
}
a()
</script>undefined 뜬다.
<script>
function a(){
// var number = 10;
var number = 10;
console.log(number);
}
a()
</script>10 뜬다.
////////
//Function 1 직접적으로 명시하면 구분하기 좋다.
function func1(){
alert('func1 - 안녕하세요.');
}
func1();
// Function 2
// let, const
const func2 = () => {
alert('func2 - 안녕하세요');
}
func2();프론트엔드로는 func2; 많이쓰고 실행된다. 여기는 막혀있다. 이 형태로 많이 쓰는것을 추천합니다..
const func2 = () => () => { //콜백함수 이런 것도 한다.
alert('func2 - 안녕하세요');
}
func2();
이벤트, 이벤트 처리기
<body>
<button onclick="alert('안녕하세요');">Btn 1</button>
</body>
<input style="width: 100px;"/>
<button onclick="func1();">Btn 1</button>버튼1 을 누르면 func1 의 말이 뜬다.
id는 자바스크립트 할때 많이
class 는 css 할때 많이 쓴다.
DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결
<button id="btn1">Btn 1</button>
<input style="width: 100px;"/>
<script>
const onClickHandler = document.querySelector('#btn1');
onClickHandler.onclick = func1;
</script>버튼을 클릭하면 나오는 것은 head 가 아닌 body에 스크립트 만들기
document.querySelector('#btn1').onclick = func2;func2 실행
'코딩배움일지 > Web 구현' 카테고리의 다른 글
| Web 9일차 () (0) | 2022.12.30 |
|---|---|
| Web 8일차 2-1(자바스크립트) (0) | 2022.12.29 |
| Web 8일차 1(함수와 이벤트) (0) | 2022.12.29 |
| Web 7일차 3-1(자바스크립트 기본 문법) (0) | 2022.12.28 |
| Web 7일차 3(자바스크립트 기본 문법) (0) | 2022.12.28 |