您的位置：首页 > Web前端 > JavaScript

第七阶段 -- 网页编程基础：【JS01】

2019-07-10 17:45 435 查看

1. JavaScript简介

  1. 作用：

      HTML+CSS只是可以有静态的页面，但是没有动态的效果。
    • JS可以实现表单数据的校验。
    • TAB菜单切换
    • 背景图片切换
    • JS小游戏的开发

  2. 概念：JS是一种直译的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

2. JS的引入方式

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!--【1】JS引入的方式一--><script type="text/javascript">/*网页中的弹框*/alert("js 的学习课程");</script><!--[2]js引入的方式二 type:引入文件的类型   src： 引入文件的路径  charset:指定引入的编码--><!--注意：引入js 的时候千万不要二合一--><script type="text/javascript" src="js/test.js" charset="UTF-8" ></script></head><body></body></html>

3. JS中变量的使用

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>var  a =1;var  b ="2";var  c ="你好";var  d=true;var  e=new  Date();var  f='5';var  z=1.32;var  a=123;alert(a);</script></head><body></body></html><!--js中的变量【1】JS中变量的声明var   变量名=值；【2】JS中变量的使用注意的事项A、js中的变量的名称和java中标识符的命名保持一致就可以了。B、js中变量名称是可以重复的，但是后者的名称会把前者的名称值覆盖C、js中末尾即使没有分号结束也是可以的，但是不推荐大家这样书写。-->

4. JS中的数据类型

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>var  a=1;var  b=1.2;var c='你';var d="我们";var  e=true;var  f=new  Date();//			alert(typeof f);var  aa;//			alert(typeof aa);var  bb="123a";//			alert(Number(bb));var  cc=null;var  dd="";alert(typeof cc);</script></head><body></body></html><!--JS中的数据类型number（数字类型的数据）string（字符串类型）boolean（布尔数据类型）object（对象类型）JS中特殊数据类型undefined(未定义)NaN(不是一个数字) not  a  numbernull(空对象)-->

5. JS中的运算符

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>var  a=10;var b=12.7;//alert(a+b);//22.7var   c="123";//alert(a+b+c);var  d=true;// true ---1   false---0var  e=1;//alert(d+e);var  f1=true;// 1var  f2="true";// NANvar  f3=1;//1var  f4="1";//1/*alert(f1==f2);//Falert(f1==f3);//Talert(f1==f4);//Talert(f2==f3);//Falert(f2==f4);//Falert(f3==f4);//T*/alert(f1===f2);//Falert(f1===f3);//Falert(f1===f4);//Falert(f2===f3);//Falert(f2===f4);//Falert(f3===f4);//F</script></head><body></body></html><!--JS中的运算符算数运算符+  -  *  /  %   ++   --逻辑运算符&   |   !   &&   ||   ^   <   >　　　＜＝　　＞＝　　　！＝连接符+特殊运算符(==)等值符先比较类型  如果类型一致，在比较内容如果类型不一致，这时候会进行强制转换统一转number类型，然后再进行内容的比较(===)等同符先比较类型  如果类型一致，在比较内容如果类型不一致 直接返回false；-->

6. JS中的选择语句

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/*var  a=15;switch (a){case 10: alert("我是10");break;case 20: alert("我是20");break;case 30: alert("我是30");break;default:break;}*/for(var  a=1; a<=9;a++){for(var  b=1;b<=a;b++){								document.write(b+"*"+a+"="+a*b+"&nbsp;&nbsp;&nbsp;&nbsp;");}/*直接把信息打印到浏览器上*/document.write("<br />");}</script></head><body></body></html><!--条件语句1.if(){}2.if(){}else{}3.if(){}else if(){} else if()...else{}分支语句（选择语句）switch(){case value:  break;default: break;}循环语句while(){}至少执行一次循环体do{}while()for(){}-->

7. JS中函数的使用

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/**************【1】函数声明的方式***************///方式一function  demo1(){alert("函数声明一");}//方式二var  demo2= function(){alert("函数声明二");}//方式三   (函数本身也是一个对象)   了解var  demo3=new  Function("alert('我是函数声明三')");//demo3();//demo1();/******************【2】函数中参数传递*******************/function  demo4(a,b){console.log(a+"...."+b);}/*demo4(1,2);//1....2demo4(1);//1....undefineddemo4(1,2,3);//1....2*//******************【3】函数的返回值********************/function  demo5(a){console.log("参数值："+a());return a;}//alert(demo5(5));var  a=function(){console.log("我是函数a");};demo5(a);</script></head><body></body></html><!--函数声明的三种形式:（1） function  函数名（）{函数体}(2) var  函数名=function(){函数体}(3)  var  函数名=new  Function("函数体")；-函数参数传递:在js中实参的个数和形参的个数可以不一致-函数的返回值:如果函数没有return   这时候返回 undefined():函数执行符-->

8. JS中Date和Math对象

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/***********日期对象*****************/function testDate(){var  date=new  Date();//本月中的第几天document.write(date.getDate()+"<br />");//本星期的第几天document.write(date.getDay()+"<br />");//返回的月份  0-11document.write(date.getMonth()+"<br />");//返回的是1900年到现在年份的差值2018-1900document.write(date.getYear()+"<br />");//返回全年2018document.write(date.getFullYear()+"<br />");//2018/6/22 下午12:17:14:返回本地的时间document.write(date.toLocaleString()+"<br />");}/***********数学对象*****************/function  testMath(){//获得随机数//随机数范围是0-1var ran=Math.random()*1000;console.log(ran);//向下取整 756.9714434215177  ==756console.log(Math.floor(ran));//向上取整  398.06376470341377==398console.log(Math.ceil(ran));//获得4位随机数--验证码console.log(Math.floor(Math.random()*9000+1000) );}testMath();</script></head><body></body></html>

9. JS中String对象和Global对象

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/************String对象学习**************/function  testString(){var  a="b-j-s-x-t";var  b=new  String("bjsxt");//获得下标为2的内容document.write(b.charAt(2)+"<br />");//2  :获得下标document.write(b.indexOf("sxt")+"<br />");//字符串截取  开始下标  截取长度document.write(b.substr(2,3)+"<br />");//  截取开始的长度document.write(b.substr(1)+"<br />");//字符串截取    开始下标   结束的下标document.write(b.substring(2,3)+"<br />");//开始下标document.write(b.substr(2)+"<br />");//字符串截取的方法document.write(a.split("-"));}/***************Global对象学习************/function  testGlobal(){var  a=1;var  b="var  c=1+1";document.write(a+"<br />");document.write(b+"<br />");//把字符串转成可以执行的js的代码eval(b);document.write(c+"<br />");var  d="123a";Number(d);//NAN//	检查某个值是否是数字。document.write(isNaN(d));}testGlobal();</script></head><body></body></html>

10. JS中的数组array学习

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/**********数组的声明方式**************/function  demo1(){//方式一var   arr=new  Array();//方式二   5代表数组的长度var  arr2=new  Array(5);//console.log(arr2);//方式三var  arr3=new  Array("你好",123,new String(),true);console.log(arr3);//方式四var  arr4=["bjsxt",123,new Date(),false];}/************数组的使用**************/function  demo2(){var arr=[];arr[0]="李时珍的皮";arr[1]=true;arr[2]=new  Date();arr[6]=12;//js中数组的下标可以不连续  如果没有给值就是emptyconsole.log(arr);}/************数组的扩容***************/function  demo3(){var  arr=["bjsxt",123,new Date(),false];console.log(arr.length);//扩大数组   empty//arr.length=10;//缩小数组arr.length=2;console.log(arr);}/*********数组的遍历****************/function  demo4(){var  arr=["bjsxt",123,new Date(),false];//数组的遍历方式一for(var  i =0;i<arr.length;i++){console.log(arr[i]);}//数组遍历方式二  i :是代表数组的下标for(var  i in arr ){console.log(arr[i]);}}/**********数组中常用的方法***************/function  demo5(){var  arr=["bjsxt",123,new Date(),false];console.log(arr);//向数组的末尾添加一个或更多元素，并返回新的长度。// var  le= arr.push("我们");//删除并返回数组的最后一个元素// var le= arr.pop();//删除并返回数组的第一个元素//arr.shift();//	向数组的开头添加一个或更多元素，并返回新的长度。//arr.unshift("sxt");//  删除的含义   开始删除的下标   删除的个数//arr.splice(1,2);//添加的含义   添加的下标   0   添加的元素arr.splice(1,0,"你好");console.log(arr);}demo5();</script></head><body></body></html>

11. JS中的事件学习

  • 事件是可以被JavaScript探测到的行为
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>function demo1(){alert("单击事件的执行");}function demo2(){alert("双击事件的执行");}function demo3(){//alert("我来了");alert("我离开了");}function demo4(){console.log("鼠标移动");}function demo5(){alert("键盘按下");}function demo6(){alert("内容改变");}function demo7(){alert("页面加载完成");}</script></head><body onload="demo7()"><!--单击事件--><input type="button" name="" id="" value="单击操作" onclick="demo1();demo2()" /> <br /><br /><br /><!--双击事件--><input type="button" name="" id="" value="双击事件" ondblclick="demo2()" /><br /><br /><br /><!--鼠标事件   onmouseover：鼠标放上事件   onmouseout:鼠标离开事件  onmousemove:鼠标移动事件 --><div style="width: 300px; height: 300px; background-color: red;"  onmousemove="demo4()"></div><br /><br /><br /><!--键盘事件  onkeyup="demo5()" 键盘弹起--><input type="text"  onkeydown="demo5()" /><br /><br /><br /><!--焦点事件  onfocus:获得焦点事件  onblur：失去焦点事件  --><input type="text" name="" id="" value=""  onchange="demo6()" /></body></html>

12. JS中BOM和DOM对象入门

  1. BOM:
  • BOM是Browser Object Model的缩写，即浏览器对象模型。
  • BOM是由一系列对象组成的，是访问，控制，修改浏览器的属性的方法。
  • BOM没有同意的标准（每种客户端都可以自定义标准）、
  • BOM的顶层是window对象。
  1. DOM
  • DOM 是Document Object Model的简写，即文档对象模型。
  • DOM用于XHTML，XML文档的应用程序接口（API）。
  • DOM提供一种结构的文档描述方式，从而使HTML内容使用结构化的方式显示。
  • DOM是由一系列对象组成，是访问，检索，修改XHTML文档内容与结构的标准方法。
  • DOM标准是由W3C制定与维护。DOM是跨平台与跨语言的。
  • DOM的顶层对象时document对象。

13.BOM对象 – window

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/*三种弹框*/function  demo1(){//含有确定按钮的弹框window.alert("弹框A");}function  demo2(){//含有确认取消的弹框var  flag= window.confirm("是否删除");alert(flag);}function  demo3(){//可以输入内容的弹框var  va= window.prompt("请输入昵称:","例如：李白");alert(va);}/*******定时器********/function  getTime(){var  date=new  Date();//获得时间var  time=date.toLocaleString();//获得id名称是span_1的对象var  span =document.getElementById("span_1");span.innerHTML=time;}//1s之后进行方法的调用  调用一次//window.setTimeout("getTime()",1000);//每间隔1s就会进行方法的调用   调用多次var  in1=	window.setInterval("getTime()",1000);function  demo4(){//清除定时器操作window.clearInterval(in1);}/*******打开或者关闭浏览器*******/function  demo5(){window.open("http://www.baidu.com");}function  demo6(){//关闭当前的网页window.close();}</script></head><body onload="getTime()"><p><input type="button" name="" id="" value="弹框A" onclick="demo1()"/></p><p><input type="button" name="" id="" value="弹框B" onclick="demo2()"/></p><p><input type="button" name="" id="" value="弹框C" onclick="demo3()"/></p>当前的时间是： <span id="span_1"></span><p><input type="button" name="" id="" value="停止时间" onclick="demo4()"/></p><p><input type="button" name="" id="" value="打开百度" onclick="demo5()"/></p><p><input type="button" name="" id="" value="关闭" onclick="demo6()"/></p></body></html>

14. BOM – location-history-navigator

  • 重点：location & history
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/*************1.Location对象学习**********/function  testLocation(){//http://127.0.0.1:8020/06JS/02JS%E4%B8%ADBOM%E5%AF%B9%E8%B1%A1%E5%AD%A6%E4%B9%A0.htmlvar  href=	window.location.href;//http://127.0.0.1var  hostname=window.location.hostname;//8020var  port=window.location.port;//http://127.0.0.1:8020var  host=window.location.host;// alert(href+"----"+hostname+"----"+port+"----"+host);//修改当前的URL地址// window.location.href="http://www.baidu.com";//重新加载页面reload()window.location.reload();}/************2.History对象*************/function  testHistory(){//返回浏览器历史列表中的 URL 数量。var len=window.history.length;//alert(len);//前进操作history.forward()//				window.history.forward();//后退操作history.back()//window.history.back();//控制前进和后退的网页  如果是正数代表前进  如果是负数代表后退  如果是0重新加载页面window.history.go(0);}function  testScreen(){//获得当前屏幕的分辨率var  he=window.screen.height;var  wi=window.screen.width;alert(he+"----"+wi);}/*************3.navigator************/function  testNavigator(){//返回由客户机发送服务器的 user-agent 头部的值。var  us=window.navigator.userAgent;alert(us);}</script></head><body><p><input type="button" name="" id="" value="Location对象" onclick="testLocation()" /></p><p><input type="button" name="" id="" value="History对象" onclick="testHistory()" /></p><p><input type="button" name="" id="" value="Screen对象" onclick="testScreen()" /></p><p><input type="button" name="" id="" value="Navigator对象" onclick="testNavigator()" /></p></body></html>

15. DOM结构节点类型




16. DOM编程获得元素的方式

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/************直接获得节点对象的方式***************/function  demo1(){//id方式直接获得--单个对象var  username=window.document.getElementById("username");alert(username);}function demo2(){//通过标签名称获得元素对象  获得的是多个对象var  inp=document.getElementsByTagName("input");alert(inp[2]);}function  demo3(){//通过name属性获得var inp=document.getElementsByName("hobby");alert(inp.length);}/*********间接获得元素对象的方式***************/function  demo4(){//获得父节点var  professional=document.getElementById("professional");//获得子元素  注意：空白的文档也是一个子节点var  child= professional.childNodes;console.log(child);}function  demo5(){var  p2=document.getElementById("p2")//获得父节点var  parent= p2.parentNode;console.log(parent);}function  demo6(){var  p2=document.getElementById("p2");//获得下一个节点包含空白的文档//var next=p2.nextSibling.nextSibling;//获得下一个节点不包含空白的文档//var  next=p2.nextElementSibling;//获得上一个节点对象包含空白文档//var  up=p2.previousSibling.previousSibling;//获得上一个节点对象不包含空白文档var  up=p2.previousElementSibling;console.log(up);}</script></head><body  onload="demo6()"><form action="" id="form1">用户名：<input  type="text" name="username" id="username" value="请输入姓名" ><br />密码：  <input  type="password" name="pwd" id="pwd" /><br />爱好：  <input  type="checkbox" name="hobby" value="music" />音乐<input  type="checkbox" name="hobby" value="sports" />体育<input  type="checkbox" name="hobby" value="art"/>美术<br />职业：  <select name="professional" id="professional"><option value="1">工人</option><option value="2" id="p2">农民</option><option value="3">解放军</option><option value="4">知识分子</option></select><br /><input  type="button" value="提交"/></form></body></html>

17.DOM编程 – 获得元素的方式

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/************直接获得节点对象的方式***************/function  demo1(){//id方式直接获得--单个对象var  username=window.document.getElementById("username");alert(username);}function demo2(){//通过标签名称获得元素对象  获得的是多个对象var  inp=document.getElementsByTagName("input");alert(inp[2]);}function  demo3(){//通过name属性获得var inp=document.getElementsByName("hobby");alert(inp.length);}/************间接获得元素对象的方式*************/function  demo4(){//获得父节点var  professional=document.getElementById("professional");//获得子元素  注意：空白的文档也是一个子节点var  child= professional.childNodes;console.log(child);}function  demo5(){var  p2=document.getElementById("p2");//获得父节点var  parent= p2.parentNode;console.log(parent);}function  demo6(){var  p2=document.getElementById("p2");//获得下一个节点包含空白的文档//				var next=p2.nextSibling.nextSibling;//获得下一个节点不包含空白的文档//				var  next=p2.nextElementSibling;//获得上一个节点对象包含空白文档//				var  up=p2.previousSibling.previousSibling;//获得上一个节点对象不包含空白文档var  up=p2.previousElementSibling;console.log(up);}</script></head><body  onload="demo6()"><form action="" id="form1">用户名：<input  type="text" name="username" id="username" value="请输入姓名" ><br />密码：  <input  type="password" name="pwd" id="pwd" /><br />爱好：  <input  type="checkbox" name="hobby" value="music" />音乐<input  type="checkbox" name="hobby" value="sports" />体育<input  type="checkbox" name="hobby" value="art"/>美术<br />职业：  <select name="professional" id="professional"><option value="1">工人</option><option value="2" id="p2">农民</option><option value="3">解放军</option><option value="4">知识分子</option></select><br /><input  type="button" value="提交"/></form></body></html>

18. DOM编程 – 操作元素属性

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>function  demo1(){//获得id名称是inp1对象节点var  inp1=document.getElementById("inp1");//方式一：获得节点对象的属性var  ty=inp1.type;var  va=inp1.value;var  na=inp1.name;//alert(ty+"----"+va+"---"+na);//方式一：操作元素的属性/*inp1.type="button";inp1.value="测试改变";*///方式二：获得元素的属性var  ty1=inp1.getAttribute("type");//获得市属性的默认值var  va2=inp1.getAttribute("value");//alert(va2s);//方式二：操作元素的属性inp1.setAttribute("type","button");}</script></head><body><input type="text" id="inp1" value="张三" name="uname" /><hr /><input type="button" name="" id="" value="测试元素属性" onclick="demo1()" /></body></html>

19. DOM编程 – 操作元素样式

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>function  demo1(){//获得id名称是div1的对象var div =document.getElementById("div1");//获得css样式  只是支持行内样式的cssvar  wi=div.style.width;var  hi=div.style.height;//				alert(wi+"----"+hi);//操作元素的css样式；对于background-color格式的样式在js中需要使用驼峰规则进行改变div.style.width="300px";div.style.height="300px";div.style.backgroundColor="red";//通过增加class类来增加对应的css样式；注意：classNamediv.className="div2";}</script><style>.div2{border: 3px solid  green;}</style></head><body ><div id="div1"  style="width: 200px; height: 200px; background-color: palegreen;"></div><hr /><input type="button" name="" id="" value="css样式的操作" onclick="demo1()" /></body></html>

20. DOM编程 – 操作文本元素和值

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#div1{width: 200px;height: 200px;border: 2px solid  red;}</style><script>function  demo1(){//获得div1的对象var  div=document.getElementById("div1");//获得元素的文本内容//会获得里面的HTML中的内容var  inn=div.innerHTML;//只会获得文本的信息var  inn2=div.innerText;//				console.log(inn);//				console.log(inn2);//会识别HTML信息//div.innerHTML="<h1>我们没有什么不一样</h1>"//不会识别HTML的信息div.innerText+="<h1>我们没有什么不一样</h1>"/** 注意：** 双标签有innerHTML和innerText,** 单标签获得的时候都是用value获得** 特殊的标签：**select、textarea***/}function  demo2(){//获得select对象var  sel=document.getElementById("sele");alert(sel.value);}function  demo3(){var  te= document.getElementById("tex");alert(te.value);}</script></head><body ><div id="div1"><span>我们不一样</span></div><input type="text" name="inp2" id="inp2" value="" />  <br /><!--特殊的操作--><select id="sele" onchange="demo2()"><option value="0">--请选择--</option><option value="1">中国</option><option value="2">美国</option></select> <br /><textarea rows="20" cols="20" id="tex">1223455</textarea><input type="button" value="操作元素的文本内容" onclick="demo3()" /></body></html>

21. DOM编程 – 操作元素节点对象

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>function  addNode(){//获得表单对象var  fom=document.getElementById("fom");//创建节点的方法var  p=	document.createElement("p");p.innerText="照片： "var  inp=document.createElement("input");inp.type="file";var  inp2=document.createElement("input");inp2.type="button";inp2.value="删除";inp2.onclick=function(){//移除子节点；p.removeChild(inp);p.removeChild(inp2);//移除本身p.remove();}//添加节点对象//		     fom.appendChild(p);//获得最后一个节点对象var  lastNode=document.getElementById("lastNode");//在指定元素之前添加节点fom.insertBefore(p,lastNode);p.appendChild(inp);p.appendChild(inp2);}</script></head><body><form  id="fom"><p>用户名：<input type="text" /></p><p>照片：<input type="file" /><input type="button" value="添加"  onclick="addNode()"/></p><p id="lastNode"><input type="button" name="" id="" value="提交" /><input type="button" name="" id="" value="清空" /></p></form></body></html>

t.getElementById(“fom”);

//创建节点的方法var  p=	document.createElement("p");p.innerText="照片： "var  inp=document.createElement("input");inp.type="file";var  inp2=document.createElement("input");inp2.type="button";inp2.value="删除";inp2.onclick=function(){//移除子节点；p.removeChild(inp);p.removeChild(inp2);//移除本身p.remove();}//添加节点对象

// fom.appendChild§;
//获得最后一个节点对象
var lastNode=document.getElementById(“lastNode”);
//在指定元素之前添加节点
fom.insertBefore(p,lastNode);
p.appendChild(inp);
p.appendChild(inp2);
}

</script></head><body><form  id="fom"><p>用户名：<input type="text" /></p><p>照片：<input type="file" /><input type="button" value="添加"  onclick="addNode()"/></p><p id="lastNode"><input type="button" name="" id="" value="提交" /><input type="button" name="" id="" value="清空" /></p></form></body>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航