자바스크립트 코드의 위치
html 태그의 이벤트 리스너 속성에 작성
코드가 짧은 경우
<img scr="주소.png" alt="이미지" onmouseover="this.scr='주소'" onmouseout="this.scr='주소'">
<script></script>내 작성
script는 파일 내 어디든 들어갈 수 있으며 여러번 사용가능하다
<!DOCTYPE html>
<html>
<body>
<script>
function over(obj){
obj.src="주소";
}
function out(obj){
obj.scr="주소2";
}
</script>
<h3>마우스를 올려 보세요</h3>
<img src="주소" alt="이미지"
onmouseover="over(this)"
onmouseout="out(this)">
</body>
</html>자바스크립트 파일에 작성
확장자가 .js인 파일을 별도 저장하고 script 태그의 src 속성으로 불러와서 사용하기
이때 <script></script>사이에 코드 추가 작성 불가
<script scr="파일이름.js"></script>URL부분에 작성
<a>태그의 href 속성 내에 작성
<a href="javascript:자바스크립트 코드">링크</a>
자바스크립트로 html 콘텐츠 출력하기
자바스크립트 코드로 html 콘텐츠를 웹 페이지에 직접 삽입 가능
document.write()나 document.writeln() 사용
document.write(<h3>welcome!</h3>)웹페이지 내 코드가 실행되는 위치에서 텍스트가 출력됨
writeln은 한줄이 아니라 한칸 띄워줌
자바스크립트 다이얼로그: 사용자 입력 및 메세지 출력
프롬프트 다이얼로그, prompt("메세지", "디폴트입력값")
var ret = prompt("이름을 입력하세요", "홍서이");
//취소버튼, 다이얼로그 닫은 경우
if(ret==null){}
// 입력 없이 확인 누를경우
else if(ret==""){}
//ret에 사용자 입력 문자열
else{}
확인 다이얼로그, confirm("메세지")
확인/취소 버튼
확인은 true, 취소는 false 리턴
var ret = confirm("전송할까요?");
if(ret==true){}
else{}
경고 다이얼로그, alert("메세지")
alert("클릭함");
2. 자바스크립트 데이터 타입과 변수
자바스크립트 식별자(identifier)
자바스크립트 개발자가 자바스크립트 프로그램의 변수, 상수, 함수에 붙이는 이름을 의미
식별자 규칙
첫번째문자는 알파벳, _, $만 사용 가능
두번째 문자부터는 알파벳, _, 0~9, $ 만 사용 가능
대소문자 구분됨
예약어 사용불가
데이터타입
숫자,논리,문자열,객체 레퍼런스 타입(객체 의미), null
변수
데이터 타입 지정 안함
변수 선언
1. var로 선언(바람직)
2. 그냥 선언(안바람직)
지역변수와 전역변수
전역변수: 함수 밖에서 선언되었거나 함수 내에서 var없이 선언한 경우
지역변수: 함수 내 var로 선언
this로 전역변수 접근
지역변수와 전역변수의 이름이 같을 때 this를 이용해 접근 가능
조건 연산
//condition? expT : expF;
var x=5, y=2;
var big = (x>y)? x:y;
>>true출력문자열 연산
1+2+"abc" >> 3abc
"abc"+1+2 >> abc12
문자열 비교
사전에서 뒤에 나오는 문자열이 더 크다고 판단됨
자바스크립트의 전역 함수
eval() 함수
수식, 자바스크립트 문장을 문자열 형태로 받아서 실행한 뒤 결과 리턴
parseInt()함수
문자열을 숫자로 변환하여 리턴
isNaN함수
매개 변수의 값이 NaN이면 true 리턴
NaN: 숫자가 아님을 나타내는 상수 키워드
'학교수업 > 웹 프로그래밍' 카테고리의 다른 글
| 08. HTML DOM과 Document (0) | 2022.06.08 |
|---|---|
| 07. 자바스크립트 코어 객체와 배열 (0) | 2022.06.08 |
| 5. CSS 고급활용 (0) | 2022.06.07 |
| 4. CSS (0) | 2022.06.06 |
| 웹 프로그래밍 중간고사 복원 (0) | 2022.04.25 |