(1)Javascript基础
一.简介
基于对象和事件驱动的语言，应用于客户端。
- 基于对象：提供了很多对象，可以拿过来使用
- 事件驱动：html做网站静态效果，javascript做动态效果
- 客户端：指的是浏览器
特点
- 交互性：信息的动态交互
- 安全性：不能访问本地磁盘的文件
- 跨平台性：能在各个平台上运行
与JAVA的区别
- Java是sun公司开发，现在被Oracle公司收购；Javascript是网景公司
- Java是面向对象；Javascript是基于对象
- Java是强类型语言；Javascript是弱类型语言（类型不限定）
- Java需要先编译成字节码文件，再执行；Javascript解析后就可以运行
Javascript组成
三部份
- ECMAscript：由以下组织定义的语法
- ECMA：欧洲计算机协会
- BOM：Browser Object Model 浏览器对象模型
- DOM：Document Object Model 文档对象模型
与html的结合方式
两种
- 用一个标签
<script type="text/javascript"></script> - 使用script标签引用外部js文件，在标签中加入src。使用这种方式不会执行内部写的代码，只会执行引入的代码。
<script type="text/javascript" src="1.js">
</script>
二.js的原始类型和声明变量
五种原始类型：定义类型都使用关键字var
- string：字符串
- var str="abc"; 这就是弱类型语言，不用考虑左边引用的类型。
- number：数字
- var m=123;
- boolean：布尔
- var b=true;
- null：获取当前对象的一个引用，null表示引用为空，所有对象的引用是Object
- var date=new Date(); 获取当前时间
- undefined：定义一个变量，没有赋值
- var aa;
那我们又有一个问题，如果赋值一样，那怎么判断数据类型呢？
所以，js提供了typeof(变量名称)来查看当前数据类型
<script type="text/javascript">
var date=new Date();
var str="123"
//alert(typeof(date));
alert(typeof(str))
</script>
Object
string
第一个答案说明了，所有对象的引用都是Object；第二个返回正确的类型
三.js中的条件判断语句
- if语句：与java中语法一样
- switch语句：js中没有java的数据类型限制，所有都支持；语法和java一样
- 循环语句
- while、do-while：与java一样，条件值不为零就无限循环
- for：除了定义语句为var，其他与java一样
i++与++i也是一样的
四.js中的运算符
js中大部分运算符与java中一样，下面我们看看一些不一样的例子。
1.数据类型差别
<script type="text/javascript">
var m=123;
alert(typeof(m/1000*1000));
</script>
上面问题的答案是多少呢？
在java中 123/1000*100答案为零，因为123为整型，除以1000后变为0，在乘以1000，还是0.
而在javascript里没有整型，浮点型限制，123/1000=0.123 0.123*1000=123,所以答案为123
2.字符串的相加减
- 数字加一
<script type="text/javascript">
var str="123";
alert(str+1);
弹出1231，与java一样；
- 数字减一
<script type="text/javascript">
var str="123";
alert(str-1);
弹出122，直接减了一；
- 字母加一：与数字的一样，在末尾加一
- 字母减一：弹出NaN，提示你这不是数字
- 字母与数字混用：也是与字母的加减混用
- 其他特殊符号：同上
>总结--------字符串的加减 相加：做的是字符串的连接； 相减：纯数字，数字的减法；有其他字符，提示NaN
3.boolean类型的加减
<script type="text/javascript">
/* (1)
var str=false;
alert(str+1);
*/
/* (2)
var str=true;
alert(str+1);
*/
/* (3)
var str=false;
alert(str-1);
*/
/* (4)
var str=true;
alert(str-1);
*/
</script>
答案
(1)：1
(2)：2
(3)：-1
(4)：0
总结：如果为true，就相当于数字1；为false，相当于数字0
4.与=的区别
先看==号
<script type="text/javascript">
var a=5;
var b="5";
if(a==5){
alert("6");
}else{
alert("other");
}
</script>
当if里面的变量a换成b时，还是弹出6。证明==判断的是值，与变量的类型无关。
再把改为=
弹出结果为other，所以===比较值和类型。
5.直接在页面上输出
document.write();
注意事项
- document.write()里面是双引号，若给标签设置应该为单引号
- document.write()可以输出变量和html代码。
- document.write()可以输出数字不加双引号
例子：打印一个9*9乘法表
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html ; charset=UTF-8">
<title>javascript</title>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' bordercolor='red'>");
for(var i=1;i<10;i++){
document.write("<tr>");
for(var j=1;j<i+1;j++){
document.write("<td>"+j+"*"+i+"="+i*j+"  </td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
五.js的数组
js数组没有java的类型限制，可以存放不同的数据类型，它的定义方式有三种：
- var arr=[1,"3",true];
- var arr=new Array(5); //设置长度为5的数组。若Array("5")，意思是长度为1，内容为5的数组
- arr[0]="1";
- arr[2]=true;
- var arr=new Array(3,"4",5);
数组的长度：与java一样，为arr.length
对数组的操作:数组长度是可以变化的
引用：详细操作
遍历数组：可以用for……in遍历数组
var row = ['zhangsan','lisi','wangwu','xiaoqiang'];
for (var i in row){
document.write(i + ':' + row[i] + '<br>');
}
六.js的符号含义
- ()表示函数执行
- []表示语法模拟，表示模拟Array类的实例（=new Array()）
- {}表示语法模拟，表示模拟Object类的实例（=new Object()）
- //表示语法模拟（正则对象），表示模拟RegExp类的实例（=new RegExp()）
七.js的函数
js定义函数不像java那么麻烦，有三种方式可以定义：
1.关键字function
/*
function 方法名(参数列表){
方法体；
返回值，可有可无，根据实际需要
}
*/
function add(a,b){
var sum=a+b;
alert(sum);
}
function add1(a,b,c){
var sum=a+b+c;
return sum;
}
//add(3,6);
alert(add1(2,3,4));
2.匿名函数：想要调用就需要起一个名字
/*
var 方法名 = function(参数列表){
方法体；
返回值，可有可无，根据实际需要
}
*/
var add=function (a,b){
var sum=a+b;
alert(sum);
}
add(5,8);
3.Function
也称为动态函数，比较少用
/*
var add=new Function("参数列表","方法体和返回值")
*/
var add=new Function("x,y","var sum=x+y;return sum");
alert(add(3,5));//答案为8
1.js的全局变量与局部变量
- 全局变量：定义在全局的变量，这个变量在页面中的js部分都可以使用
- 局部变量：定义在方法内部的变量
<script type="text/javascript">
var aa="44";//全局变量,下面三个都会弹窗
alert("在方法外部调用： "+aa);
function test(){
alert("在方法内部调用： "+aa);
}
test1();
</script>
<script type="text/javascript">
alert("在别的script调用： "+aa);
</script>
2.script标签放置位置
关于这点网上有很多讨论，鉴于我学习的知识不多，只讨论其中一点：
html文件是自上而下的执行方式，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。
所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞，加快访问速度。
而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。
其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。就是因为这个，在dom没生成好时我就给它添加了方法，才导致这样。
总结：一般放在body后；有预加载的放在body前，不能将需要访问dom元素的js放在body之前。
