WEB学习——JavaScript

1.主要内容
　　核心（ECMAScript）：它是整个JavaScript的核心，包含基本语法、变量、关键字、保留字、数据类型、语句、函数等
　　文档对象模型（DOM）：包含整个HTML页面内容
　　浏览器对象模型（BOM）：包含整个浏览器的相关内容

2.引入方式
　　内部引入：直接将javascript代码写到< script type=”text/javascript”>< /script>
　　外部引入：需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script标签的src属性引入该外部的js文件

2.ECMAScript
　　1）.语法：
　　　　区分大小写
　　　　变量是弱类型的
　　　　每行结尾分号可有可无（推荐写上）
　　2）.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！
　　3）.数据类型：
　　　　原始数据类型(undefined/null/string/number/boolean)
　　　　引用数据类型（Object，null是属于Object类型，常用7个对象：String、Number、Boolean、Math、Date、Array和Regxp）
　　　　　　可以使用instanceof方法判断变量类型，例如 a instanceof Object 返回true或者false
　　　　注意：null与undefined的区别
　　　　　　　　null：对象不存在
　　　　　　　　undefined：对象存在，但是没有初始化
　　4）运算符：==与===的区别
　　　　==号会尝试进行类型转换，如果转换后值相同，则返回true，===直接进行判断，值或者类型不同直接返回false
　　
　　5）.定时操作：setInterval(code,millisec) 按照指定毫秒值来周期性的调用函数或者表达式
　　　　code：要调用的函数或要执行的代码串
　　　　millisec：毫秒值，周期性调用code
　　　该函数存在返回值，返回的是该函数的ID值，通过该ID值可以将该定时操作结束，通过其clearInterval()方法，如 clearInterval(id)

　　6）.提交按钮submit，当对其设置监听函数的返回内容，例如onsubmit()(“return checkForm()”)，如果checkForm()函数返回的false，则不发送内容至服务器，不写返回值则返回form表单的值
　　7）函数传参 function fun(parameter1 , parameter2){…}
　　　　注意不需要var来定义参数，直接写参数名即可
　　　　
3.浏览器对象模型（BOM）
　　1）.Window对象：表示浏览器中打开的窗口
　　
　　2）.Location对象：包含有关当前URL的信息
　　　通过js实现页面跳转的方法：window.location.href=” ”
　　
　　3）.History对象：包含用户（在浏览器中）访问过的URL
　　　返回上一个页面：οnclick=”javascript:history.back()”
　　　go参数值：-1返回上一个页面，-2返回上上个页面。1进入下一个历史页面
　　　让按钮点击失效：onclick:”javascript:volid(0)”
　　　　
　　4）.Navigator对象：包含有关浏览器的信息
　　
　　5）.screen对象：有关客户端显示屏幕的信息
　　

4.文档对象模型（DOM）
　　1）文档对象模型
　　
　　Document:整个html文件都成为一个document文档
　　Element:所有的标签都是Element元素
　　Attribute：标签里面的属性
　　Text：标签中间夹着的内容为text文本
　　Node:document、element、attribute、text统称为节点node.

　　2）Document对象
　　每个载入浏览器的 HTML 文档都会成为 Document 对象。
　　
　　两个getElements方法获取之后需要遍历
　　以下两个方法很重要，但是在手册中查不到！
　　　创建文本节点：document.createTextNode()
　　　创建元素节点：document.createElement()
　　
　　->获取元素
　　通过ID获取元素：document.getElementById(“id名称”) ：如果id是一个字符串必须加上”“，如果id是变量则不需要加
　　获取元素内容：document.getElementById(“id名称”).value
　　通过name获取元素：document.getElementsByName(“标签name”)：因为name可以多个相同标签公用，以此来分组，因此该函数返回的是一个数组，需要遍历
　　
　　->获取表格的行
　　首先获取表格：var vTable = document.getElementById(“tableId”) ;
　　获取除表头外的行数： var len = vTable.tBodies[0].rows.length ;
　　　注：tBodies是数组表格自带的一个属性值，该值是一个数组，存储的是表格中tbody标签（一个table中可以有多个tbody），每个tbody有多行；
　　　　　rows表示行标签属性，也是一个数组，存储的是行标签，可以使用其lentgh属性获取每个tbody的行数，也可以通过i下标索引来操作行数据。
　　　　　　例如：vTable.tBodies[0].rows[0].style.backgroundColor=”pink” ;
　　
　　->操作HTML页面内容
　　操作HTML元素：通过id对页面元素进行赋值
　　　　　　document.getElementById(“id名称”).innerHTML = … ；
　　写到文档输出：把内容直接写到HTML代码中输出
　　　　　　document.write(“< p>Hello JavaScript< /p>”)
　　
　　3）Element对象
　　我们所认知的html页面中所有的标签都是element元素

　　使用方式就是document.getElementById(“id”).以上方法，通过获取到的element来调用
　　
　　4）Attribute对象
　　我们所认知的html页面中所有标签里面的属性都是attribute
　　
　　　　　　　　　　
5.事件：
　　onsubmit()此事件写在form标签中，必须有返回值。
　　onload()此事件只能写一次并且放到body标签中，也可以使用windows.onload = function{…}实现
　　其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)
　　
　　onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
　　onclick/ondblclick:鼠标单击和双击事件
　　onkeydown/onkeypress：搜索引擎使用较多
　　onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
　　onmouseover/onmouseout/onmousemove：购物网站商品详情页。
　　onsubmit：表单提交事件，有返回值，控制表单是否提交。
　　onchange:当用户改变内容的时候使用这个事件(二级联动)

6.JavaScript内置对象

　　1）Array对象
　　数组的创建：
　　数组的特点：
　　　　长度可变！数组的长度=最大角标+1
　　2）Boolean对象
　　Boolean对象创建：
　　如果value 不写，那么默认创建的结果为false
　　3）Date对象
　　 getTime()返回 1970 年 1 月 1 日至今的毫秒数。
　　　解决浏览器缓存问题
　　4）Math和number对象
　　和Java中基本一样
　　5）String对象
　　match()：找到一个或多个正则表达式的匹配。
　　substr()：从起始索引号提取字符串中指定数目的字符。
　　substring()：提取字符串中两个指定的索引号之间的字符。
　　6）RegExp对象
　　正则表达式对象
　　test()：检索字符串中指定的值。返回 true 或 false。
注：一些常用的正则表达式示例：
　　　　1、匹配所有的正数：^[0-9]+$
　　　　2、匹配所有的小数：^-?[0-9].?[0-9]3、匹配所有的整数：−?[0−9]+3、匹配所有的整数：−?[0−9]+ 3、匹配所有的整数：^-?[0-9]+
　　　　4、提取信息中的中文字符串： [\u4e00-\u9fa5]* ;
　　　　5、提取信息中的邮件地址：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*
　　　　6、提取信息中的中国手机号码：(86)*0*13\d{9}
　　　　7、提取信息中的中国固定电话号码：((\d{3,4})|\d{3,4}-|\s)?\d{8}
　　　　8、提取信息中的中国邮政编码：[1-9]{1}(\d+){5}
　　　　9、提取信息中的中国身份证号码：\d{18}|\d{15}
　　　　10、提取信息中的任何数字：(-?\d*)(.\d+)?
　　　　11、匹配HTML标记的正则表达式：/<(.)>.<\/\1>|<(.*) \/>/
　　　　12、匹配邮箱：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
　　7）全局函数
　　全局属性和函数可用于所有内建的 JavaScript 对象
　　
　　其中：
　　关于编码和解码的一组方法、eval()函数以及parseInt()函数的一些举例：

<script><!--编码和解码-->var str = "张三";//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89//alert(decodeURI(encodeURI(str)));//张三//alert(decodeURIComponent(encodeURIComponent(str)));//张三var str1 = "http://www.itheima.cn";//alert(encodeURI(str1));//http://www.itheima.cn//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn<!--eval-->var str2 = "alert('abc')";//alert(str2);eval(str2);<!--parseInt()方法-->parseInt("10")  //返回10parseInt("11"，10)  //返回11parseInt("11"，2)  //返回3parseInt("11"，8)  //返回9parseInt("11"，16)  //返回17
</script>

7.常见的js实现
　　1）轮播图
　　　　可以在body标签中添加onload()事件监听函数，在函数中使用 document.getElementById(“id名称”)获取到该元素，然后使用src方法修改图片。即：document.getElementById(“sowingImg”).src=”2.jgp” ，配合循环语句和一个全局变量即可实现轮换播放。
　　　　代码如下：

<!--JavaScript代码-->
<script>function init(){setInterval("changeImg()",3000);}var i=1;function changeImg(){i++;var imgEl = document.getElementById("img1");imgEl.src="../img/"+i+".jpg";if(i==3){i=0;}}
</script><!--Html部分代码-->
<!--确定事件：onload  加在body里面！-->
<body onload="init()"><!--给指定的图片位置定义一个id-->
<img src="../img/1.jpg" width="1300px" id="img1"/>

　　2）表单验证功能
　　　如下代码实现

<!--Javascript部分代码：-->
<script>function showTips(id,info){//获取span元素，给出提示信息document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";}function check(id,info){//获取用户输入的数据var uValue = document.getElementById(id).value;//进行判断if(uValue==""){//在span位置给出错误提示信息document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";}else{document.getElementById(id+"span").innerHTML="";}}
</script><!--HTML部分代码：-->
<input type="text" name="user" id="user" onfocus="showTips('user','用户名必须以字母开头！')" onblur="check('user','用户名不能为空！')"/>
<span id="userspan"></span>

　　3）复选框全选和全不选
　　复选框要把全选框和下面的复选框区分，复选框的name要相同
　　代码如下：

<!--Javascript部分代码：-->
<script>function checkAll(){//1.获取编号前面的复选框var checkAllEle = document.getElementById("checkAll");//2.对编号前面复选框的状态进行判断if(checkAllEle.checked==true){//3.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//4.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//5.拿到每一个复选框，并将其状态置为选中checkOnes[i].checked=true;}}else{//6.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//7.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//8.拿到每一个复选框，并将其状态置为未选中checkOnes[i].checked=false;}}}
</script><!--HTML部分代码：-->
<!--复选框前面的：--><th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th><!--下面所有的复选框：-->
<td><input type="checkbox" name="checkOne"/></td>

　　
　　4）动态添加标签
　　例如按钮点击动态添加城市
　　代码如下：

<!--JavaScript代码-->
<script>window.onload = function(){document.getElementById("btn").onclick = function(){//1.获取ul元素节点var ulEle = document.getElementById("ul1");//2.创建城市文本节点var textNode = document.createTextNode("深圳");//深圳//3.创建li元素节点var liEle = document.createElement("li");//<li></li>//4.将城市文本节点添加到li元素节点中去liEle.appendChild(textNode);//<li>深圳</li>//5.将li添加到ul中去ulEle.appendChild(liEle);}}
</script>       <!--html部分代码-->
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1"><li>北京</li><li>上海</li><li>广州</li>
</ul>

　　5）省市二级联动　　
第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。

<!--JavaScript代码-->
<script>//1.创建一个二维数组用于存储省份和城市var cities = new Array(3);cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");function changeCity(val){//7.获取第二个下拉列表var cityEle = document.getElementById("city");//9.清空第二个下拉列表的option内容cityEle.options.length=0;//2.遍历二维数组中的省份for(var i=0;i<cities.length;i++){//注意，比较的是角标if(val==i){//3.遍历用户选择的省份下的城市for(var j=0;j<cities[i].length;j++){//alert(cities[i][j]);//4.创建城市的文本节点var textNode = document.createTextNode(cities[i][j]);//5.创建option元素节点var opEle = document.createElement("option");//6.将城市的文本节点添加到option元素节点opEle.appendChild(textNode);//8.将option元素节点添加到第二个下拉列表中去cityEle.appendChild(opEle);}}}}
</script><!--HTML部分代码-->
<select onchange="changeCity(this.value)"><option>--请选择--</option><option value="0">湖北</option><option value="1">湖南</option><option value="2">河北</option><option value="3">河南</option>
</select>
<select id="city">
</select>

全国省市
北京京北京
　　东城区西城区崇文区宣武区朝阳区丰台区石景山区海淀区门头沟区
　　房山区通州区顺义区昌平区大兴区怀柔区平谷区密云县延庆县
上海沪上海
　　黄浦区卢湾区徐汇区长宁区静安区普陀区闸北区
　　虹口区杨浦区闵行区宝山区嘉定区浦东新区金山区
　　松江区青浦区南汇区奉贤区崇明县
天津津天津
　　和平区河东区河西区南开区河北区红桥区塘沽区汉沽区大港区东丽区
　　西青区津南区北辰区武清区宝坻区宁河县静海县蓟县
重庆渝重庆
　　万州区涪陵区渝中区大渡口区江北区沙坪坝区九龙坡区南岸区北碚区
　　万盛区双桥区渝北区巴南区黔江区长寿区江津区合川区永川区南川区
　　綦江县潼南县铜梁县大足县荣昌县璧山县梁平县城口县丰都县垫江县
　　武隆县忠县开县云阳县奉节县巫山县巫溪县石柱土家族自治县
　　秀山土家族苗族自治县酉阳土家族苗族自治县彭水苗族土家族自治县
黑龙江黑哈尔滨
　　哈尔滨市齐齐哈尔市鸡西市鹤岗市双鸭山市大庆市伊春市
　　佳木斯市七台河市牡丹江市黑河市绥化市大兴安岭地区
吉林吉长春
　　长春市吉林市四平市辽源市通化市白山市
　　松原市白城市延边朝鲜族自治州
辽宁辽沈阳
　　沈阳市大连市鞍山市抚顺市本溪市丹东市锦州市营口市
　　阜新市辽阳市盘锦市铁岭市朝阳市葫芦岛市
山东鲁济南
　　济南市青岛市淄博市枣庄市东营市烟台市潍坊市济宁市泰安市威海市
　　日照市莱芜市临沂市德州市聊城市滨州市菏泽市
山西晋太原
　　太原市大同市阳泉市长治市晋城市朔州市
　　晋中市运城市忻州市临汾市吕梁市
陕西陕或秦西安
　　西安市铜川市宝鸡市咸阳市渭南市延安市
　　汉中市榆林市安康市商洛市
河北冀石家庄
　　石家庄市唐山市秦皇岛市邯郸市邢台市保定市
　　张家口市承德市沧州市廊坊市衡水市
河南豫郑州
　　郑州市开封市洛阳市平顶山市安阳市鹤壁市新乡市焦作市济源市
　　濮阳市许昌市漯河市三门峡市南阳市商丘市信阳市周口市驻马店市
湖北鄂武汉
　　武汉市黄石市十堰市宜昌市襄樊市鄂州市荆门市孝感市荆州市
　　黄冈市咸宁市随州市恩施土家族苗族自治州仙桃市潜江市天门市神农架林区
湖南湘长沙
　　长沙市株洲市湘潭市衡阳市邵阳市岳阳市常德市张家界市
　　益阳市郴州市永州市怀化市娄底市湘西土家族苗族自治州
海南琼海口
　　海口市三亚市五指山市琼海市儋州市文昌市万宁市东方市定安县
　　屯昌县澄迈县临高县白沙黎族自治县昌江黎族自治县乐东黎族自治县
　　陵水黎族自治县保亭黎族苗族自治县琼中黎族苗族自治县
江苏苏南京
　　南京市无锡市徐州市常州市苏州市南通市连云港市淮安市
　　盐城市扬州市镇江市泰州市宿迁市
江西赣南昌
　　南昌市景德镇市萍乡市九江市新余市鹰潭市赣州市吉安市
　　宜春市抚州市上饶市
广东粤广州
　　广州市韶关市深圳市珠海市汕头市佛山市江门市湛江市茂名市
　　肇庆市惠州市梅州市汕尾市河源市阳江市清远市
　　东莞市中山市潮州市揭阳市云浮市
广西桂南宁
　　南宁市柳州市桂林市梧州市北海市防城港市钦州市贵港市
　　玉林市百色市贺州市河池市来宾市崇左市
云南云或滇昆明
　　昆明市曲靖市玉溪市保山市昭通市丽江市思茅市临沧市
　　楚雄彝族自治州红河哈尼族彝族自治州文山壮族苗族自治州
　　西双版纳傣族自治州大理白族自治州德宏傣族景颇族自治州
　　怒江傈僳族自治州迪庆藏族自治州
贵州贵或黔贵阳
　　贵阳市六盘水市遵义市安顺市铜仁地区毕节地区
　　黔西南布依族苗族自治州黔东南苗族侗族自治州黔南布依族苗族自治州
四川川或蜀成都
　　成都市自贡市攀枝花市泸州市德阳市绵阳市广元市遂宁市
　　内江市乐山市南充市眉山市宜宾市广安市达州市雅安市
　　巴中市资阳市阿坝藏族羌族自治州甘孜藏族自治州凉山彝族自治州
内蒙古内蒙古呼和浩特
　　呼和浩特市包头市乌海市赤峰市通辽市鄂尔多斯市呼伦贝尔市
　　巴彦淖尔市乌兰察布市兴安盟锡林郭勒盟阿拉善盟
宁夏宁银川
　　银川市石嘴山市吴忠市固原市中卫市
甘肃甘或陇兰州
　　兰州市嘉峪关市金昌市白银市天水市武威市张掖市平凉市
　　酒泉市庆阳市定西市陇南市临夏回族自治州甘南藏族自治州
青海青西宁
　　西宁市海东地区海北藏族自治州黄南藏族自治州海南藏族自治州
　　果洛藏族自治州玉树藏族自治州海西蒙古族藏族自治州
西藏藏拉萨
　　拉萨市昌都地区山南地区日喀则地区那曲地区阿里地区林芝地区
新疆新乌鲁木齐
　　乌鲁木齐市克拉玛依市吐鲁番地区哈密地区昌吉回族自治州
　　博尔塔拉蒙古自治州巴音郭楞蒙古自治州阿克苏地区
　　克孜勒苏柯尔克孜自治州喀什地区和田地区伊犁哈萨克自治州
　　塔城地区阿勒泰地区石河子市阿拉尔市图木舒克市五家渠市
安徽皖合肥
　　合肥市芜湖市蚌埠市淮南市马鞍山市淮北市铜陵市安庆市
　　黄山市滁州市阜阳市宿州市巢湖市六安市亳州市池州市宣城市
浙江浙杭州
　　杭州市宁波市温州市嘉兴市湖州市绍兴市
　　金华市衢州市舟山市台州市丽水市
福建闽福州
　　福州市厦门市莆田市三明市泉州市漳州市南平市龙岩市宁德市
台湾台台北
　　台北市高雄市基隆市台中市台南市新竹市嘉义市
香港港香港
　　中西区湾仔区东区南区油尖旺区深水埗区九龙城区黄大仙区观塘区
　　荃湾区葵青区沙田区西贡区大埔区北区元朗区屯门区离岛区
澳门澳澳门
澳门
注：1、以下城市为副省级市：沈阳、大连、长春、哈尔滨、南京、杭州、宁波、厦门、济南、青岛、武汉、广州、深圳、成都、西安。
2、以下城市为计划单列市：大连、宁波、厦门、青岛、深圳。

WEB学习——JavaScript相关推荐

web学习——JavaScript(1)
1.js的调用方式与执行顺序使用方式 HTML页面中的任意位置加上<script type="module"></script>标签即可. 常见使用方式有 ...
通过制作数字桌面游戏和Web应用程序学习JavaScript
Building 2D games can be a great way to learn JavaScript, especially when working through the basics ...
老徐WEB：js入门学习 - javascript变量
javascript变量是最基础的知识,也是学习任何编程语言都会接触,并且要学习的知识. 如果你在编程过程中需要存放一个数字,比如100,那么你首先要声明一个变量,然后把数字100赋值给变量,这样在程 ...
每个程序员都需要学习 JavaScript 的7个理由
最近在和招聘经理交流现在找一个好的程序员有多难的时候,我渐渐意识到了现在编程语言越来越倾重于JavaScript.Web开发人员尤其如此.所以,如果你是一个程序员,那么你应该去学习JavaScript ...
更快学习 JavaScript 的 6 个思维技巧
2019独角兽企业重金招聘Python工程师标准>>> 我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是 ...
[译] 学习 JavaScript：9 个常见错误阻碍你进步
本文讲的是[译] 学习 JavaScript:9 个常见错误阻碍你进步, 原文地址:Learning JavaScript: 9 Common Mistakes That Are Holding Yo ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
如何循序渐进有效学习 JavaScript？
张克军 , 豆瓣前端工程师 185 票,来自 haochuan . Yin .知乎用户更多我的建议: 1. 选本好书 http:// book.douban.com/subject /2994 ...
javascript 中文帮助文档_实战式方法学习JavaScript（1）
案例1:表格行悬停提示效果 [参考文献] 1.JavaScript前端开发模块化教材(人民邮电出版社)赵健保 2.https://www.w3cschool.cn/ 任务导入: 在Web标准中,HTM ...
Web学习之跨域问题及解决方案
Web学习之跨域问题及解决方案 javascript/jquery 浏览数:161 2017-5-8 在做前端开发时,我们时常使用ajax与服务器通信获取资源,享受ajax便利的同时,也知道它有限制: ...

WEB学习——JavaScript

WEB学习——JavaScript相关推荐

最新文章

热门文章