>웹 프론트엔드 >JS 튜토리얼 >JS 엔트리코드 모음_기본지식

JS 엔트리코드 모음_기본지식

PHP中文网
PHP中文网원래의
2016-05-16 19:04:24862검색

Shanba에서 js 튜토리얼을 봤는데 좋은 것 같아요. 적합한 읽기 범위: JavaScript에 대해 전혀 모르고 그것을 마스터하는 데 한 단계밖에 남지 않은 사람들

기본 지식: HTML
자바스크립트는 여기까지입니다 1: 기본 지식

1 스크립트 블록 만들기

1: <스크립트 언어=”JavaScript”> : JavaScript 코드는 여기에 있습니다.
3:
2 스크립트 코드 숨기기
1:
JavaScript를 지원하지 않는 브라우저에서는 해당 코드가 실행되지 않습니다.
3 브라우저가 지원하지 않을 때 표시
1: 외부 스크립트 파일
1:

5 주석 스크립트
1: // 주석입니다
2: document.write(“Hello”); // 주석입니다
3: /*
4: 이 모든 것
5: 주석입니다
6 : */

6 브라우저에 출력
1: document.write(“Hello”)

7 변수 정의
1: var myVariable = “어떤 값”;

8 문자열 추가
1: var myString = “String1” “String2”
9 문자열 검색
1:

10 문자열 교체

1: thisVar.replace ("월요일", "금요일");

11 형식 문자열

1:

12 배열 만들기
1:    

13 数组排序  
1:   
2:   
11:    



14 分割字符串  

1:   
2:   
10:    



15 弹俦告信息  

1:   
2:   
5:    



16 弹信确认框  

1:   
2:   
5:    



17 정정수수  

1:   
2:   
8:    



18 调用JS函数  

1: 링크 텍스트  
2: 링크 텍스트>   



19 현재 页face加载完成后执行函数  

1:   
2: 페이지 본문  
3:    


20 条件判断  

1: <script>   <br>2: <!--   <br/>3: var userChoice = window.confirm(“확인 또는 취소 선택”);   <br/>4: var 결과 = (userChoice == true) ? “확인” : “취소”;   <br/>5: document.write(결과);   <br/>6: // -->   <br>7: </script>   



21 指定次数循环  

1: <script>   <br>2: <!--   <br>3: var myArray = new Array(3);   <br>4: myArray[0] = '항목 0';   <br>5: myArray[1] = '항목 1';   <br>6: myArray[2] = '항목 2';   <br>7: for (i = 0; i <myArray.length; i ) {    <br>8: document.write(myArray[i]   “<br>”);   <br>9: }   <br>10: // -->   <br>11: </script>   



22 设정将来执行  

1: <script>   <br>2: <!--   <br/>3: function hello() { <br/>4: window.alert(“Hello”); <br/>5: } <br/>6: window.setTimeout(“hello()”,5000) <br/>7: // --> <br>8: </script>



23 타이밍 실행 기능

1: <script> ;!-- <br>3: function hello() { <br>4: window.alert(“Hello”) <br>5: window.setTimeout(“hello()”,5000) <br>6 : } <br>7: window.setTimeout(“hello()”,5000) <br>8: // --> <br>9: </script>
24 예약된 실행 취소

1: <script> <br>2: <!-- <br/>3: function hello() { <br/>4: window.alert(“Hello "); <br/>5: } <br/>6: var myTimeout = window.setTimeout("hello()",5000); <br/>7: window.clearTimeout(myTimeout); <br/>8: // - -> ”> <br>2: 페이지 본문 <br>3: </body> <br><br>JavaScript 2: 브라우저 출력 <br><br><br>26 문서 방문 개체 <br><br>1: <script 언어=”JavaScript”> <br>2: var myURL = document.URL; <br>3: window.alert(myURL); /script> <br><br><br><br>27 HTML을 동적으로 출력 <br><br>1: <script 언어=”JavaScript”> 이 문서에 대한 정보는 다음과 같습니다.</p> ”); <br>3: document.write(“<ul>”); <br>4: document.write(“<li>참조 문서: " document.referrer "</li>"); <br>5: document.write("<li>Domain: " document.domain "</li>") <br>6: document.write (“<li>URL: “ document.URL “ ”); <br>7: document.write(“</ul>”) <br>8: </script>


28 개행

1: document.writeln(“a”)
2: document.writeln(“b”)



29 출력 날짜

1:



30 날짜의 시간대 지정

1:


32 URL 매개변수 읽기

1:

아직도 HTML이 상태 비저장이라고 생각하시나요?

33 새 문서 개체 열기

1:



34 페이지 이동

1:



35 웹페이지 로딩 진행 창 추가

1: < ; html>
2:
3:
6:
7: 8:
9:

메인 페이지입니다


10: html> img src="/"image1.jpg"" name="myImage">
2: 너비< ;/ a>
3:


37 동적으로 이미지 로드

1:


38 간단한 이미지 교체

1: <스크립트 언어 = "JavaScript">
2: RollImage = 새 이미지;
3: RollImage.src = "rollImage1.jpg";
4: defaultImage = 새 이미지; " image1.jpg”;
6: onMouseOut="document.myImage.src = defaultImage.src;">
9:


39 이미지를 무작위로 표시

1: <스크립트 언어=”JavaScript”> : var imageList = new Array;
3: imageList[0] = “image1.jpg”
4: imageList[1] = “image2.jpg”
5: imageList[2] = “ image3.jpg”;
6: imageList[3] = “ image4.jpg";
7: var imageChoice = Math.floor(Math.random() * imageList.length);
8: 문서 .write('');
9:


40 函数实现的图image替换  

1:   
2: var 소스 = 0;  
3: var replacement = 1;  
4: createRollOver(originalImage,replacementImage) 함수 {   
5: var imageArray = new Array;  
6: imageArray[source] = 새 이미지;  
7: imageArray[source].src = originalImage;  
8: imageArray[replacement] = 새 이미지;  
9: imageArray[replacement].src = replacementImage;  
10: imageArray를 반환합니다.  
11: }  
12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);  
13:   
14: 15: onMouseOut="document.myImage1.src = rollImage1[source].src;">  
16:   
17: 
   


41개 创建幻灯그림  

1:   
2: var imageList = 새 배열;  
3: imageList[0] = 새 이미지;  
4: imageList[0].src = 'image1.jpg';  
5: imageList[1] = 새 이미지;  
6: imageList[1].src = 'image2.jpg';  
7: imageList[2] = 새 이미지;  
8: imageList[2].src = 'image3.jpg';  
9: imageList[3] = 새 이미지;  
10: imageList[3].src = 'image4.jpg';  
11: 함수 slideShow(imageNumber) {   
12: document.slideShow.src = imageList[imageNumber].src;  
13: imageNumber  = 1;  
14: if (imageNumber < imageList.length) {   
15: window.setTimeout("slideShow("   imageNumber   ")",3000);  
16: }  
17: }  
18:   
19:   
20:   
21:    


42 随机广告图文  

1:   
2: var imageList = 새 배열;  
3: imageList[0] = 'image1.jpg';  
4: imageList[1] = 'image2.jpg';  
5: imageList[2] = 'image3.jpg';  
6: imageList[3] = 'image4.jpg';  
7: var urlList = 새 배열;  
8: urlList[0] = 'http://www.php.cn/';  
9: urlList[1] = 'http://www.php.cn/';  
10: urlList[2] = 'http://www.php.cn/';  
11: urlList[3] = 'http://www.php.cn/';  
12: var imageChoice = Math.floor(Math.random() * imageList.length);  
13: document.write('');  
14:    

JavaScript就这么回事4:表单   


还是先继续写完JS就这么回事系列吧~  
43 表单构成  

1:   
2: <입력 유형="텍스트" 이름="myText">  
3: <이름 선택=”mySelect”>  
4: <옵션 값="1">첫 번째 선택  
5: <옵션 값="2">두 번째 선택  
6:   
7:

8: <입력 유형=”제출” 값=”제출”>
9:


접속 form 텍스트 상자의 내용

1:

2:
4: 텍스트 필드 확인

1: <양식 이름=”myForm”>
2: 일부 텍스트 입력: <입력 유형=”text” name=”myText”< br> : 텍스트 복사:
4:

5: 텍스트 필드 복사


46 텍스트 상자의 변경 사항 감지

1: < ;form name=”myForm”>
2: 일부 텍스트 입력:


47 선택한 선택에 액세스

1:
2: < select name=”mySelect”> ;
3: <옵션 값=”첫 번째 선택”>1
4: <옵션 값=”두 번째 선택”>2 옵션 값=”세 번째 선택”>3
6:
7:
8: 선택 목록 확인


48 선택 항목을 동적으로 추가

1: <양식 이름=”myForm ”>
2: <이름 선택=”mySelect”>
3: <옵션 값=”첫 번째 선택”>1
4: <옵션 값=” 두 번째 선택”<2
5:
6:
7: <스크립트 언어=”JavaScript” > document.myForm.mySelect.length;
9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”
10: document.myForm.mySelect.options [document.myForm.mySelect.length - 1].value = “세 번째 선택”;
11:


49 유효성 검사 양식 필드

1: myForm” action=”target.html”>
10: 텍스트 필드: 11:
12:


50 항목 선택 확인

1 : function checkList(selection) {
2: if (selection.length == 0) {
3: window.alert(“목록에서 선택해야 합니다.”)
4: return false
5: }
6: true를 반환합니다.
7: }


51 양식의 동작을 동적으로 변경합니다.

1:   
2: 사용자 이름: 
  
3: 비밀번호: <입력 유형="비밀번호" 이름="비밀번호">
  
4: <입력 유형="버튼" 값="로그인" onClick="this.form.submit();">  
5:   
6: <입력 유형="버튼" 값="비밀번호 검색" onClick="this.form.action = 'password.html'; this.form.submit();”>  
7:    


52 使用图image按钮  

1:   
2: 사용자 이름: 
  
3: 비밀번호: <입력 유형=”password”name=”password”>
  
4:   
5:   
6:   


53 表单数据的加密  

1:   
2:   
17:   
18:   
19: 일부 텍스트 입력:   
20:    




JavaScript就这么回事5:窗口和框架   


54 改变浏览器状态栏文字提示  

1: <스크립트 언어=”자바스크립트”>  
2: window.status = '새로운 상태 메시지';  
3:    


55 弹take确认提示框  

1:   
2: var userChoice = window.confirm("확인 또는 취소'를 클릭하세요.");  
3: if (userChoice) {   
4: document.write(“확인을 선택하셨습니다”);  
5: } else {   
6: document.write(“취소를 선택하셨습니다”);  
7: }  
8:    


56 提示输入  

1:   
2: var userName = window.prompt("이름을 입력하세요","여기에 이름을 입력하세요");  
3: document.write("귀하의 이름은 다음과 같습니다."   userName);  
4:    


57 打开一个新窗口  

1: //打开一个name称为myNewWindow的浏览器新窗口  
2:   
3: window.open(“http://www.php.cn/”,”myNewWindow”);  
4:    


58 设置新窗口的大小  

1:   
2: window.open("http://www.php.cn/","myNewWindow",'height=300,width=300')
3:
59 새 창의 위치 설정

1:


60 툴바 및 스크롤바 표시 여부

1:


62 현재 창에 새 문서 로드

1: 새 문서 열기


63 페이지의 스크롤 위치 설정

1: < ;script 언어=”JavaScript”>
2: if (document.all) { //IE 브라우저인 경우, scrollTop 속성을 사용합니다.
3: document.body.scrollTop = 200; : } else { //NetScape 브라우저인 경우 브라우저는 pageYOffset 속성을 사용합니다.
5: window.pageYOffset = 200
6: }


64 Open IE의 전체 화면 창

1 : 전체 화면 창 열기< /a>


65 새 창 및 상위 창 작업

1: <스크립트 언어=”JavaScript”> ;
2: //새 창 정의
3: var newWindow = window.open(“128a.html”,”newWindow”)
4: newWindow.close(); 상위 창에서 새 창 열기
5: < /script>
6: 새 창에서 상위 창 닫기
7: window.opener.close()


66 새 창에 내용 쓰기

1 : 4:
5: <프레임 이름=”frame1 ” src="/”138a.html"”>6:
7:

이렇게 하면 persistVariable 변수를 두 가지 모두에서 사용할 수 있습니다. 프레임1 및 프레임2
70 프레임워크 코드 베이스
위 아이디어 중 일부에 따르면 숨겨진 프레임 페이지를 전체 프레임세트의 코드 베이스로 사용할 수 있습니다.

1:
2: <프레임 이름=”codeFrame” src="/”140code.html">
3: <프레임 이름=”frame1” src="/ ”140a.html "">
4:
5: