콘텐츠 프로그램 코드를 참조하는
스크립트 블록을 만듭니다.
<스크립트 언어="자바스크립트">
JavaScript 코드는 여기에 작성됩니다.
</script>
2 스크립트 코드 숨기기
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
document.write("안녕하세요");
// -->
</script>
JavaScript 3을 지원하지 않는 브라우저에서는 해당 코드가 실행되지 않습니다.
해당 브라우저가 지원하지 않는 경우 표시됩니다.
참조 콘텐츠 프로그램 코드
<스크립트>
JavaScript가 아닌 브라우저에 오신 것을 환영합니다.
</noscript>
4 외부 스크립트 파일 링크
참조 콘텐츠 프로그램 코드
<script 언어="JavaScript" src="/"filename.js""></script>
5개 댓글 스크립트
참조 콘텐츠 프로그램 코드
//댓글입니다
document.write("안녕하세요"); // 주석입니다.
/*
이 모든 것
댓글입니다
*/
6 브라우저로 출력
참조 콘텐츠 프로그램 코드
document.write(“<strong>안녕하세요</strong>”)
7 변수 정의
참조 콘텐츠 프로그램 코드
var myVariable = "일부 값";
8 문자열 추가
참조 콘텐츠 프로그램 코드
var myString = "String1" + "String2";
9 문자열 검색
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
var myVariable = “안녕하세요”;
var therePlace = myVariable.search("there");
document.write(therePlace);
// -->
</script>
10 문자열 교체
참조 콘텐츠 프로그램 코드
thisVar.replace(“월요일”,”금요일”)
11 형식 문자열
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
var myVariable = “안녕하세요”;
document.write(myVariable.big() + “<br>”);
document.write(myVariable.blink() + “<br>”);
document.write(myVariable.bold() + “<br>”);
document.write(myVariable.fixed() + “<br>”);
document.write(myVariable.fontcolor("빨간색") + "<br>");
document.write(myVariable.fontsize(“18pt”) + “<br>”);
document.write(myVariable.italics() + “<br>”);
document.write(myVariable.small() + “<br>”);
document.write(myVariable.strike() + “<br>”);
document.write(myVariable.sub() + “<br>”);
document.write(myVariable.sup() + “<br>”);
document.write(myVariable.toLowerCase() + “<br>”);
document.write(myVariable.toUpperCase() + “<br>”);
var firstString = "내 문자열";
var finalString = firstString.bold().toLowerCase().fontcolor("red");
// -->
</script>
12 배열 생성
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
var myArray = new Array(5);
myArray[0] = "첫 번째 항목";
myArray[1] = “두 번째 항목”;
myArray[2] = “세 번째 항목”;
myArray[3] = “네 번째 항목”;
myArray[4] = “다섯 번째 항목”;
var anotherArray = new Array("첫 번째 항목","두 번째 항목","세 번째 항목","네 번째 항목","다섯 번째 항목");
// -->
</script>
13 배열 정렬
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
var myArray = new Array(5);
myArray[0] = "z";
myArray[1] = "c";
myArray[2] = "d";
myArray[3] = "a";
myArray[4] = "q";
document.write(myArray.sort());
// -->
</script>
14 분할 문자열
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
var myVariable = "a,b,c,d";
var stringArray = myVariable.split(",");
document.write(stringArray[0]);
document.write(stringArray[1]);
document.write(stringArray[2]);
document.write(stringArray[3]);
// -->
</script>
15 팝업 경고 메시지
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
window.alert("안녕하세요");
// -->
</script>
16 팝업 확인 상자
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
var result = window.confirm(“계속하려면 확인을 클릭하세요.”);
// -->
</script>
17 사용자 정의 함수
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
<!--
함수 배수(숫자1,숫자2) {
var 결과 = 숫자1 * 숫자2;
결과 반환;
}
// -->
</script>
18 JS 함수 호출
참조 콘텐츠 프로그램 코드
<a href=”#” onClick=”functionName()”>링크 텍스트</a>
<a href="/”javascript:functionName"()”>링크 텍스트</a>
19 페이지가 로드된 후 함수 실행
참조 콘텐츠 프로그램 코드
<body onLoad="functionName();">
페이지 본문
</body>
20 조건부 판단
참조 콘텐츠 프로그램 코드
<스크립트>
<!--
var userChoice = window.confirm(“확인 또는 취소를 선택하세요”);
var 결과 = (userChoice == true) ? “확인” : “취소”;
document.write(결과);
// -->
</script>
21 루프 수 지정
참조 콘텐츠 프로그램 코드
<스크립트>
<!--
var myArray = new Array(3);
myArray[0] = "항목 0";
myArray[1] = "항목 1";
myArray[2] = "항목 2";
for (i = 0; i < myArray.length; i++) {
document.write(myArray[i] + “<br>”);
}
// -->
</script>
22 향후 실행 설정
참조 콘텐츠 프로그램 코드
<스크립트>
<!--
함수 안녕하세요() {
window.alert("안녕하세요");
}
window.setTimeout("hello()",5000);
// -->
</script>
23 예약 실행 기능
참조 콘텐츠 프로그램 코드
<스크립트>
<!--
함수 안녕하세요() {
window.alert("안녕하세요");
window.setTimeout("hello()",5000);
}
window.setTimeout("hello()",5000);
// -->
</script>
24 예약된 실행 취소
참조 콘텐츠 프로그램 코드
<스크립트>
<!--
함수 안녕하세요() {
window.alert("안녕하세요");
}
var myTimeout = window.setTimeout("hello()",5000);
window.clearTimeout(myTimeout);
// -->
</script>
25 페이지가 언로드될 때 함수 실행
참조 콘텐츠 프로그램 코드
<body onUnload="functionName();">
페이지 본문
</body>
자바스크립트는 이렇습니다 2: 브라우저 출력
26 문서 객체에 접근
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var myURL = document.URL;
window.alert(myURL);
</script>
27 HTML을 동적으로 출력
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
document.write("<p>이 문서에 대한 정보는 다음과 같습니다:</p>");
document.write(“<ul>”);
document.write(“<li>문서 참조: “ + document.referrer + “</li>”);
document.write(“<li>도메인: “ + document.domain + “</li>”);
document.write(“<li>URL: “ + document.URL + “</li>”);
document.write(“</ul>”);
</script>
28 개행 출력
참조 콘텐츠 프로그램 코드
document.writeln("<strong>a</strong>");
document.writeln(“b”)
29 출력 날짜
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var thisDate = new Date();
document.write(thisDate.toString());
</script>
30 날짜의 시간대를 지정합니다
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var myOffset = -2;
var currentDate = 새로운 날짜();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“중부 유럽의 시간과 날짜는 다음과 같습니다: “ + currentDate.toLocaleString());
</script>
31 날짜 출력 형식 설정
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var thisDate = new Date();
var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
document.write(thisTimeString + “ on “ + thisDateString);
</script>
32 URL 매개변수 읽기
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var urlParts = document.URL.split("?");
var parameterParts = urlParts[1].split(“&”);
for (i = 0; i <parameterParts.length; i++) {
var pairParts = 매개변수Parts[i].split(“=");
var pairName = pairParts[0];
var pairValue = pairParts[1];
document.write(pairName + " : " +pairValue );
}
</script>
아직도 HTML이 상태 비저장(stateless)이라고 생각하시나요?
33 새 문서 개체 열기
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
함수 newDocument() {
document.open();
document.write(“<p>새 문서입니다.</p>”);
document.close();
}
</script>
34페이지 점프
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
window.location = “http://www.x-force.cn/”;
</script>
35 웹 페이지 로딩 진행 창 추가
참조 콘텐츠 프로그램 코드
<html>
<머리>
<스크립트 언어='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</script>
<title>메인 페이지</title>
</head>
<body onLoad='placeHolder.close()'>
<p>메인페이지입니다</p>
</body>
</html>
이것이 JavaScript 3의 경우입니다: 이미지
36 이미지 속성 읽기
참조 콘텐츠 프로그램 코드
<img src="/”image1.jpg"” name="myImage">
<a href=”# ” onClick=”window.alert(document.myImage.width)”>너비</a>
37 동적으로 이미지 로드
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
myImage = 새 이미지;
myImage.src = “Tellers1.jpg”;
</script>
38 간단한 이미지 교체
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
RollImage = 새 이미지;
RollImage.src = “rollImage1.jpg”;
defaultImage = 새 이미지;
defaultImage.src = “image1.jpg”;
</script>
<a href="/"myUrl"" onMouseOver="document.myImage.src = RollImage.src;"
onMouseOut=”document.myImage.src = defaultImage.src;”>
<img src="/"image1.jpg"" name="myImage" width=100 height=100 border=0>
39 이미지 무작위 표시
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var imageList = 새 배열;
imageList[0] = "image1.jpg";
imageList[1] = "image2.jpg";
imageList[2] = "image3.jpg";
imageList[3] = "image4.jpg";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<img src="' + imageList[imageChoice] + '">');
</script>
40 함수로 구현된 이미지 교체
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var 소스 = 0;
var 교체 = 1;
함수 createRollOver(originalImage,replacementImage) {
var imageArray = 새 배열;
imageArray[source] = 새 이미지;
imageArray[source].src = 원본이미지;
imageArray[replacement] = 새 이미지;
imageArray[replacement].src = replacementImage;
imageArray를 반환합니다.
}
var RollImage = createRollOver("image1.jpg","rollImage1.jpg");
</script>
<a href=”#” onMouseOver=”document.myImage1.src = RollImage1[replacement].src;”
onMouseOut=”document.myImage1.src = RollImage1[source].src;”>
<img src="/"image1.jpg"" 너비=100 name="myImage1" 테두리=0>
</a>
41 슬라이드쇼 만들기
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var imageList = 새 배열;
imageList[0] = 새 이미지;
imageList[0].src = “image1.jpg”;
imageList[1] = 새 이미지;
imageList[1].src = “image2.jpg”;
imageList[2] = 새 이미지;
imageList[2].src = “image3.jpg”;
imageList[3] = 새 이미지;
imageList[3].src = “image4.jpg”;
함수 슬라이드쇼(이미지번호) {
document.slideShow.src = imageList[imageNumber].src;
이미지번호 += 1;
if (imageNumber < imageList.length) {
window.setTimeout("slideShow(" + imageNumber + ")",3000);
}
}
</script>
</head>
<body onLoad="슬라이드쇼(0)">
<img src="/”image1.jpg"” width=100 name=”slideShow”>
무작위 광고 이미지 42개
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var imageList = 새 배열;
imageList[0] = "image1.jpg";
imageList[1] = "image2.jpg";
imageList[2] = "image3.jpg";
imageList[3] = "image4.jpg";
var urlList = 새 배열;
urlList[0] = "http://some.host/";
urlList[1] = "http://another.host/";
urlList[2] = "http://somewhere.else/";
urlList[3] = "http://right.here/";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<a href="' + urlList[imageChoice] + '"><img src="' + imageList[imageChoice] + '"></a>');
</script>
43 양식 구성은
여기까지입니다.
참조 콘텐츠 프로그램 코드
<양식 방법=”게시” 작업=”target.html” 이름=”thisForm”>
<입력 유형=”텍스트” 이름=”myText”>
<선택 이름="mySelect">
<option value="1">첫 번째 선택</option>
<옵션 값=”2”>두 번째 선택</option>
</select>
<br>
<입력 유형=”제출” 값=”제출”>
</form>
44 양식의 텍스트 상자 내용에 액세스
참조 콘텐츠 프로그램 코드
<양식 이름="myForm">
<입력 유형=”텍스트” 이름=”myText”>
</form>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>텍스트 필드 확인</a>
45 텍스트 상자 내용을 동적으로 복사합니다.
참조 콘텐츠 프로그램 코드
<양식 이름="myForm">
텍스트를 입력하세요: <input type=”text” name=”myText”><br>
텍스트 복사: <입력 유형=”텍스트” 이름=”copyText”>
</form>
<a href=”#” onClick=”document.myForm.copyText.value =
document.myForm.myText.value;”>텍스트 필드 복사</a>
46 텍스트 상자의 변경 사항 감지
참조 콘텐츠 프로그램 코드
<양식 이름="myForm">
텍스트를 입력하세요: <input type=”text” name=”myText” onChange=”alert(this.value);”>
</form>
47 선택한 Select에 액세스
참조 콘텐츠 프로그램 코드
<양식 이름="myForm">
<선택 이름="mySelect">
<옵션 값=”첫 번째 선택”>1</option>
<옵션 값=”두 번째 선택”>2</option>
<옵션 값=”세 번째 선택”>3</option>
</select>
</form>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>선택 목록 확인</a>
48 선택 항목을 동적으로 추가
참조 콘텐츠 프로그램 코드
<양식 이름="myForm">
<선택 이름="mySelect">
<옵션 값=”첫 번째 선택”>1</option>
<옵션 값=”두 번째 선택”>2</option>
</select>
</form>
<스크립트 언어="자바스크립트">
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “세 번째 선택”;
</script>
49 양식 필드 유효성 검사
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
함수 checkField(필드) {
if (field.value == "") {
window.alert("입력란에 값을 입력해야 합니다.");
field.focus();
}
}
</script>
<form name="myForm" action="target.html">
텍스트 필드: <input type="text" name="myField" onBlur="checkField(this)">
<br><입력 유형=”제출”>
</form>
50 선택 항목 확인
참조 콘텐츠 프로그램 코드
함수 checkList(선택) {
if (선택.길이 == 0) {
window.alert("목록에서 선택해야 합니다.");
거짓을 반환;
}
사실을 반환;
}
51 양식의 동작을 동적으로 변경합니다.
참조 콘텐츠 프로그램 코드
<form name="myForm" action="login.html">
사용자 이름: <입력 유형=”텍스트” 이름=”사용자 이름”><br>
비밀번호: <입력 유형=”비밀번호” 이름=”비밀번호”><br>
<입력 유형=”버튼” 값=”로그인” onClick=”this.form.submit();”>
<input type="button" value="등록" onClick="this.form.action = 'register.html'; this.form.submit();">
<input type="button" value="비밀번호 검색" onClick="this.form.action = 'password.html'; this.form.submit();">
</form>
52 이미지 버튼 사용하기
참조 콘텐츠 프로그램 코드
<form name="myForm" action="login.html">
사용자 이름: <입력 유형=”텍스트” 이름=”사용자 이름”><br>
비밀번호: <입력 유형=”비밀번호” 이름=”비밀번호”><br>
<input type="image" src="/"login.gif"" value="로그인">
</form>
53 양식 데이터 암호화
참조 콘텐츠 프로그램 코드
<SCRIPT LANGUAGE='자바스크립트'>
<!--
함수 암호화(항목) {
var newItem = '';
for (i=0; i < item.length; i++) {
newItem += item.charCodeAt(i) + '.';
}
새로운 항목을 반환;
}
함수 encryptForm(myForm) {
for (i=0; i < myForm.elements.length; i++) {
myForm.elements[i].value = encrypt(myForm.elements[i].value);
}
}
//-->
</SCRIPT>
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
일부 텍스트 입력: <입력 유형=텍스트 이름=myField><입력 유형=제출>
</form>
JavaScript 5: 창 및 프레임
54 브라우저 상태 표시줄 텍스트 프롬프트 변경
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
window.status = “새로운 상태 메시지”;
</script>
55 팝업 확인 프롬프트 상자
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var userChoice = window.confirm(“확인 또는 취소를 클릭하세요.”);
if (userChoice) {
document.write("당신은 OK를 선택했습니다");
} 또 다른 {
document.write("취소를 선택하셨습니다");
}
</script>
56 입력 프롬프트
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var userName = window.prompt("이름을 입력하세요","여기에 이름을 입력하세요");
document.write("당신의 이름은 " + userName);
</script>
57 새 창 열기
인용된 내용 //myNewWindow라는 프로그램 코드를 새 브라우저 창에서 엽니다.
<스크립트 언어="자바스크립트">
window.open("http://www.liu21st.com/","myNewWindow");
</script>
58 새 창의 크기 설정
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300');
</script>
59 새 창의 위치 설정
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>
60 툴바 및 스크롤바 표시 여부
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
window.open("http://www.x-force.cn/",toolbar=no, menubar=no);
</script>
61 새 창의 크기를 조정할 수 있나요?
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
window.open('http://www.x-force.cn/', 'myNewWindow', 'ressible=yes' );</script>
62 현재 창에 새 문서 로드
참조 콘텐츠 프로그램 코드
<a href='#' onClick='document.location = '125a.html';' 새 문서 열기</a>
63 페이지의 스크롤 위치 설정
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
if (document.all) { //IE 브라우저인 경우 scrollTop 속성을 사용합니다.
document.body.scrollTop = 200;
} else { //NetScape 브라우저인 경우 pageYOffset 속성을 사용합니다.
window.pageYOffset = 200;
}</script>
64 IE에서 전체 화면 창 열기
참조 콘텐츠 프로그램 코드
<a href='#' onClick=”window.open('http://www.devdao.com/','newWindow','fullScreen=yes');”>전체 화면 창 열기</a>
65 새 창과 상위 창의 동작
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
//새 창 정의
var newWindow = window.open("128a.html","newWindow");
newWindow.close(); //부모 창에서 열린 새 창을 닫습니다.
</script>새 창에서 상위 창 프로그램 코드를 닫습니다.
window.opener.close()
66 새 창에 내용 쓰기
참조 콘텐츠 프로그램 코드
<스크립트 언어="자바스크립트">
var newWindow = window.open("","newWindow");
newWindow.document.open();
newWindow.document.write("새 창입니다.");
newWIndow.document.close();
</script>
67 프레임 페이지에 페이지 로드
참조 콘텐츠 프로그램 코드
<프레임셋 열=”50%,*”>
<프레임 이름="프레임1" src="/"135a.html"">
<프레임 이름="프레임2" src="/"about:blank"">
</프레임세트>
프레임1의 프레임2에 페이지를 로드합니다.
parent.frame2.document.location = “135b.html”;
68 프레임 페이지 간 스크립트 공유
내용 인용 프레임1의 html 파일에 스크립트 코드가 있는 경우
함수 doAlert() {
window.alert("프레임 1이 로드되었습니다.");
}
프로그램 코드는
프레임2에서 다음과 같이 호출될 수 있습니다.
<body onLoad="parent.frame1.doAlert();">
이것은 프레임 2입니다.
</body>
69 데이터 공개
참조 컨텐츠는 여러 프레임의 페이지 유틸리티 코드에서 데이터를 사용할 수 있도록 프레임 페이지의 데이터 항목을 정의할 수 있습니다.
<스크립트 언어="자바스크립트">
var persistVariable = “지속적인 값입니다.”;
</script>
<프레임셋 열=”50%,*”>
<프레임 이름="프레임1" src="/"138a.html"">
<프레임 이름="프레임2" src="/"138b.html"">
</frameset>
이런 방식으로 persistVariable 변수는 프레임1과 프레임2 모두에서 사용될 수 있습니다.
70 프레임워크 코드 라이브러리
인용된 내용 위의 아이디어 중 일부에 따르면 숨겨진 프레임 페이지를 전체 프레임 세트의 코드 기반 프로그램
코드
로 사용할 수 있습니다.
<프레임세트 열=”0,50%,*”>
<프레임 이름="codeFrame" src="/"140code.html"">
<프레임 이름="프레임1" src="/"140a.html"">
<프레임 이름="프레임2" src="/"140b.html"">
</프레임세트>