자바스크립트 1
2023.07.20~ 수업
◎ 자바스크립트
- 웹 페이지의 동작을 프로그래밍 한다
- 웹 페이지를 움직이게 하는 스크립트 언어
- HTML의 내용, CSS 등을 변경해줌
- 세미콜론(;) 생략 가능. 공백 무시. 연산자 이후 줄바꿈 가능
- 오류는 브라우저 개발자모드(콘솔)에서 확인
● 자바스크립트 삽입 위치
1) <script> 내부의 <body>안에 자손으로 삽입
2) <script> 내부의 <head>안에 자손으로 삽입
3) 외부 js문서를 HTML에 연결
<script src="hello.js"></script>
● 자바스크립트 데이터 표시 법
- innerHTML : 문서 객체에 HTML문자열을 속성값으로 삽입
- document.write() : 문서영역에 HTML로 작성하는 방식
- [window.]alert() : 창에 경고창 띄우는 방식
- console.log() : 브라우저 콘솔로 표시하는 방식
● 함수
* prompt('질문텍스트', '화면표시텍스트')
- 사용자에게 값을 입력받는 함수
- 입력받은 값은 String으로 Number(문자열)으로 명시적 형변환해주기
Number() : 입력된 값 숫자로 변경하기
* select : 선택상자
태그들을 담을 변수를 설정하고 그 변수에 select, option 태그들을 담아서 사용
let first = ['010', '011', '016', '017', '018', '019']
let output = '<select>'
for(let i in first) {
output += '<option>' + first[i] + '</option>'
}
output += '<select>'
document.write(output)* for in문(향상된 for)
- 배열이나 객체를 반복할 때 사용
for (let i in 배열명) { // 배열이 가지고 있는 인덱스번호[i]만큼 반복
// 반복할 표현식
}
for (let i in 객체명) {
// 반복할 표현식
}* function
- 함수를 선언
1) 함수타입
function 함수명(매개변수1, ...) {
// 코드집합
}
2) 변수타입
let 변수명 = function(매개변수1, ...) {
// 코드집합
}- 함수호출
함수명(매개변수1,...);
* 리턴(return)
- 값을 반환
function 함수명(매개변수) {
return 매개변수를 활용한 수식 혹은 값;
}
* confirm(값)
- 매개변수에 작성된 값을 브라우저 창에 띄워줌
- 확인을 누르면 true, 취소를 누르면 false를 반환
* 타이머함수
setTimeOut(콜백함수, 시간); : 일정 시간 후 콜백함수(혹은 함수)를 한번 실행. 시간이 지나고 함수 내용을 보여줌
setInterval(콜백함수, 시간); : 일정 시간마다 콜백함수를 반복해서 실행.
clearTimeOut(해당변수); : 일정 시간 후 함수를 한번 실행하는 것을 중지
clearInterval(해당변수); : 일정 시간마다 함수를 반복하는 것을 중단. setInterval을 중단하는데 활
- 콜백함수 : 함수의 매개변수에 데이터유형을 함수로 쓰는 것
- 시간은 1초가 1000