Web基础之JavaScript实战

来源：互联网发布：hitleap类似的软件编辑：程序博客网时间：2024/05/22 20:43

Web基础之JavaScript实战

一、JavaScript基本概念：

1.JS的执行环境

宿主环境：客户端的JS代码的执行需要宿主环境，一般来说，客户端的浏览器就是JS的宿主环境

解析器：JS代码的执行需要一个解析器来解析JS代码，即JS是一种解释性语言，没有编译，运行时由解析器负责解释运行，现在的主流浏览器一般多带有解析器 IE浏览器 V8版本后都支持JS；

2.注意：

2.1 <script>标签可以写在文档的任何位置

2.2 JavaScript的执行顺序：按照在HTML文件中出现的顺序依次执行

二、JS语法简介：

（推荐下载谷歌浏览器，很多人会觉得用什么浏览器都一样，其实不然，谷歌浏览器的强大的Debug功能非常好用，下面你就会见识到，相信我，我现在已经喜欢上用谷歌浏览器了）

2.1 JavaScript 类型：undefined、null、String、Boolean、Number、Object(注意，function是Object的子类)

2.2在JS中，一个未初始化的变量，它的值就是undefined

2.3 如果一个变量预计将要指向一个对象，可以设置初始值为null

2.4 双引号或者单引号包裹的内容就是字符串String

2.5 Boolean: true、false

2.6 Number:

正无穷大：Infinity

负无穷大：-Infinity

不是一个数字(Not a Number)：NaN，用isNaN()判断是否是一个数字

在JS除0：正数/0会得到正无穷大，负数/0会得到负无穷大，0/0会等到NaN

字符串转为Number类型：parseInt, parseFloat

2.7 Object:

定义一个对象：

var obj = {}; 或者

var obj = {age:20, name:"Peter", address:"南华大学计算机学员"};

或者

var obj = new Object();

给对象加属性：

obj.name = "张三";

obj.sex = "Female";

给对象加方法：

obj.toString = function() {

console.log("name=" + this.name + ", sex=" + this.sex);

};

对象属性访问：

用点号(.) 访问，如：obj.sex ; obj.address

用方括号([])访问，如:obj["address"]

2.8 Fuction：

函数定义:

function name () {}

或者

var name = function(){};

2.9 Array: Array不是定长的，定义的时候不需要指明长度（指明也不会报错，但是呢如果超过这个长度，也不会报错），类比java.util.ArrayLIst，另外，由于JS是弱类型语言，所以不要求数组中的元素都是同一类型

定义：

var arr = [‘ele1’, ‘ele2’, 1];

或者：

var arr = new Array(‘ele1’, ‘ele2’, 1);

使用谷歌浏览器测试（打开谷歌浏览器，按下F12进入，选择Console选项卡，在这里我们可以尽情测试，还有很多API可以在这里查找）

测试undefined、null、string类型

三、常用API：

3.1 document.getElementById(eleId) ：获取当前页面的 id属性为eleId的元素

3.2document.getElementsByClassName(className)：获取当前页面所有的class属性为className的元素，返回一个JS数组

3.3 document.getElementsByTagName(tagName): 获取当前页面所有的元素名为tagName的元素，返回一个JS数组

3.4 [htmlElement].innerHTML: 获取htmlElement的内部HTML文本，有可能是纯文本。例如：

document.getElementsByTagName(“pre”)[0].innerHTML;

如果要改变 htmlElement的内部HTML，直接给innerHTML赋值即可：

document.getElementsByTagName("pre")[0].innerHTML="测试"；

3.5 动态创建元素，并添加到指定的父元素下：

var inputObj = document.createElement("input");

inputObj.type = "text";

var divs = document.getElementsByTagName("div");

divs[0].appendChild(inputObj);

3.6 获取input的值：

var inputObj = document.getElementsByName("userName")[0];

inputObj.value;

3.7 [htmlElement].addEventListener(eventName, function):给htmlElement元素添加事件监听器，eventName要监听的事件名称，function处理该事件的函数。

例如：

// 给 id为provinceSelect 的下拉列表，注册change事件的监听

var provinceSelectObj = document.getElementById("provinceSelect");

provinceSelectObj.addEventListener("change", function(){});

3.8 setInterval(function, milliseconds)：设置每隔 millisenconds毫秒数，执行一个function

3.9 setTimeout(function, milliseconds): 设置 millisenconds 毫秒数之后，执行一个funciton，只执行一次

四、注意的问题：

由于浏览器对HTML 的解析是从上到下解析的，所以放在 <head> 标签里的<script>里的JS代码，要注意不要直接去获取<body>中的元素（因为浏览器此时还没有解析到<body>，所以body中的元素此时都是null），而应该放到<body>元素的load事件中去获取，或者把<script>代码放到文档的最后（即</body>之后，</html>之前）。

五、JS实战项目：

项目框架：

实战一：JS注册界面

效果图：当没有输入信息的时候，文本框会显示提示消息，当有输入的时候就不会有提示消息

源代码：

regist.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>注册界面</title><!--外部引入注册界面CSS样式--><link rel="stylesheet" type="text/css" href="css/regesit.css" /><!--引入外部的JS代码文件--><script src="js/regesit.js" type="text/javascript" charset="utf-8"></script></head><body><!--页面展示效果--><div class="topwelcome"><span class="weltext">欢迎注册华信会员</span></div><div class="regesit"><span class="info">请输入用户名：</span><input id="userName" type="text" value="请输入用户名" onfocus="fouced1()" onblur="lostfocus1()" /><br /><span class="info">请输入密    码：</span><input id="pwd" type="text" value="请输入密   码" onfocus="fouced2()" onblur="lostfocus2()" /><br/></div><div class="bottomdiv"><span class="bottontext">&copy;衡阳市华信科技教育有限公司</span></div></body></html>

regist.css

.topwelcome{margin-top: 40px;text-align: center;}.weltext{font-size: 30px;font-family:"微软雅黑";color:deepskyblue;font-weight: bold;}.regesit{margin-top: 10px;text-align: center;}.info{font-size: 15px;font-family:"华文行楷";font-weight: bold;}span{margin-top: 40px;text-align: center;}input{margin-top: 30px;height: 25px;color:lightgray;font-family: "微软雅黑";font-size: 15px;}.bottomdiv{margin-top: 20px;text-align: center;}.bottontext{font-size: 15px;font-family:"华文行楷";color: gainsboro;}

regist.js

//第一个文本获得焦点逻辑处理function fouced1(){var userName =document.getElementById("userName");if(userName.onfocus && userName.value=="请输入用户名"){userName.value="";}}//第二个文本框获得焦点逻辑处理function fouced2(){var pwd =document.getElementById("pwd");if(pwd.onfocus && pwd.value=="请输入密   码"){pwd.value="";}}//第一个文本框失去焦点逻辑处理function lostfocus1(){var userName =document.getElementById("userName");if(userName.value==""){userName.value="请输入用户名"}}function lostfocus2(){var pwd =document.getElementById("pwd");if(pwd.value==""){pwd.value="请输入密   码"}}

实战二：JS省市联动效果

效果图：当选择一个省的时候，会自动出现该省下的市级

provinceandcity.html

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>省市联动效果</title><!--引入CSS样式和JS文件--><script src="js/provinceandcity.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/provinceandcity.css"/></head><body><div><!--界面展示--><span>省份：</span><select id="province" onchange="city()"><option value="" selected="selected">--请选择--</option><option value="beijing" >北京</option><option value="jiangxi" >江西</option><option value="hunan" >湖南</option></select><span>城市：</span><select id="city"><option value="" selected="selected">--请选择--</option></select></div></body></html>

provinceandcity.css

div {width: 80%;height: 50px;text-align: center;margin-top: 50px;}span {font-size: 16px;}select {width: 150px;height: 30px;font-size: 15px;margin: 20px;}option {width: 150px;height: 100px;font-size: 15px;}

provinceandcity.js

function city() {//通过Id获取选择的省份var provinceObj = document.getElementById('province');//根据id获取市级标签var cityObj = document.getElementById('city');var selectProvince = provinceObj.value;//根据选择的省份设置市级标签中的内容if(selectProvince == "") {cityObj.innerHTML = '<option value="" selected="selected">--请选择--</option>';} else if(selectProvince == "beijing") {cityObj.innerHTML = '<option value="chaoyangqu" selected="selected">朝阳区</option>' +'<option value="tiananmen" >天安门</option>' +'<option value="yiheyuan" >颐和园</option>' +'<option value="zijincheng" >紫禁城</option>';} else if(selectProvince == "jiangxi") {cityObj.innerHTML = '<option value="nanchang" selected="selected">南昌</option>' +'<option value="ganzhou" >赣州</option>' +'<option value="jiujiang" >九江</option>' +'<option value="shangrao" >上饶</option>';} else if(selectProvince == "hunan") {cityObj.innerHTML ='<option value="changsha" selected="selected">长沙</option>' +'<option value="hy" >衡阳</option>' +'<option value="zz" >株洲</option>' +'<option value="sy" >邵阳</option>';}}

实战三：JS图片滚动效果

效果图：每隔一段时间切换到下一张图片

imagescroll.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片滚动</title><!--引入css样式文件和js文件--><link rel="stylesheet" type="text/css" href="css/imagescroll.css"/><script src="js/imagescroll.js" type="text/javascript" charset="utf-8"></script></head><!--body的onload（）事件--><body onload="imagechange()"><!--承载图片的DIV并试着第一张图片--><div class="div1"><img id="imagescroll" src="img/pic1.jpg"/></div></body></html>

imagescroll.css

.div1{margin: 50px auto;width: 80%;height:300px;text-align: center;}#imagescroll{width: 534px;height: 300px;}

imagescroll.js

function imagechange(){//获取承载图片的元素var imagecontrol=document.getElementById("imagescroll");//把所有的图片封装在一个数组中var imageArr =["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];var index=0;//通过setInterval函数每隔2秒改变一下图片，注意该函数的使用方法setInterval(function(){//获取当前图片的编号var i =index;//如果超过最大编号，则回滚到第一张图片if(i>=imageArr.length){index=0;i=0;}//设置背景图片imagecontrol.src=imageArr[i];index=index+1;},2000);}

六、总结

通过这次的学习，让我JS的语法有了更加深刻的了解，发现JS也不是那么难，还是要多敲和多做，天道酬勤；同事也对JS中一些API有所了解；

最后通过这三个小项目，收获非常大，发现原来JS这么强大，也能通过自己的努力做出了我们常见的省市联动、图片滚动效果！真的非常开心!

前端基础就通过这么几节课学习完了；前端的内容有HTML,CSS,JS，这三大利器是基础，后面应该还有一些像jQuery等前端进阶技术，只有打好基础，才能学好后面的高端技术！努力，奋斗！

接下来就是后端基础阶段了，再接再厉！坚持下去！没有付出，就没有回报！

共勉！

0 0