나의 js 학습 과정 공유 작성자 aircy javascript 학습 튜토리얼
- PHP中文网원래의
- 2016-05-16 19:19:441119검색
서문:
JS를 접한 이후로 JS 책을 제대로 공부한 적이 없습니다. 오늘부터 처음부터 시작하여 학습 과정에서 JS 코드를 정리하고 공유하겠습니다.
향후 공개되는 코드가 모두 원본이라는 의미는 아닙니다. 반대로 많은 부분이 인터넷에서 나올 것이며 물론 Wuyou Script의 코드보다 적지는 않을 것입니다. 이 글을 읽은 후에는 모두가 그러지 않기를 바랍니다.
포럼에서 질책하는 것은 결국 '음란'입니다! 나는 순전히 나와 같은 친구이거나 현재 최전선에서 공부하고 있는 친구들과 공유하기 위해 여기에 게시합니다.
또한 이곳 사람들로부터 더 많은 지지를 받기를 바랍니다. 친구들이 제안이나 의견이 있으면 메시지를 남겨주세요. 함께 토론해 봅시다! 감사해요!
예시 1.
이 예제에서는 주로 네비게이터, 쿠키, 화면, 위치 개체, 함수 호출 및 프롬프트, 경고 및 확인 상호 작용의 간단한 응용 프로그램을 소개합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
if(confirm("真的要看吗？")==true){
var password;
password = prompt("密码520:","请输入密码吧！");
if(password=="520"){
alert("恭喜你了，进去吧！");
document.write("测试利用navigator对象检测浏览器如下信息:
")
document.write("浏览器的名称:"+navigator.appName+"
");
document.write("浏览器的版本号:"+navigator.appVersion+"
");
document.write("运行平台:"+navigator.platform+"
");
document.write("是否支持cookie:"+navigator.cookieEnabled+"
");
document.write("测试利用screen对象获得浏览器窗口分辩率的大小:
");
document.write("窗口高度:"+screen.height+"
");
document.write("窗口宽度:"+screen.width+"
");
document.write("颜色深度:"+screen.colorDepth+"
");
}else{
message();
}
}
function loadingMessage(param){
alert("不好意思哦！"+param+"密码不对哦！再来吧！");
return false;
}
function message(){
loadingMessage("哈啰")
}
</script>
</HEAD>
<BODY>
<a href="#" onclick="window.location='http://www.baidu.com';">点击我</a>
</BODY>
</HTML>예제 2.
이 예에서는 이벤트 객체와 이벤트의 간단한 적용을 주로 소개합니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>mouse</title>
<script language="javascript">
function catchEvent()
{
var eventSrcID = event.srcElement.id;
var eventtype = event.type;
alert(eventSrcID+"捕获到了"+eventtype+"事件");
}
function GetPosition()
{
var posX = event.clientX;
var posY = event.clientY;
window.status = "鼠标的位置是("+posX+","+posY+")";
}
function GetKey()
{
textfield.value=event.keyCode+","+String.fromCharCode(event.keyCode);
}
</script>
</head>
<body onMouseMove="GetPosition();" >
鼠标在文本框中按下:<input type="text" name="textfield" onMouseDown="alert('鼠标在文本框中按下')">
键盘按下:<input type="text" name="textfield" onKeyDown="alert('键盘按下');">
event对象:
<input type="text" name="textfield" id="text" onClick="catchEvent();">
<input type="submit" name="Submit" value="提交" id="button" onClick="catchEvent();">
</body>
</html>예제 3.
이 예에서는 주로 배열의 사용과 해당 슬라이스() 메서드를 소개합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
数组和其slice()方法的使用
<SCRIPT LANGUAGE="JavaScript">
<!--
var firstArray = new Array();
firstArray[0]="0";
firstArray[1]="1";
firstArray[2]="2";
firstArray[3]="3";
firstArray[4]="4";
for(var i=0 ; i<firstArray.length;i++){
document.write("firstArray["+i+"]="+i+"
");
}
var firstArray = firstArray.slice(0,3);
document.write(firstArray);
//-->
</SCRIPT>
</BODY>
</HTML>예제 4.
이 예에서는 주로 객체와 슬라이스() 메서드를 소개합니다. 구성 방법의 사용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var myobject = new Object();//创建一个空对象
myobject[0]="0";//给对象放值
myobject[1]="1";
document.write("对象的使用"+myobject[0]);
function Person(name,age)//构造方法
{
this.name=name;
this.age=age;
this.sayHello=function()
{
alert("我的名字是"+this.name+",我的年龄是"+this.age);
}
}
//-->
</SCRIPT>
<body>
构造方法的使用
<script language="javascript">
var person1 = new Person("","21");
person1.sayHello();
</script>
</body>
</HTML>예제 5(4.1),
이 예에서는 주로 Document 객체의 사용을 소개합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<IMG SRC="C:/Documents and Settings/Administrator/桌面/13608.gif" WIDTH="170" HEIGHT="1" BORDER="0" ALT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("文件地址:"+document.location+"
")
document.write("文件标题:"+document.title+"
");
document.write("图片路径:"+document.images[0].src+"
");
document.write("文本颜色:"+document.fgColor+"
");
document.write("背景颜色:"+document.bgColor+"
");
//-->
</SCRIPT>
</BODY>
</HTML>예제 6(4.2),
이 예에서는 주로 Document 개체를 사용하여 양식 요소를 읽는 방법을 소개합니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function firstSubmit(){
alert(document.form1.a01.value);//将表单名为a01的值显示出来
}
function copyFirstSubmit(){
alert(document.form1.a01.value);
document.form1.a02.value=document.form1.a01.value;//将表单名为a01的值给a02，取a01的值也可以使用、、、//document.form1.elements[0].value
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="firstForm" METHOD=POST ACTION="">
<INPUT TYPE="text" NAME="firstText" value="哈啰">
</FORM>
<FORM name="secondForm" METHOD=POST ACTION="">
<INPUT TYPE="text" NAME="secondText" value="哈啰">
<INPUT TYPE="submit" name="hehe" value="哈哈">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
var first = document.firstForm.name;
var second = document.secondForm.name;
//alert("第一个表单的名字："+first);//读取表单元素，将注释去点即可
//alert("第二个表单的名字："+second);
//alert("第二个表单的按钮的name是："+document.secondForm.elements[1].name);
//alert("第二个表单文本域的值："+document.secondForm.elements[0].value);
//alert("第一个文本域："+document.firstForm.firstText.value);
//-->
</SCRIPT>
<FORM name="form1" METHOD=POST ACTION="">
a01<INPUT TYPE="text" NAME="a01"/><INPUT TYPE="button" name="01s" value="提交" onclick="firstSubmit()"/>
a02<INPUT TYPE="text" NAME="a02"/><INPUT TYPE="button" name="02s" value="提交" onclick="copyFirstSubmit()"/>×在a01中输入值后再提交
</FORM>
</BODY>
</HTML>예 7(4.3),
이 예에서는 주로 Document 개체를 사용하여 양식 요소인 등록 확인 코드를 읽는 방법을 소개합니다
<html>
<head>
<title>用户注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.STYLE1 {color: #FFFFFF}
-->
</style>
<SCRIPT type="text/javascript">
function Form_Submit()
{
if(regForm.userNumber.value=="")
{
alert("用户名不能为空!");
return false;
}
else if(regForm.userpassWord.value=="")
{
alert("密码不能为空!");
return false;
}
else if(regForm.userpassWord.value!=regForm.reuserpassWord.value)
{
alert("两次输入的密码不一致!");
return false;
}
return true;
//regForm.submit(); //不采用表单提交
}
</SCRIPT>
</head>
<body>
<FORM id="register" name="regForm" method="post" action="">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#0099FF">
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">用户注册</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">用户账号：
<input name="userNumber" type="text" id="usernumber" size="15"></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">用户密码：
<input name="userPassWord" type="text" id="userpassWord" size="15"></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">确认密码：
<input name="reuserPassWord" type="text" id="reuserpassWord" size="15"></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">电子邮箱：
<input name="email" type="text" id="email" size="15"></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF"><input type="button" name="Submit" value="提交" onClick="Form_Submit()"></td>
</tr>
</table>
</FORM>
</body>
</html>예제 8(4.4),
이 예에서는 주로 Document 개체를 사용하여 양식 요소를 읽는 방법(라디오 버튼 및 확인 버튼 사용)을 소개합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function sel_coun(){
var country = document.form1.country.length; //得到radio个数
for(var i=0;i<country;i++){
if(form1.country[i].checked){
alert(form1.country[i].value);
break;
}else{
continue;
}
}
}
function sel_love(){
var country = document.form1.love.length; //得到checkbox个数
var love =""; //new Array();
for(var i=0;i<country;i++){
if(form1.love[i].checked){
love+=form1.love[i].value+"、";
}
}
love = love.substring(0,love.lastIndexOf("、"));
alert("你的爱好有:"+love)
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name ="form1" METHOD=POST ACTION="">
单选应用
<INPUT TYPE="radio" NAME="country" value="中国" checked>中国
<INPUT TYPE="radio" NAME="country" value="法国">法国
<INPUT TYPE="radio" NAME="country" value="美国">美国
<INPUT TYPE="button" value="提交" onclick="sel_coun();"/>
复选应用
<INPUT TYPE="checkbox" NAME="love" value="打球">打球
<INPUT TYPE="checkbox" NAME="love" value="游泳">游泳
<INPUT TYPE="checkbox" NAME="love" value="看书">看书
<INPUT TYPE="checkbox" NAME="love" value="跳舞">跳舞
<INPUT TYPE="button" value="提交" onclick="sel_love();"/>
</FORM>
</BODY>
</HTML> 예 9 (4.5),
이 예에서는 주로 Document 개체를 사용하여 양식 요소를 읽는 방법을 소개합니다(드롭다운 메뉴 및 링크 속성 사용)
<html>
<head>
<title>下拉菜单</title>
<script language="javascript">
function display()
{
if(document.selectForm.team.selectedIndex==0) //判断是否进行了选择
{
alert("您没有做选择!");
}
else
{
var index = document.selectForm.team.selectedIndex; //读出当前选项的下标
alert("您选择的球队是:"+document.selectForm.team.options[index].value);
}
}
</script>
</head>
<body>
<div align="center">
<form action="" method="post" name="selectForm" id="selectForm">
<table width="70%" border="0">
<tr>
<td>请选择喜欢的球队:</td>
</tr>
<tr>
<td><select name="team">
<option value="0">--未选择--</option>
<option value="巴塞罗那">巴塞罗那</option>
<option value="AC米兰">AC米兰</option>
<option value="尤文图斯">尤文图斯</option>
<option value="曼彻斯特联">曼彻斯特联</option>
<option value="切尔西">切尔西</option>
</select></td>
</tr>
<tr>
<td><input name="look" type="button" id="look" value="单击查看" onClick="display()"></td>
</tr>
</table>
<a href="http://www.baidu.com" name="baidu" target="_blank">有问题百度一下</a>
<a href="http://www.google.com" name="google" target="_blank">Google也可以</a>
<script language="javascript">
document.write("第一个连接的信息:
");
document.write("<b>href:</b>"+document.links[0].href+"
");
document.write("<b>pathname:</b>"+document.links[0].pathname+"
");
document.write("<b>port:</b>"+document.links[0].port+"
");
document.write("<b>protocol:</b>"+document.links[0].protocol+"
");
document.write("<b>target:</b>"+document.links[0].target+"
");
document.write("
");
document.write("第二个连接的信息:
");
document.write("<b>href:</b>"+document.links[1].href+"
");
document.write("<b>pathname:</b>"+document.links[1].pathname+"
");
document.write("<b>port:</b>"+document.links[1].port+"
");
document.write("<b>protocol:</b>"+document.links[1].protocol+"
");
document.write("<b>target:</b>"+document.links[1].target+"
");
</script>
</form>
</div>
</body>
</html>예 10(5),
이 예제는 주로 Baidu 이미지 표시를 시뮬레이션하는 이미지 속성의 사용을 소개합니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图像编程</title>
<script language="javascript">
var imageArray = new Array("http://yi-bo.com/Article/UploadFiles/200610/2006101751022184.jpg","http://www.66ylw.com/Article/UploadFiles/200610/2006101751024517.jpg","http://www.ishare.cc/d/247965-3/6519C067DAA1F4B0F5EB44BC0FFD5DA4.JPG"," http://www.dipan8.com/Article/UploadFiles/200610/2006101751015599.jpg","http://www.66ylw.com/Article/UploadFiles/200610/200610175936198.jpg","http://wanmeiad.net/Article/UploadFiles/200610/2006101751024347.jpg");
var index = 0;
function GetNext()
{
index++;
if(index < imageArray.length) //判断图像的下标是否小于数组的长度
{
document.images["saint"].src=imageArray[index]; //如果小于，那么就显示该下标所指定的图像
}
else
{
index = 0;
document.images["saint"].src=imageArray[index]; //如果不小于，那么就显示第一幅图像，并把index值置为0
}
}
function GetPrev()
{
index--;
if(index >= 0) //判断图像的下标是否大于0
{
document.images["saint"].src=imageArray[index]; //如果大于，那么就显示该下标所指定的图像
}
else
{
index = imageArray.length-1;
document.images["saint"].src=imageArray[index]; //如果不大于，那么就显示最后一幅图像，并把index值置为数组长度减1
}
}
</script>
</head>
<body>
<img name="saint" src="http://yi-bo.com/Article/UploadFiles/200610/2006101751022184.jpg" width="400" height="300">
<a href="javascript:GetNext()">下一幅</a>
<a href="javascript:GetPrev()">上一幅</a>
</body>
</html> 예제 11 (6),
이 예제는 주로 마우스 동작의 사용을 소개합니다. 이 예제는 너무 간단하고 할 수 있습니다. 더 살펴볼 다른 정보를 찾아보세요!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>改变文字样式</title>
<style type="text/css">
.red{ color:red;
font-style:italic;
font-size:32;
}
.blue{color:blue;
font-size:36;
}
.black{color:black;
}
</style>
<script language="javascript">
function color(e)
{
switch(e.srcElement.id){ //获得标记的id
case "first":
document.getElementById("first").className="red"; //修改文字的样式
break;
case "second":
document.getElementById("second").className="blue";
break;
}
}
function clearText(e)
{
switch(e.srcElement.id){
case "first":
document.getElementById("first").className="black";
break;
case "second":
document.getElementById("second").className="black";
break;
}
}
</script>
</head>
<body>
<div id="first" onMouseOver="color(event);" onMouseOut="clearText(event);">我是新手，摸一下</div>
<div id="second" onMouseOver="color(event);" onMouseOut="clearText(event);">老油条了</div>
</body>
</html>
첨부파일 전송이 불가능하기 때문에 2개의 파일을 모두 별도로 게시하여 테스트 시 별도로 저장할 수 있습니다. 아래는 XML 파일입니다. 말도 안되는 소리라고 말했는데 아무도 이것이 HTML이라고 생각하지 않을 것이라고 믿습니다! :)
<html>
<head>
<title>访问XML文档</title>
<script language="javascript">
function GetInfo()
{
var document_xml = new ActiveXObject("Microsoft.XMLDOM");
document_xml.load("info.xml"); //加载info.xml
var RootNode = document_xml.documentElement; //获得info.xml文档的根节点
var FirstNode = RootNode.firstChild; //获得根标记的第一个子节点
var SecondNode = RootNode.lastChild; //获得根标记的最后一个子节点
var nameNode = FirstNode.firstChild;
var ageNode = nameNode.nextSibling; //获得nameNode节点的下一个兄弟结点
var sexNode = FirstNode.lastChild;
var str = "名称是:"+nameNode.firstChild.nodeValue+
"\n年龄是:"+ageNode.firstChild.nodeValue+
"\n性别是:"+sexNode.firstChild.nodeValue+
"\n描述是:"+SecondNode.firstChild.nodeValue;
alert(str);
}
</script>
</head>
<body>
<input type="button" name="Submit" value="按钮" onClick="GetInfo()">
</body>
</html>예제 13. 이 예는 주로 XML 노드에 액세스하기 위한 js 응용 프로그램을 소개합니다. 이는 노드를 읽는 또 다른 방법입니다. 위에서 게시한 xml은 같습니다. . 반복되지 않습니다.
<?xml version="1.0" encoding="gb2312"?>
<Info>
<basic country="china">
<name num="3">霍元甲</name>
<age>42</age>
<sex>男</sex>
</basic>
<description>精武门的创始人</description>
</Info>성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.