1. 定义JS的两种方式：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <!-- 定义js --> <!-- js的两种定义方式可以混用，加载顺序为自然顺序 --> <!-- 不要把两种定义方式合并起来写 --> <!--第一种--> <script type="text/javascript"> function testButton() { alert("hello js!"); } </script> <!-- 第二种 --> <script type="text/javascript" src="first_js.js"></script> <!-- 第二种 错误--> <!--<script type="text/javascript" src="first_js.js"> function test() { } </script>--> </head> <body> <input type="button" value="测试js" onclick="testButton();" /> <input type="button" value="测试js" onclick="test();" /> </body> </html>
2.if，循环语句：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> <!-- js和Java都是一种语言 --> <!-- Java是强类型的语言，JavaScript是弱类型的语言：所谓的强弱，就是看定义变量时存不存在多种类型 --> <!-- 在js中无论声明什么样的数据，都只需要一个类型 var --> var global = "我是全局变量"; function test() { var string = "zhangsan"; var integer = 15; var doubleIt = 12.11; <!-- 特殊定义全局变量的方式 --> blobal2 = "我是global2";<!-- 在函数中声明一个变量，如果不声明变量类型var，就默认是全局变量 --> alert(string+"-------"+integer+"------"+doubleIt+"-------"+global+"-------"+blobal2); } <!-- --> /* 等同于===就等同于==，只是两个等号会自动把类型转换为一致(如果var string = "12"，var int1 = 12，在js中使用==号就会自动把string="12"--->string=12) */ function test2() { var int1 = "12"; var int2 = 12; if(int1 == int2) { alert(111); } else { alert(222); } } /* 运算符 */ function test3() { var int1 = 1; var int2 = 1; if(int1 == int2) { alert("相同"); } else if(int1 === int2) { alert("类型相同"); } else { alert("都不相同"); } var today = 1; switch(today) { case 1 : alert("今天星期一"); break; case 2 : "今天星期二"; break; default : "不懂了吧，这是中国农历"; } } // 循环语句 function test4() { /**for(var i = 0; i < 3; i++) { alert(i); }*/ /**var j = 0; while(j < 5) { alert(j); j++; }*/ // 打印三角形 for(var i = 0;i < 5; i++) {// 打印三角形的行数 for(var j = 0; j < 5-i; j++) { document.write("*");// 输出页面 } document.write("<br />"); } } </script> </head> <body> <input type="button" value="测试1" ondblclick="test();" /> <input type="button" value="测试2" ondblclick="test2();" /> <input type="button" value="测试3" onclick="test3();" /> <input type="button" value="测试4" onclick="test4();" /> </body> </html>
3.函数和参数：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> /* 在Java中有method(方法)，但是在js中不叫方法，叫函数(function) */ /* Java定义方法：访问修饰符，返回值类型(void) 方法名(声明类型的参数1，声明类型的参数2){ 方法体 } js定义函数:function 函数名(不带类型的参数1, 不带类型的参数2) { 函数体 } js就算不声明返回类型，依然可以返回(return) 就算不声明void，也可以不返回 js的形式参数一定不能有类型 */ function test1(description, hireDate) { alert(description+"----------"+hireDate); var a = "我是a"; return a; } // 在哪里调用函数，参数就会从哪里被传递过来 function test2(age, name) { alert(age+"---------"+name); var description = "我是描述"; var hireDate = "我是日期"; var b = test1(description, hireDate); alert(b); } // 匿名函数 var test5 = function() { alert("我是匿名函数"); } // 如果在匿名函数中使用一个变量去接收，这个变量包含了函数所有东西 // 如果以一个函数的形式去接收，只会执行函数体中的内容 function test6() { var test7 = test5; alert(test7); } </script> </head> <body> <input type="button" onclick="test2();" value="测试" /> <input type="button" onclick="test6();" value="测试" /> </body> </html>
4.事件机制
<!DOCTYPE> <html> <head> <title></title> <meta charset=UTF-8/> <script type="text/javascript"> function test(){ alert("测试onclick"); } </script> <script type="text/javascript"> function test1(){ alert("测试ondblclick---双击"); } </script> <script type="text/javascript"> function test2(){ alert("测试onmousedown---按下鼠标是触发"); } </script> <script type="text/javascript"> function test3(){ alert("测试onmouseup---按下鼠标松开后触发"); } </script> <script> function test4(){ alert("测试onmouseover--当鼠标移动到某对象范围上触发"); } </script> <script type="text/javascript"> function test5(){ alert("测试onmousemove---当鼠标移动时候触发"); } </script> <script type="text/javascript"> function test6(){ alert("测试onmouseout---当鼠标离开某范围对象是触发"); } </script> <script type="text/javascript"> function test7(){ alert("测试onkeyperss--当键盘上某个键被按下并且释放是触发"（一直按下？）); } </script> <script type="text/javascript"> function test8(){ alert("测试onkeydown---当键盘上某个键被按下时触发（一直按下）"); } </script> <script type="text/javascript"> function test9(){ alert("测试onkeyup---当键盘上某个按键被按放开时触发此事件"); } </script> </head> <body> <input type="button" value="测试onclick" onclick="test();"/> <input type="button" value="测试ondblclick" ondblclick="test1();"/> <input type="button" value="测试onmousedown" onmousedown="test2();"/> <input type="button" value="测试onmouseup" onmouseup="test3();"/> <input type="button" value="测试onmouseover" onmouseover="test4();"/> <input type="button" value="测试onmousemove" onmousemove="test5();"/> <input type="button" value="测试onmouseout" onmouseout="test6();"/></br> <input type="button" value="测试onkeypress" onkeypress="test7();"/> <input type="text" value="测试7" onkeypress="test7();"/></br> <input type="button" value="测试onkeydown" onkeydown="test8();"/> <input type="text" value="测试8" onkeydown="test8();"/></br> <input type="button" value="测试onkeyup" onkeyup="test9();"/> <input type="text" value="测试9" onkeyup="test9();"/></br> </body> <ml>
5.字符串的简单运算：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // eval:把字符串格式的数据进行简单的运算 // eval只有一个参数 // eval原理：就是把数字格式的字符串转换为数字类型，然后再进行计算 function test1() { var string1 = "12"; var string2 = "13"; var eval1 = eval(string1); var eval2 = eval(string2); alert(eval1+"-----"+eval2); alert(eval1+eval2); alert(eval(string1)+eval(string2)); } // parse************ // parseInt() == Integer.parseInt(); // parseDouble() == Double.parseDouble(); function test2() { var string1 = "13"; var string2 = "14"; alert(parseInt(string1)); } // isNaN:判断一个非法的数字 12 / 0，返回的是true或者false function test3() { alert(12/0); alert(isNaN(12/0)); } // isFinite():判断是否为一个数字,返回的是true或者false function test4() { alert(isFinite("15")); } // escape():进行编码 // unescape():进行解码 // 一般情况下，只针对于中文 function test5() { // 进行编码：好处一：防止信息被泄露，好处二：防止中文乱码 alert(escape("我是李四"));//GBK alert(unescape("%u6211%u662F%u674E%u56DB")); } </script> </head> <body> <input type="button" value="测试eval" onclick="test1();" /> <input type="button" value="测试parse" onclick="test2();" /> <input type="button" value="测试isNaN" onclick="test3();" /> <input type="button" value="测试isFinite" onclick="test4();" /> <input type="button" value="测试escape" onclick="test5();" /> </body> </html>
6.控制台记录：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // onfocus:聚焦 // onblur:失去焦点 // 在js调试中，首先要想到alert，然后必须会使用console.log();-->输出控制台 function test1() { console.log("我是被输出了"); } // 键盘事件 function test2() { console.log("我也被触发了"); } </script> </head> <body> 鼠标事件：<input type="text" onblur="test1();" /> 键盘事件：<input type="text" onkeyup="test2();" /> </body> </html
7.event事件获取键盘ascii：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // event对象:事件的对象，监控的是一个事件的状态 function test1(ev){// 参数是形式参数，名字可以自己定义 var evt = window.ev||event;// 就是为了兼容IE浏览器，IE浏览器是默认只能取出event var code = evt.keyCode||charCode;// 获取到了键盘上对应的ascii alert(code); } </script> </head> <body onkeypress="test1(event);"> </body> </html>
8.键盘记录：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> var str = ""; function test1(ev) { var ascii = ev.keyCode;// charCode:默认只支持到IE8 str = str + String.fromCharCode(ascii); document.getElementById("div1").innerHTML = str; } </script> </head> <body onkeydown="test1(event)"> <input type="password" /> <div id="div1"></div> </body> </html>
9.获取目标的类型，值，事件机制等：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // event对象:事件的对象，监控的是一个事件的状态 function test1(ev){// 参数是形式参数，名字可以自己定义 var evt = window.ev||event;// 兼容IE，获取event对象 // 鼠标事件 var src = evt.srcElement||evt.target;// 为了兼容IE，IE浏览器默认兼容target // src就代表了button的对象，也就是获取到了button的所有内容 //var test = function(){alert(111);} // src是获取不到当前标签 alert(src.type); } </script> </head> <body> <input type="button" value="测试鼠标" onclick="test1(event)" /> </body> </html>
10.confirm 和 prompt：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> function test1() { // alert()：警告 alert("弹窗测试");// 会非常不友好，在10年前用户体验还可以，经过发展，出现了各种插件对alert进行重写修改，样式很漂亮，但是还是很不友好，现在弹窗功能几乎废弃 // alert(js中)<--->alter(oracle中用的) // 现在alter用的最多的地方就是进行调试，后来Google和firefix开始支持控制台调试，console.log();，再后来Firefox变了，不专一了，console.log()就被他废弃了 } function test2() { var name = prompt("请输入您的姓名！");//弹出个输入框，让输东西 console.log(name); } function test3() { // 最常用 var isSuccess = confirm("此信息一旦删除就无法恢复，您确定删除吗？");// 返回一个boolean类型，也就是true/false ，弹出个确认框 alert(isSuccess);// 返回值中点击确定返回true，点击取消返回false if(confirm("此信息一旦删除就无法恢复，您确定删除吗？")) { alert("此消息已经删除"); } else { alert("没事别瞎点！"); } } </script> </head> <body> <input type="button" value="测试alert" onclick="test1();" /> <input type="button" value="测试prompt" onclick="test2();" /> <input type="button" value="测试confirm" onclick="test3();" /> </body> </html
11.时间和内置对象：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // 时间 function test1() { var date = new Date();// 当前服务器(自己电脑)的时间 // date.getYear()距1900年到至今的年数 // date.getMonth()获取到当前的月份(从0月开始) // date.getDay()获取到星期几从0开始(0代表星期天) // 不只是有get函数，还有set函数，和Java一样 date.setYear(1999); alert(date.getYear()+"-----"+date.getMonth()+"----------"+date.getDay()); alert(date.toLocaleString());// 获取到本地时间(年月日 时分秒)，以字符串的形式输出，和Java中的toString()方法一样 } // 内置对象：拿来直接使用，不需要new的对象，就称之为内置对象 System，Math，String... // String对象 function test2() { var str = "hello js";// 定义一个字符串 // charAt:获取指定下标的字符 //alert(str.charAt(1)); // substring:截取字符串 //alert(str.substring(1, 3));// 如果传入的数字为负数，会全部截取；如果有两个参数，第二个参数为负数，会倒着截取；如果第一个参数为负数，默认从字符串的起始位置开始截取；如果两个参数都为负数，就不会截取 // substr:截取字符串 //alert(str.substr(1,3)); // substr和substring的区别：substr为闭区间，但是substring为半开区间 // indexOf:获取指定字符的下标 //alert(str.indexOf("e")); // length:获取字符串的长度 alert(str.length); // toLowerCase:转换为小写 // toUppercase:转换为大写 } </script> </head> <body> <input type="button" value="测试date" onclick="test1();" /> <input type="button" value="测试String" onclick="test2();" /> </body> </html>
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // Math // random:随机数 function test1() { alert(Math.random()); } // round:四舍五入 function test2() { alert(Math.round(Math.random()*100)); } // ceil:向上取整 function test3() { alert(Math.ceil(29.01)); } // floor:向下取整 function test4() { alert(Math.floor(29.99)); } </script> </head> <body> <input type="button" value="测试random" onclick="test1();" /> <input type="button" value="测试round" onclick="test2();" /> <input type="button" value="测试ceil" onclick="test3();" /> <input type="button" value="测试floor" onclick="test4();" /> </body> </html>
12.从input框中获取输入的值：(同理还可以获取其他标签的value)
e<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // 如何从input框中获取输入的值 // 第一种：通过form获取 function test1() { var ins = document.forms[0].username.value;// 这里value就是输入input框的值，0代表第一个form的下标 alert(ins); } // 第二种：通过DOM对象获取 function test2() { var ins2 = document.getElementById("pwd1").value;// 以后这一种是总是被用到 alert(ins2); } </script> </head> <body> <form action=""> 用户名：<input type="text" name="username" /> <input type="submit" value="提交" /> <input type="button" value="测试点击" onclick="test1();" /> </form> <form action=""> 需要打印的行数：<input type="text" name="pwd" id="pwd1" /> <input type="submit" value="提交" /> <input type="button" value="测试点击" onclick="test2();" /> </form> </body> </html>
13.更换一定范围背景颜色：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> function chageBackgroundColor() { var div = document.getElementById("div1");// 获取到的是一个object对象 div.style.backgroundColor = "blue"; } </script> </head> <body> <div id="div1" style="background:red; 200px;height:200px;" onclick="chageBackgroundColor();"></div> </body> </html>