" ✓ 특징 "
- html 문서에 내장
- 조각 소스 코드
- 스크립트 언어
- 인터프리터 실행
- 컴파일이 필요 없음
- c언어 구조 (연산자 동일)
" ✓ 위치 "
- 내부 자바스크립트 - <style></style> 내부
- 외부 자바스크립트
- 인라인 자바스크립트 - 리스너
" ✓ 이벤트 리스너 "
- onmouseover : 마우스 올림감지 리스너
- onmouseout : 마우스 내림감지 리스너
- onclick : 버튼 클릭 리스너
" ✓ 인라인 , 내부 자바스크립트 "
- 리스너를 통해 자바스크립트 연결
<head>
<script>
function click1() {
this.src="새로운 이미지.png";
}
function click2(obj) {
obj.src="새로운 이미지.png";
}
</script>
</head>
<body>
<!--1. 함수 실행방식-->
<img src="이미지1.png" alt="이미지" onmouseover="click()">
<!--2. 바로 실행방식-->
<img src="이미지2.png" alt="이미지" onmouseover="this.src='새로운 이미지.png'">
<!--3. 대상 넘겨서 실행방식-->
<img src="이미지3.png" alt="이미지" onmouseover="click2(this)">
</body>
" ✓ 외부 자바스크립트 "
- <script> 태그 없이 작성된 .js파일을 불러온다
<script src="작성된 자바스크립트.js"></script>
" ✓ 자바스크립트 기능 "
- 세미콜론(;)으로 문장 구별
- 주석으로 //, /* */ 사용
- 변수 var로 선언 (타입지정 없음!)
- document.write("출력할 내용") : void, 웹페이지에 출력 (string, 변수)
- document.writeln("출력할 내용") : void, 출력, 빈칸하나 출력(개행 아님!)
- prompt("내용을 입력하세요","") : string, 입력을 받는다
- confirm("전송할까요?") : bool, 확인 여부를 true, false로 받는다
- alert("경고!") : void, 알림창을 보여준다
" ✓ 자바스크립트 식별자 "
- 첫문자 : 알파벳, (_), $ 문자만 허용
- 두번째 이상 : 숫자도 허용
- 대소문자는 구분
- 자바스크립트 예약어 사용 불가 (if, null 등)
" ✓ 자바스크립트 데이터 타입 "
- 숫자 - 정수
- 숫자 - 실수
- 논리 - true, false
- 문자열 - "스트링" (JS는 문자 ' '타입이 없다!)
- 객체 - class (포인터 개념)
- null - 값이없음 (Null, NULL과 다름!)
" ✓ 자바스크립트 변수, 함수"
- var 로 선언
- 지역변수 : 함수내 var로 선언
- 전역변수 : 함수 밖에 var로 선언, var 없이 선언, 함수내에서 this로 접근
- 나눴을 경우 연산결과는 실수로 저장된다 (32/10 = 3.2)
- 함수 : funcrion() { }로 선언
<head>
<script>
var Var = 10;
function test() {
var Var = 5;
alert("지역변수 : " + Var + ", 전역변수 : " + this.Var)
}
</script>
</head>
<body>
<script>
test();
</script>
</body>- 8진수 : 0으로 시작 (var n = 015;)
- 16진수 : 0x로 시작 (var n = 0x15;)
- 지수 : E로 표현 (var n = 123E-3)
- Nan : 수가 아님을 뜻함
- 문자열 내 문자열 : " 스트링 안에 ' 로 표시' 한다 "
- 문자열 내 문자그대로 사용 : \를 붙여 적는다
" ✓ 자바스크립트 출력 "
- 1. document.write() : 순서상 뒤에있는 경우 기존 body에 있던 내용이 사라지고 wirte 내용만 보이게 된다
<head>
<script>
function test() {
var output = "출력내용 입니다";
document.write(output);
}
</script>
</head>
<body>
<script>
test();
</script>
</body>
- 2. HTML 태그 포함하여 출력 (문자열 내 문자열 : ' '로 구현해야 한다)
<head>
<script>
function test() {
var size = 20;
var output = "출력내용 입니다";
document.write("<p style='font-size:" + size + "px'>");
document.write(output);
document.write("</p>");
}
</script>
</head>
<body>
<script>
test();
</script>
</body>
- 3. document.getElementById("대상").innerHTML : 대상의 내용만 수정한다
※ document.getElementById("대상").value 사용하는 경우도 있다
<head>
<script>
function test() {
var output = "출력내용 입니다";
document.getElementById("target").innerHTML = output;
}
</script>
</head>
<body>
<p id="target"></p>
<script>
test();
</script>
</body>
" ✓ 자바스크립트 switch "
- case 에 상수만 가능 (수, bool, 문자열)
- case 에 변수, 식은 불가능
- break; 명시해야 한다
<script>
function test() {
var fruits="APPLE";
switch(fruits)
{
case "APPLE": alert("OK"); break;
default : alert("NO"); break;
}
}
</script>
" ✓ 자바스크립트 대표 함수 "
- eval("식") : 스트링형식으로 받은 식을 계산 후 반환해준다
<script>
function test() {
var num = eval("2*3+4*5"); //26
}
</script>
- parseInt("수") : 스트링형식으로 받은 수를 수 형식으로 변환
<script>
function test() {
var num = parseInt("26"); //26
var num = parseInt("0x32"); //16진수로 인식하여 계산 -> 50
}
</script>
- isNaN() : ()속의 내용이 숫자인이 여부를 판별, true, false 리턴
<script>
function test() {
var TrueCase = isNaN(32); //true
var FalseCase = isNaN("a"); //false
}
</script>'인터넷프로그래밍' 카테고리의 다른 글
| 중간고사 핵심키워드 정리 (0) | 2020.10.14 |
|---|---|
| CSS 요약 (0) | 2020.10.05 |
| HTML 요약 (0) | 2020.10.05 |