1.Hello World 2.数据类型 3.函数 4.数组 5.Date 6.Math 7.String 8.Regular Expression javascript
1.Hello World
-
View Code<script type="text/javascript"> alert("JavaScript is running..."); document.write("写到页面去。"); console.log("写到控制台去。"); </script>
- 严格区分大小写
- 自动忽略缩进和换行
2.数据类型
- String，字符串（基本数据类型）
- Number，数值（基本数据类型）
- Boolean，布尔值（基本数据类型）
- Null，空值（基本数据类型）
- Undefined，未定义（基本数据类型）
- Object，对象（引用数据类型）
字符串 & 数值：html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day04</title> <script type="text/javascript"> /** * 定义字符串，定义数值类型 */ var str = "hello"; var num = 1314; console.log(str) console.log(num) /** * 字符串与数值类型比较 */ var a = 123; var b = "123"; console.log(a == b); //true console.log(a === b); //false /** * 打印数据类型 */ console.log(typeof a);//number console.log(typeof b);//string </script> </head> <body> </body> </html>
布尔值java
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Day09</title> <script type="text/javascript"> var flag = 8 > 17; console.log(flag);//false console.log(typeof flag);//boolean </script> </head> <body> </body> </html>
类型转换成字符串node
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day11</title> <script type="text/javascript"> var num = 110; var flag = true; /** * 1.类型转换为字符串，调用toString()方法 */ console.log(typeof num.toString());//string console.log(typeof num);//number console.log(typeof flag.toString());//string console.log(typeof flag);//boolean /** * 2.类型转换为字符串，使用String()方法 */ console.log(typeof null);//object console.log(typeof String(null));//string console.log(typeof undefined);//undefined console.log(typeof String(undefined));//string </script> </head> <body> </body> </html>
类型转换成数值正则表达式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day12</title> <script type="text/javascript"> var str = "2019"; var st2 = "2019-01-01"; var st3 = " "; /** * String类型转换为Number，使用Number()方法 * 1，纯数字字符串直接转成相应数值， * 2，非纯数字，转成NaN * 3，空白符（空格、制表），转换成数字 0 */ console.log(Number(str));//"2019" console.log(Number(st2));//"NaN" console.log(Number(st3));//"0" var f1 = true;//布尔值 var f2 = false; var f3 = null;//Null值 var f4 = undefined;//未定义 console.log(Number(f1));//"1" console.log(Number(f2));//"0" console.log(Number(f3));//"0" console.log(Number(f4));//"NaN" /** * 特殊转换方法：parseInt、parseFloat * 以数值开头的相似字符串，会被转成“NaN” */ var ts1 = "330px"; var ts2 = "size 266px"; console.log(parseInt(ts1));//"330" console.log(parseFloat(ts2));//"NaN" </script> </head> <body> </body> </html>
类型转成布尔值数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day14</title> <script type="text/javascript"> /** * 把其余类型转换成Boolean，使用Boolean()函数 */ var num = "110"; var str = "hello"; console.log(Boolean(num));//true console.log(Boolean(0));//false console.log(Boolean(str));//true console.log(Boolean(" "));//true console.log(Boolean(""));//false console.log(Boolean("true"));//true console.log(Boolean("false"));//true console.log(Boolean(null));//false console.log(Boolean(undefined));//false </script> </head> <body> </body> </html>
表示Unicode编码浏览器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day23</title> <script type="text/javascript"> /** * 输出utf字符，使用\u带上Unicode字符编码便可 */ document.write("\u2663"); document.write("\u2615"); /** * 也能够以十进制的形式表示Unicode编码 */ document.write("\♣"); document.write("\☕"); </script> </head> <body> </body> </html>
对象的基本操做dom
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day47</title> <script type="text/javascript"> /** * 对象的基本操做 * 建立对象 */ var obj = new Object(); /** * 为对象赋值 */ obj.name = "孙悟空"; obj.age = 500; obj.faith = "Buddhism";//信仰 obj.master = "Taoism";//师从 /** * 修改对象属性 */ obj.name = "sun wu kong"; /** * 删除属性 */ delete obj.master; document.write(obj.age);//页面输出对象属性 console.log(obj);//控制台输出对象 </script> </head> <body> </body> </html>
使用字面量建立对象ide
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day50</title> <script type="text/javascript"> /** * 使用字面量建立对象 */ var obj = { name:"sun wu kong", age:500, master:"Taoism", faith:"Buddhism" } console.log(obj); </script> </head> <body> </body> </html>
构造函数方式建立对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day64</title> <script type="text/javascript"> function Dog(name) { this.name = name; } function Monk(lawName) { this.lawName = lawName; } var d = new Dog("luck"); var m = new Monk("孙悟空"); document.write(d.name); console.log(m.lawName); </script> </head> <body> </body> </html>
3.函数
建立函数，并调用执行函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day51</title> <script type="text/javascript"> /** * 声明式建立函数 */ function f1() { alert("建立的函数执行啦"); console.log("函数输出到控制台"); document.write("函数输出到页面"); } //执行一个函数 f1(); </script> </head> <body> </body> </html>
当即执行函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day56</title> <script type="text/javascript"> //定义一个函数 var f2 = (function() { document.write("当即执行函数------"); }); //执行函数 f2(); //定义后就直接执行 (function() { document.write("当即执行函数------"); })(); </script> </head> <body> </body> </html>
在对象中能够存在方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day57</title> <script type="text/javascript"> /** * 当对象的属性赋值为函数时，该属性称做对象的方法 */ var obj = { name:"sunwukong", age:500, hello:function(name) { console.log("hello, i'm "+name); } } /** * 遍历对象的属性 */ for (n in obj) { document.writeln(n+": "+obj[n]+"</br>"); } //调用对象的方法 obj.hello(obj["name"]); </script> </head> <body> </body> </html>
-
- this
传递到函数的一个隐含参数，指向一个对象。表示函数执行的上下文。
根据函数调用方式的不一样：以函数形式调用，this 永远都是 window。以方法的形式调用，this 就是调用方法的对象。
- this
4.数组
使用数组对象建立数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day70</title> <script type="text/javascript"> /** * 不建议建立不连续数组 */ var arr = new Array(); arr[10] = 10; arr[15] = 115; console.log(arr.length);//长度为16 var arr2 = new Array(); arr2[arr2.length] = 10; arr2[arr2.length] = 115; console.log(arr2.length); console.log(arr2); </script> </head> <body> <p>Array</p> </body> </html>
建立数组并直接赋值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day71</title> <script type="text/javascript"> var arr1 = [10,20,30];//建立数组，并赋值 var arr2 = new Array(11,22,33);//建立数组，并赋值 var arr3 = new Array(34);//定义数组的长度 console.log(arr1);//length=3 console.log(arr2);//length=3 console.log(arr3);//length=34 /** * 数组中能够存听任何数据类型 */ var vari = [{name:"argor",role:"user"},{name:"admin",role:"admin"},{name:"roog",role:"admin"}]; console.log(vari.length); console.log(vari); </script> </head> <body> </body> </html>
数组的经常使用方法：增长、删除元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day72</title> <script type="text/javascript"> /** * 数组的经常使用方法 * push * 做用：添加元素到数组末尾， * 返回值：数组的新长度 */ var arr = ["曹操","荀彧","许褚"]; var length = arr.push("刘备","关羽","张飞","赵云","诸葛亮"); console.log(length);//长度为8 /** * pop，无参 * 做用：删除数组末尾的元素 * 返回值：删除的元素 */ var ele = arr.pop();//删除并返回“诸葛亮” console.log(ele); /** * unshift * 做用：给数组开头添加元素 * 返回值：数组的新长度 */ arr.unshift("公孙瓒","马腾","刘璋"); console.log(arr); /** * shift * 做用：删除数组开头元素 * 返回值：头元素 */ ele = arr.shift(); console.log(ele);//“公孙瓒” </script> </head> <body> <p>functions</p> </body> </html>
控制台结果：
切分：hello argor, How are you, What a good day, 查找：9 匹配：or 替换：hello-argor,-How-are-you?-What-a---good---day! 替换：hello argor, How are you? What a good day! 替换：yonghuming, length: 10
5.Date
日期对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day81</title> <script type="text/javascript"> /** * 日期 Date，获取当前时间 * 建立一个指定日期时间对象，日期格式：月/日/年 时:分:秒 */ var d = new Date(); var d1 = new Date("3/6/2016 09:31:22:888");//还能够跟上毫秒 console.log(d);//当前时间 console.log(d1);//指定时间 /** * Date对象的经常使用方法（默认Gmt时间） * getDate()//日,1-31 * getDay()//星期，0-6,0表示周日 * getMonth()//月，0-11，0表示1月，11表示12月； * getFullYear()//年 * getHours()//小时，0-23 * getMinutes()//分钟，0-59 * getSeconds()//，秒，0-59 * getMilliseconds()//毫秒，0-99 * getTime()//1970-1-1 0:0:0至今的毫秒数（毫秒时间戳） * Date.now() */ console.log(d1.getTime()); </script> </head> <body> </body> </html>
6.Math
Math工具类
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day82</title> <script type="text/javascript"> /** * Math,不是构造方法，是一个工具类 * 属性： * E,天然对数的底数 * PI,圆周率 * * 方法： * ceil,向上取整 * floor,向下取整 * round，四舍五入取整 * random,0到1的随机数(0,1) * max,获取多个数的最大值 * min,……最小值 */ console.log(Math.PI);//圆周率 for(var i=0; i<5; i++) { console.log(Math.random()); } var arr = [3,5,2,1,3,5,7,9,2,1,3,6]; console.log(Math.max(3,5,2,1,3,5,7,9,2,-1,3,6));//参数不是数组 console.log(Math.min(3,5,2,1,3,5,7,9,2,-1,3,6)); </script> </head> <body> </body> </html>
7.字符串
字符串的属性、方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day84</title> <script type="text/javascript"> /** * 字符串是以字符数组的形式保存的。 * 属性： * length，获取字符串长度 * 方法： * charAt * 0~length-1，返回指定index的字符 * charCodeAt * 返回Unicode编码 * fromCharCode * 把Unicode编码(十进制)转成字符 */ var str = "hello argor"; console.log(str.charAt(str.length-1));//r console.log(str.charCodeAt(str.length-1));//114 console.log(String.fromCharCode(114));//r /** * 方法： * concat * 拼接字符串 */ console.log(str.concat(", ", "How are you?")); /** * 方法： * indexOf * 返回字符索引，0~length-1，没找到返回 -1，重复字符返回首个字符索引。 * 第二个参数，表示开始查找的位置，是个索引值。 * lastIndexOf * …… * slice * 截取字符串，两个参数，[开始位置，结束位置） * 只是用一个参数，截取到末尾 * 接受负值 * subString * 截取字符串，两个参数，[开始位置，结束位置） * 不接受负值 */ console.log(str.indexOf('H'));//-1 console.log(str.slice(1,2)); /** * 方法： * split * 把字符串拆分为数组 */ console.log(str.split(" "));//["hello", "argor"] console.log(Array.isArray(str.split(" ")));//true console.log(str.split("e"));//["h", "llo argor"] /** * 方法： * sup * 把字符显示为上标 */ document.write(str+"@".sup()); /** * 方法： * toUpperCase * toLowerCase */ console.log(str.toUpperCase()); </script> </head> <body> </body> </html>
与正则表达式相关的方法：search、match、replace、split
8.正则表达式
定义一个正则表达式对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day86</title> <script type="text/javascript"> /** * 建立正则表达式对象，new RegExp(EXPR[, PATT]) * 参数1，正则表达式 * 参数2，匹配模式 * * 使用字面量建立正则表达式 * var re = /EXPR/PATT */ var re = new RegExp("a"); console.log(re.test("hello"));//false console.log(re.test("hello argor"));//true var re2 = /H/; var re3 = /H/i; var str = "hello argor"; console.log(re2.test(str));//false console.log(re3.test(str));//true </script> </head> <body> <p>day86</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day87</title> <script type="text/javascript"> /** * 切分 */ var str = "hello argor, How are you? What a good day!"; document.write(str+"<br/>"); var re1 = /[,?!]/; console.log("切分："+str.split(re1));//切分时，不是指定固定的拆分标识，而是使用正则匹配多个标识来完成拆分； /** * 查找 * 返回位置 */ console.log("查找："+str.search(/[oe]r/));//9,返回的是匹配到的下标 /** * 匹配 * 返回true、false */ console.log("匹配："+str.match(/[oe]r/));//or //添加一些tab str = "hello argor, How are you? What a good day!"; document.writeln(str+"<br/>"); /** * 替换 * 处理空白符 */ console.log("替换："+str.replace(/\s/g,"-"));//只替换掉匹配的首个 console.log("替换："+str.replace(/\s{1,}/g," "));//无论几个连续的空白符，都替换为一个空格 str = " yong hu m\ri ng \n \ "; str = str.replace(/\s{1,}/g,""); console.log("替换："+str+", length: "+str.length);//去除字符串中包含的全部 </script> </head> <body> </body> </html>
控制台结果：
切分：hello argor, How are you, What a good day, 查找：9 匹配：or 替换：hello-argor,-How-are-you?-What-a---good---day! 替换：hello argor, How are you? What a good day! 替换：yonghuming, length: 10
正则表达式语法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day88</title> <script type="text/javascript"> /** * 正则表达式语法： * 修饰符 * i 大小写不敏感 * g 全局匹配 * m * 方括号 * {n}，匹配n次 * n+ 至少一个 * n* 0~n个 * n? 0或1个 * ^a 以a开头 * a$ 以a结尾 * 元字符 * . 任意字符 * \w 任意字母、数字、下划线，[A-z0-9_] * \W 除了字母、数字、下划线，[^A-z0-9_] * \d 任意数字，[0-9] * \D 除了数字，[^0-9] * \s 空格 * \S 除了空格 * \b 单词边界 * \B */ var phoneNum = "13389222587 "; var re = /^1[3-9]([0-9]{9})$/;//匹配手机号 document.write(re.test(phoneNum.trim())); //匹配单词 document.write(/\bargor\b/.test("argor's blog."));//true，是独立单词 document.write(/\bargor\b/.test("aargor's blog."));//false,argor 不是一个独立单词 /** * 电子邮件 * 正则中如何匹配只有一个@？ */ var reg = /^\w+.*@\w+(\.\w+){1,2}$/;//最多支持3级域名 var emailAddr = " argor_hh.com@ @_@-@@@@@@@q_qtello.org.cn1"; console.log(emailAddr+" is "+reg.test(emailAddr.trim()));//true，存在多个@时就不行了 console.log(emailAddr+" is "+(2 == emailAddr.split("@") && reg.test(emailAddr.trim())));//false emailAddr = " argor_hh.com@q_qdo3natello.org.cn1"; console.log(emailAddr+" is "+(2 == emailAddr.split("@").length && reg.test(emailAddr.trim())));//true </script> </head> <body> </body> </html>
9.Dom
- 节点Node
View Code
- 文档节点，html - 元素节点，p、a、span - 属性节点，id、class、href - 文本节点
- 节点属性
nodeName nodeType nodeValue 文档节点 #document 9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 文本内容 - 小实例
图片轮播
View Code<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day95</title> </head> <body> <div class="contrainer"> <div class="info"> <span id="info_span1"></span> </div> <div class="img"> <img id="car_img" src="img/Carousel/2.png" /> </div> <button id="next">Next</button> <button id="previous">Previous</button> </div> <script type="text/javascript"> /** * 获取元素 */ var nextBtn = document.getElementById("next"); var prevBtn = document.getElementById("previous"); var element = document.getElementById("car_img"); var info_show = document.getElementById("info_span1"); /** * url前缀和后缀 */ var prefix = (element.src.split(/\d.png/))[0]; var suffix = ".png"; /** * 获取当前图片名称的数字 */ function getId() { var id = Number(element.src.match(/\d.png/).toString().match(/\d/)); console.log(id); return id; } /** * */ function showInfo(id) { info_show.innerHTML = "这是第 "+id+" 张图片"; } /** * 下一个 */ nextBtn.onclick = function() { var id = getId(); id++; id = (id > 3) ? 1 : id; var url = prefix+id+suffix; console.log(url); element.src = url; showInfo(id); } /** * 上一个 */ prevBtn.onclick = function() { var id = getId(); id--; id = (id < 1) ? 3 : id; var url = prefix+id+suffix; console.log(url); element.src = url; showInfo(id); } showInfo(getId()); </script> </body> </html>
全选/全不选
View Code<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day100</title> <link rel="stylesheet" href="css/day100.css" /> </head> <body> <div class="contrainer"> <div class="isAll"> <span class="item_value"><input type="checkbox" id="isAll"/></span> <span class="item_key">全选/全不选</span> </div> <div class="items"> <span id="span_dihao" > <span class="item_value"><input id="in_dihao" type="checkbox" name="sports"</span> <span class="item_key">帝豪</span> </span> <span id="span_eado"> <span class="item_value"><input id="in_eado" type="checkbox" name="sports"</span> <span class="item_key">逸动</span> </span> <span id="span_bt50"> <span class="item_value"><input id="in_bt50" type="checkbox" name="sports"</span> <span class="item_key">奔腾B50</span> </span> <span id="span_srui"> <span class="item_value"><input id="in_srui" type="checkbox" name="sports"</span> <span class="item_key">速瑞</span> </span> </div> <div class="btns"> <input id="selectAll" type="button" value="全选 / 全不选"/> <input id="selectInverse" type="button" value="反选"/> <br /> <input id="com" type="button" value="提交"/> </div> </div> <script type="text/javascript"> //checkbox var isAll = document.getElementById("isAll"); //全选 var selectAll = document.getElementById("selectAll"); //全不选 var selectNone = document.getElementById("selectNone"); //反选 var selectInverse = document.getElementById("selectInverse"); //全选对象数组 var all_sports = document.getElementsByName("sports"); //单选 var in_dihao = document.getElementById("in_dihao"); var in_eado = document.getElementById("in_eado"); var in_bt50 = document.getElementById("in_bt50"); var in_srui = document.getElementById("in_srui"); //提交 var com = document.getElementById("com"); /** * 设置“全选”效果，或者“全不选”效果； */ function setAll(flag) { for (var i = 0; i < all_sports.length; i++) { all_sports[i].checked = flag; } isAll.checked = flag;//全选联动checkbox } /** * 计算“全选/全不选” checkbox 的状态； */ function getStatus() { var status = in_dihao.checked && in_eado.checked && in_bt50.checked && in_srui.checked; return status; } /** * “全选/全不选” 按钮，设置事件 */ selectAll.onclick = (function() { var status = getStatus(); setAll(!status);//调用方法时，就联动了checkbox }); /** * “全选/全不选” checkbox，设置事件 * 添加单击事件，设置onchange事件 */ isAll.onclick = (function() {//checkbox联动单选 var status = getStatus(); setAll(!status); }); in_dihao.onchange = (function() {//单选联动checkbox isAll.checked = getStatus(); }); in_eado.onchange = (function() { isAll.checked = getStatus(); }); in_bt50.onchange = (function() { isAll.checked = getStatus(); }); in_srui.onchange = (function() { isAll.checked = getStatus(); }); /** * 反选按钮，设置事件 */ selectInverse.onclick = (function() { for (var i = 0; i < all_sports.length; i++) { all_sports[i].checked = !all_sports[i].checked; } //反选联动checkbox isAll.checked = getStatus(); }); /** * 提交按钮 */ com.onclick = (function() { var array = new Array(); in_dihao.checked ? array.push("帝豪") : 1; in_eado.checked ? array.push("逸动") : 1; in_bt50.checked ? array.push("奔腾B50") : 1; in_srui.checked ? array.push("速瑞") : 1; /** * 啥都不选，就得激励一下； * 全选提交，就得打击一下； * 有选择，在一到三个之间，直接显示； */ (array.length > 0) ? ((4==array.length) ? alert("你咋不上天呢，全都有！") : alert(array)) : alert("总的有个两轮吧！"); array = null; }); </script> </body> </html>
10.Bom
- Bom对象
- Window
表明的是整个浏览器窗口，同时window也是网页中的全局对象。 - Navigator
表明的是当前浏览器的信息，能够识别不一样的浏览器。 - Location
表明当前浏览器的地址栏信息，能够获取页面跳转信息、当前地址栏信息。 - History
表明浏览器的历史纪录。能够控制浏览器的“后退”、“前进”按钮点击效果。 - Screen
表明用户的屏幕信息，能够获取用户的显示器相关信息。
- Window
- setInterval、setTimeout方法，设置“循环执行代码”、“延时执行代码”
View Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day127</title> </head> <body> <div id="inf" style="display: inline-block;"></div> <input type="button" value="clear" style="display: none" id="bt1"/> <script type="text/javascript"> var inf = document.getElementById("inf"); var bt1 = document.getElementById("bt1"); /** * 显示时间信息 * 每隔一秒刷新一次时间 */ var si = setInterval(function(){ var time = new Date(); inf.innerHTML = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); }, 1000); /** * 显示按钮 * 5秒后显示按钮 */ var st = setTimeout(function(){ bt1.style.display="inline"; },5000); /** * 按钮单击事件 */ bt1.onclick = function() { clearInterval(si);//关闭定时器 clearTimeout(st); inf.style.display="none"; bt1.style.display="none"; }; </script> </body> </html>
JavaScript