J2EE进阶之javascript 三
来源：互联网 发布：紫萱和徐长卿知乎 编辑：程序博客网 时间：2024/06/13 02:54
# javaScript
JavaScript（js）
- 基于对象和事件驱动的脚本语言，作用客户端。
特点
- 交互性
- 安全性 （不可以访问本地的硬盘）
- 扩平台性 （浏览器可以解析js文件）
javascript与java是不同 （雷锋与雷峰塔）
- Netscape（网景）livescript
- java诞生了（改名javascript）
javascript的语言组成
- ECMAScript 标准
- BOM 浏览器对象模型
- DOM 文档对象模型
JavaScript 是基于对象的，java是面向对象
- JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。
- JavaScript 是一种弱类型语言，java是强类型语言。
javascript和html的结合
* HTML提供的标签<script type="text/javascript">js的代码</script> * 引入外部的文件 在<script>标签通过src的属性引入外部的文件，src的值是js文件的地址 * 如果<script>标签通过src属性引入了外部的文件，里面的js代码就不会执行。* 可以放在页面的任意位置（一般都放在body后边）实例代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <!-- Html提供的标签 <script type ="text/javascript">js代码</script> 引入外部的文件 在<script>标签通过src的属性引入外部的文件，src的值是js文件的地址 *如果<script>标签通过src属性引入了外部的文件，里面的js代码就不会执行。 --> <script type="text/javascript" src="dmeo.js"> //弹窗 alert("呵呵"); </script> <script type="text/javascript"> //弹窗 alert("嘿嘿"); </script></body></html>js代码
js的语法
* 关键字* 标示符* 注释 /* 多行注释 */ // 单行* 变量：使用var关键字声明变量。* 运算符 * 算术运算符 alert(true + 1); // 2 * 0或者null代表是false，非0或者非null就是true，默认用1表示 * 比较运算符 == 比较值 === 又比较值和类型变量代码示例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <script type="text/javascript"> /* * js的原始数据类型 * Undefined、Null、Boolean、Number 和 String * String 字符串类型 * 双引号和单引号都是字符串 * Number 数字类型 * 不区分整数和小数 * Boolean 布尔类型 * Null 空（给引用赋值） * Undefined 未定义（声明变量，没赋值） * 定义变量 就使用一个关键字 var * 提供了一共方法 typeof() 可以变量的类型 */ var str = "abc"; //字符串 var num = "11"; //数字类型 var flag = true; //布尔 var data = null; var un; var str2 = "bcd"; alert(typeof(str2)); //可以直接改变字符串类型 var str2 = 15; alert(typeof(str2)); </script></body></html>运算符代码示例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <script type="text/javascript"> /* 算术运算符 alert(true + 1); // 2 * 0或者null代表是false，非0或者非null就是true，默认用1表示 比较运算符 == 比较值 === 又比较值和类型 */ var num = 3710; // alert(num/1000*1000); // 3710 var str = "12"; //alert(str+1); // 121 链接字符串 //alert(str - 1); // 11 //alert("abc" - 1); // NaN //alert(true + 1); // 2 //alert(null + 1); // 1 /* if(5){ alert("大于0以上的数字就是true"); } */ var n = 3; var m; m = ++n; //alert("m="+m+","+"n="+n); var str4 = "14"; var num4 = 14; //alert(str4 == num4); alert(str4 === num4); </script></body></html>js的语句
* 判断语句 if(8 == num){ 赋值的问题，需要注意。 }else{ } * 循环语句 for(var i=0;i<=8;i++){ // 循环体 } * document对象write("字符串") * 把文本的内容写在浏览器端 * while(){}示例代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <script type="text/javascript"> /* * 判断语句 if(8 == num){ 赋值的问题，需要注意。 }else{ } * 循环语句 for(var i=0;i<=8;i++){ // 循环体 } * document对象write("字符串") * 把文本的内容写在浏览器端 * while(){ } */ for(var i=0;i<3;i++){ //alert("i = " + i); window.document.write(" i = "+ i+"<br />"); //页面写内容 } </script></body></html>函数
* java中 public String 方法名称(String str,int num){ 方法体; return null; } * js中,用到关键字 function function 方法名称(str,num){ // 参数列表不能使用var关键字 方法体; return; // 如果没有返回值，retrun可以不写。 } * 在方法体内存在一个数组 arguments 通过数组存储参数 * js动态函数（用的不多） * js提供了内置的对象 Function * var add = new Function("",""); * js匿名函数（用的较多） * 没有名称的函数 * js的全局和局部变量 全局变量：在script里面定义的变量，全局变量。可以在页面的任意位置拿到。 局部变量：在方法体内部定义的变量，局部变量。函数示例代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <script type="text/javascript"> /* java中 public String 方法名称(String str,int num){ 方法体; return null; } js中,用到关键字 function function 方法名称(str,num){ // 参数列表不能使用var关键字 方法体; return; // 如果没有返回值，retrun可以不写。 } 在方法体内存在一个数组 arguments 通过数组存储参数 js动态函数（用的不多） js提供了内置的对象 Function var add = new Function("",""); js匿名函数（用的较多） 没有名称的函数 */ function add(){ //alert("呵呵") ; } add(); function add2(x,y){ //alert(arguments.length); var sum = x+y; return sum } var sum = add2(5,6); //alert(sum); var sum2 = add2(5,8,9,10); //alert(sum2); //13 这是因为默认数组只取前两位 //动态函数 var param1 = "var sum;sum=x+y;return sum;"; var param2 = "var sum;sum=x*y;return sum;"; var param3 = "x,y"; var add3 = new Function(param3,param1); //alert(add3(8,9)); //匿名函数 var add4 = function (){ alert("haha"); }; add4(); </script></body></html>局部变量和全局变量示例代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <script type="text/javascript"> /* 全局变量：在script里面定义的变量，全局变量。可以在页面的任意位置拿到。 局部变量：在方法体内部定义的变量，局部变量。 */ for(var i=0;i<4;i++){ document.write("i = " + i+"<br />"); } document.write(" i == " + i); function run(){ var y = 5; } document.write(y); //报错，局部变量无法使用 var x = 4; function show(x) { x = 8; } show(x); alert("x = " + x); </script></body></html>js的对象
js的String对象
示例代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="out.js"></script><title>Insert title here</title></head><body> <script type="text/javascript"> /* * js的String对象 * var str = "abc"; * var str = new String("abc"); * 属性：length 字符串的长度 * 方法 * 和HTML相关的 * bold() 粗体显示字符串 * fontcolor(color) 设置字体的颜色 * fontsize(size) 设置字体的大小 * italics() 斜体显示 * link(url) 设置链接 * sup() 上标 * 和java中String对象类似的方法（*****） * charAt(index) 返回指定位置的字符 * indexOf(searchvalue,fromindex) 检索字符串 * lastIndexOf() 从后向前的 * replace() 替换字符串 * substring(start,stop) 从哪开始，到哪结合（包含开始不包含结束） * substr(start,length) 从哪开始，截取长度 */ var str = "abc"; //alert(str.length); //对document.write封装 println(str); //println(str.charAt(2)); //println(str.indexOf("f")); //var str2 = str.replace("bc", "ef"); //println(str2); println(str.substring(1, 3)); println(str.substr(1,3)); //bold() 粗体显示字符串 println(str.bold()); //document.write(mybold(str)); function mybold(s){ var result = "<b>"+s+"</b>"; return result; } //println(str.fontcolor("red")); //println(str.link("http://www.baidu.com")); //println(3+"2".sup()); </script></body></html>输出代码println.js
js的Array对象
* js的数组 * var arr = [2,3,4]; * var arr = new Array(5); 数组长度是5 * var arr = new Array(5,6); 数组元素是5,6 * 数组的长度 * length * 数组的长度是可变的 * 方法 * concat() 链接数组或者元素都可以 * join(separator) 转化成字符串 * pop() 删除并返回最后一个元素 * push() 向末尾添加一个元素，返回新的长度示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="out.js"></script><title>Insert title here</title></head><body></body> <script type="text/javascript"> /* * js的数组 * var arr = [2,3,4]; * var arr = new Array(5); 数组长度是5 * var arr = new Array(5,6); 数组元素是5,6 * 数组的长度 * length * 数组的长度是可变的 * 方法 * concat() 链接数组或者元素都可以 * join(separator) 转化成字符串 * pop() 删除并返回最后一个元素 * push() 向末尾添加一个元素，返回新的长度 */ var arr = ["NBA","CBA","CUBA","WNBA"]; //alert(arr.length); /* println(arr); arr[4] = "abc"; println(arr); */ println(arr); //var arr2 = arr.concat("NBA"); //println(arr2); //println(arr.join("-")); println(arr); var str = arr.pop(); println(str); println(arr); </script></html>Date对象
示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="out.js"></script><title>Insert title here</title></head><body></body> <script type="text/javascript"> /* * Date对象 * var date = new Date(); 当前的时间 * toLocaleString() 根据本地的日期格式转化成字符串 * getDate() 返回一个月中的某一天 * getDay() 返回一周中的某一天（0-6） * getMonth() 获取月份（0-11） * getFullYear() 获取年 * getTime() 获取毫秒数 * setTime() 通过毫秒数设置日期 * Date.parse(datestring) 解析字符串，返回毫秒数 * 2014-11-2 解析不了 * 11/11/2014 * 2014,11,11 */ var date = new Date(); /* println(date); println(date.toLocaleString()); println(date.toLocaleDateString()); println(date.toLocaleTimeString()); */ var monthday = date.getDate(); var weekday = date.getDay(); var month = date.getMonth()+1; var year = date.getFullYear(); println(year+"-"+month+"-"+monthday+" "+getWeek(weekday)); function getWeek(num){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; return arr[num]; } // 1414916247532 var m = date.getTime(); //println(m); var date2 = new Date(); date2.setTime(1414916247532); println(date2.toLocaleString()); var date3 = new Date(1414916247532); println(date3.toLocaleString()); var str = "11/11/2014"; var mm = Date.parse(str); var date4 = new Date(mm); println(date4.toLocaleString()); </script></html>Math对象
ceil(x) 上舍入 floor(x) 下舍入 round(x) 四舍五入 * random()示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="out.js"></script><title>Insert title here</title></head><body></body> <script type="text/javascript"> /* ceil(x) 上舍入 floor(x) 下舍入 round(x) 四舍五入 * random() */ println(Math.ceil(14.2)); println(Math.floor(14.6)); println(Math.round(14.3)); // 获取10个数，从1-10之间的数 for(var i=0;i<10;i++){ println(Math.floor(Math.random()*10+1)); } </script></html>RegExp对象
* var reg = new RegExp("表达式"); （开发中不常用） * var reg = /^表达式$/（*****） （开发中常用） * exec(string) （开发中不使用） * test(string)（*****） （经常使用） * reg.exec("12345"); 返回匹配的内容，返回null * reg.test("12345"); 返回true或者false 总结： var reg = /^表达式$/ ，调用exec("12345678")返回匹配的内容，返回null或者test返回true或者false。 var reg = new RegExp("表达式");，调用exec("12345678")，返回12345 if(reg.test("12345")){ // }else{ // }全局函数
* 游离的函数，直接拿过来用。 * eval() 可以解析字符串，执行里面的javascript的代码 * isNaN() * encodeURI() 编码 * decodeURI() 解码示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <form> <input type="text" /> </form></body> <script type="text/javascript"> /* 全局函数 * eval() 可以解析字符串，执行里面的javascript的代码 * isNaN() * encodeURI() 编码 * decodeURI() 解码 */ var str = "alert('hehe');"; // alert(str); // eval(str); // alert(isNaN("abc" - 1)); var str2 = "abc张三"; var str3 = encodeURI(str2); alert(str3); var str4 = decodeURI(str3); alert(str4); </script></html>BOM
* BOM （Browser Object Model） 浏览器对象模型 * Window 窗口对象（*****） * Navigator 和浏览器版本相关（**） * Screen 和屏幕相关（不看） * History 和历史相关（**） * Location 和链接相关（***）示例代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <input type="button" value="我是按钮" onclick="run()" /></body> <script type="text/javascript"> /* 绑定事件onclick * Navigator * userAgent 获取浏览器的版本信息 */ function run(){ //alert("呵呵"); alert(navigator.userAgent); } </script></html> 1 0
- J2EE进阶之javascript 三
- J2EE进阶之javascript 四
- JavaScript进阶(三)之认识DOM
- J2EE进阶之HTML 一
- J2EE进阶之CSS 二
- J2EE进阶之servlet 九
- javascript进阶（三）
- Javascript进阶（三）
- j2EE 之 javaScript
- JavaScript进阶之数组
- JavaScript进阶之函数
- JavaScript进阶之事件
- JavaScript进阶之this
- 多线程进阶之三
- J2EE进阶(二)从零开始之Struts2
- J2EE进阶之onsubmit表单提交 五
- J2EE进阶之Response 和Request 十
- J2EE进阶之Cookie和Session 十一
- Android Studio中Gradle's dependency cache may be corrupt解决记录
- 一人千面：谈谈Go语言中的type
- IDEA 服务器搭建 IDEA授权服务器
- Java数据类型-Queue
- 第四题：根据前序和中序遍历结果重建二叉树（Arrays常用方法）
- J2EE进阶之javascript 三
- microsoft word中在公式后插入可交叉引用的公式编号
- spring OAuth 2 Developers Guide 英译汉
- ARP协议与RARP协议
- OSGI企业应用开发（九）整合Spring和Mybatis框架（二）
- 使用SpringBoot yml配置文件（三）
- Java基础——overload(重载)与overwrite(重写)的区别
- 机器学习实战-第三章（决策树）
- iOS客户端 与JAVA 后台http通信
