# 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>