1. JavaScript语言与名称的由来（Netscape，Sun Java）
2. 微软的Explorer和JScript
JavaScript 概述
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
JavaScript与Java不同
1. JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。
2. JS是基于对象，Java是面向对象。
3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
JS 是弱类型， Java 是强类型。
JavaScript与Html的结合方式
想要将其他代码融入到Html中，都是以标签的形式。
1. JS代码存放在标签对<script> js code．．．</script>中。
2. 当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
例：<script src=”test.js” type=”text/javascript”></script>
注：规范中script标签早期有一个属性language,而现在使用type属性。
<!-- js脚本片段可以写任意个,位置也是任意的，只是要注意浏览器的解析顺序 -->
<!-- js的写法1 -->
<script type="text/javascript">
alert("hello word");
</script>
<!-- js的写法2 -->
<script src="a.js" type="text/javascript">
</script>
<!-- js的写法3 这样不行 因为下面的代码被覆盖了-->
<script src="a.js" type="text/javascript">
alert("inner js");
</script>
JavaScript语法
每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。
1. 变量
通过关键字var来定义，弱类型既是不用指定具体的数据类型。
例：var x = 3; x = “hello”;
注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。
注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。
但为了符合编程规范，需要象java一样定义结束符。
而且有些情况是必须写分号的，如：var x = 3 ;var y =5 如果两条语句写在同一行，就需要分号隔开。
// 变量：弱类型 ， 所有的变量都是用var来声明---本质上就是Java当中的Object类型
var a=3;
var b="abc";
// alert(a+b);
var boo=true;
//alert(boo+1);//2 js当中的布尔类型和C一样，有0 和 非0 的概念
//4 基本数据类型
alert(typeof(1));//number
alert(typeof(1.00000000));//number
alert(typeof("a"));//string
alert(typeof('a'));//string
alert(typeof("S"));//string
alert(typeof(true));//boolean
alert(typeof(0)=='number');//true
alert(typeof(0)=="number");//true--使用单引号和双引号，效果是一样的
alert(typeof("a")=='String');//false------※※※大小写敏感※※※
alert(typeof(n)=='number');//true前面片段中定义的变量，在这里仍然是有效的
alert( typeof(X) ); //undefined--代表该变量没有定义--因为前面只定义了小写的x
2. 运算符
Javascript中的运算符和Java大致相同。
只是运算过程中需要注意几点：
1， var x =3120/1000*1000; x = 3120;而不是3000。
2， var x =2.4+3.6 ; x = 6;而不是6.0
3， var x = “12” + 1; x = “121”; x = “12”– 1 ; x = 11;
加号对于字符串是连接符
4， && || 是逻辑运算符 & | 是位运算符。
5， 也支持三元运算符
6， 特殊运算符 typeof: 返回一个操作表达式的数据类型的字符串。
var x =3;
var y = “123”;
var z =false;
typeof(x);//number
typeof(y);//string
typeof(z);//boolean
//5 运算符：算术、赋值、比较、位运算、三元运算
//5.1算术运算
/* var a = 3710;
alert(a/1000);
alert(a/1000*1000);//3170能还原,java不能
b=2.8;
var c=3.2
alert(c+b);//6
alert("23"+11);//2311---string---加号为字符串连接
alert("23"-11);//12---字符串遇到减号，自动会转换成数值型进行运算
alert(100%3);//1
alert(100%-3);//1
alert(-100%3);//-1 如果有负数，结果和前面那个数同符号。---和Java是一样的 */
//5.2 赋值运算: = += -= *= /= %=
/* var m=3;n;//和Java不同的是，变量可以重复声明
m=n++;//用法同Java
alert(m+" "+n);//3,4
var n;
alert( typeof(n));//number
alert(m+n);//3---这里没有对该变量重新赋值，所以用的还是前面的那个 */
//5.3 比较运算符
/* var j=10;
alert(j>5);//true
alert( j!=5);//其它如 ：< >= <= == != 等，同理 */
//5.4 逻辑运算符 && || !
/* var k=4;
alert(k>1&&k<5)//true
alert(!(k<3));//false
alert(!k);//k是“非0”，再非一下则是flase---0 */
//5.5 位运算符 & | ^ >> << >>>(无符号右移) ---和Java一样
var c = 6; //6: 110 //3: 011
alert(c&3); //2
alert(c^1000^1000);//6
alert(c>>>1);//3 无符号位右移 1位
//5.6 三元运算符---?号表达式 ----和java一样
alert( 3>0?100:300 );
var xx;
//###
alert(xx);//undefined---如果一个变量声明之后没有赋值，那么就是该值
alert(xx==undefined);//true 这个undefined代表的是和true,false等一样的，是一个值，因此不要用引号
alert(xx=='undefined');//false
3. 语句(与Java语句格式相同)
1. 判断结构(if语句)
注：var x = 3;
if(x==4)//可以进行比较运算。
if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
因为在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)结果是true；
if语句
if(3>x){
alert("yes");
}else {
alert("no");
}
if(x-4){//非0 即是 true
alert("yes");
}else {
alert("no");
}
if(x=4){//赋值语句，非零就是true
alert(x);
}else{
alert("no");
}
var b=(3,3+4);//7//逗号表达式中的最后一个式子的值作为整个的结果，
if(b>1){
alert("a");//a
}else if (b>2) {
alert("b");
}else if (b>2) {
alert("c");
}else {
alert("d");
}
可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
2. 选择结构(switch语句)
//Java语言：switch表达式支持的类型：byte,int等整数,char，jdk1.7之后增加了String类型
//JavaScript语言：支持所有类型，即所有类型的数据都能用于选择
var x="a";
switch ("a") {
case "b":alert("b");
break;
case 'a':alert("a");
case "aa":alert("aa");
break;
default:alert("none");
break;
}//a aa与java不同的是：因为弱类型，也可以对字符串进行选择。
3. 循环结构(while语句，do…while语句，for语句)。
注：不同的是，没有了具体数据类型的限制，使用时要注意。<h1>九九乘法表表格封装</h1>
<script type="text/javascript">
document.write("<table>");
for(var i=1;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>"+i+"*"+j+"="+i*j+"</td>");
}
document.write("</tr>");
}
document.write("</table>");//和write()一样4. 数组
方便操作多元素的容器，可以对其中的元素进行编号。
特点：可以存任意元素，长度是可变的。
格式：
var arr = new Array();
arr[0] = “hello”;
arr[1] = 123;
var arr = [‘hello’,123,true,”abc”];
通过遍历即可对数组进行基本操作。
for(var x=0; x<arr.length; x++)
{
alert(arr[x]);
} <pre name="code" class="java"> //※※综上,js数组的两个特点：
//1,长度是可变的
//2,元素的类型是任意的var arr=[3,2,1]; //数组定义的方式1: 定义时直接赋初值 /* alert(typeof(arr));//object*/ for(var i=0;i<arr.length;i++){//没有增强for循环 document.write(arr[i]+" "); } document.write("<br/>"); arr[0]=1000; arr[7]=true;//数组可以自动增长，且没有赋值则是undefined
int arr3=[1,2,3];错误的声明方式，虽然不报错
//数组定义的方式2: 使用js中的Array对象来定义
var arr5=new Array();//※ 空参
var arr6 = new Array(10); //※ 一个参数，代表的是数组的长度
var arr7=new Array(3,3,2,5,6);//※ 多个参数，代表的是数组元素值
//演示多维数组
var arr=new Array(9);//9个长度
for(var i=0;i<9;i++){
arr[i]=new Array(i);
for(var j=0;j<=i;j++){
arr[i][j]=(i+1)+"*"+(j+1)+"="+(i+1)*(j+1);
}
}
document.write("<table>");
for(var i=0;i<arr.length;i++){
document.write("<tr>");
for(var j=0;j<arr[i].length;j++){
document.write("<td>"+arr[i][j]+"</td>");
}
document.write("</tr>");
}
document.write("</table>");4. 函数
1. 一般函数
格式：
function 函数名(形式参数...)
{
执行语句；
return返回值；
}
<!--
※java中函数定义的格式：
int sum(int a,int b){
....
return s
}
※js中函数定义的格式：
function sum(a,b){
....
return s
}
▲▲js中的函数可以理解成一个function类型的对象
-->
<script type="text/javascript">
//※浏览器对js代码是边解析边执行的
//注意，函数的调用 应该在浏览器解析完 该函数的定义 之后进行
hello();//无效---因为浏览器解析该语句时，此函数还没有定义
</script>
<script type="text/javascript">
hello();//调用有效
function hello() {//定义---无参函数
alert("hello world!");
}
hello();//调用
function add(a, b) {//定义有参数的函数
alert(a + b);
}
add(11, 12);//23
add("333", 12);//33312
</script>函数是多条执行语句的封装体，只有被调用才会被运行。
注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。
说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？
其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。
例：
function demo()//定义函数。
{
alert(arguments.length);
}
demo(“hello”,123,true);//调用函数。
那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。
for(var x=0; x<arguments.length; x++)
{
alert(arguments[x]);
}
function show(a,b){
alert(a+","+b);
}
/* show();//undefined,undefined
show(12);//12,undefined
show(12, 23);//12,23
show(12, 23,34);//12,23后面的 一个参数函数接收了但没有用*/
//函数的参数全部是js内部用一个arguments数组来接收与存放的---该对象是js内部隐含帮我们做的，我们可以访问到这个数组对象
function show2(a,b){
arguments[0]=1000;//可以把形参x的值改掉
document.write((a==arguments[0])+"<br/>");//true
document.write(a+","+b+"<br/>");
for(var i=0;i<arguments.length;i++){
document.write(arguments[i]+",");
}
document.write("<br/>");
}
show2(11,22,33,44); //※综上，函数的技术细节：
//1, js中的函数是没有重载，只以函数名来识别的---其实函数名就是一个function对象的引用的名字
//2, js函数中有一个内部维护的arguments数组来接收与保存形参
为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。
函数在调用时的其他写法：
var show = demo();//show变量接收demo函数的返回值。
var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。
//那么该函数也可以通过show()的方式运行。
function getValue(a){
alert("aa");
return a+100;
}
var v=getValue(1);
alert('v='+v);
var v2=getValue; //相当于getValue把引用值传给v2，因此v2也是一个“function对象”----getValue和v2都是引用变量
alert("v2="+v2 );//其实是输出v2对象的toString()
alert("v2="+v2(300) ); //调用v2这个函数对象---调用函数— 动态函数
通过Js的内置对象Function实现。
例：var demo = new Function(“x,y”;”alert(x+y);”);
demo(4,6);
如同：
functiondemo(x,y)
{
alert(x+y);
}
demo(4,6);
不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
<!--
※1※ 动态函数:使用的是js中内置的一个对象---- Function
注意，小写的function是用来声明的，而大写的Function是用来new对象的
//把下面的函数写成动态函数 -->
<script type="text/javascript">
//把函数的形参用第1个参数传入，函数体中的代码用第2个参数传入----可以通过调用者动态传入函数体，因此非常灵活，该思想类似Java当中的类反射。
var add=new Function("a,b" ,"var s=a+b; return s;");
alert(add(12,23));//传字符串进去，这是一种思想
</script>
— 匿名函数
格式：function(){...}
例：var demo = function(){...}
demo();
通常在定义事件属性的行为时较为常用。
例：
functiontest()
{
alert(“load ok”);
}
window.οnlοad= test;
可以写成匿名函数的形式：
window.οnlοad= function()
{
alert(“load ok”);
}
匿名函数就是一种简写格式。 <!-- 用匿名函数给按钮添加事件绑定 -->
<button id="btn">按钮</button>
<script type="text/javascript">
btn.οnclick=function(){
alert("按钮");
}
</script>
6. 对象
****prototype属性
//※※※利用prototype更改原型时，如果属性或方法已经存在那么是修改，否则就是添加。
//※※给String原型对象添加一个属性aa
String.prototype.aa=100;
var str = "abc123";
println( str.aa ); //☆☆法1---用非匿名函数(this)
function trim(){
var start=0;
var end=this.length-1;
while(start<=end&&this.charAt(start)==' '){
start++;
}
while(start<=end&&this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
}
println( "wangjianan ".trim());
//☆☆法2---用匿名函数
String.prototype.trim=function(){
var start=0;
var end=this.length-1;
while(start<=end&&this.charAt(start)==' '){
start++;
}
while(start<=end&&this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
};
属性不能改，方法可以覆盖和更改
Array方法做栈//unshift---addFirst concat--addLast() shift---removeFirst() pop---removeLast()
Js除了已经提供的内置对象外，也可以自定义对象。
例：
function Person()//很象java中的构造函数。P不一定要大写。
{
}
var p = new Person();
p.name = “zhangsan”;//定义成员变量。
p.age = 20;
//定义成员函数。
p.run = function()
{
alert(“run”);
}
p.run();
或：
function Person(name,age)
{
this.name= name;
this.age= age;
}
var p = new Person(“zhangsan”,20);
Js用于操作对象的语句
— with语句。
格式：
with(对象)
{
}
应用：当调用一个对象中多个成员时，为了简化调用，避免”对象.”这种格式的重复书写。
var p = new Person(“zhangsan”,20);
alert(p.name+”,”+p.age);
可以写成：
var p = new Person(“zhangsan”,20);
with(p)
{
alert(name+”,”+age);
}
with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。
— for...in语句
用于遍历对象属性。
例：
var p = new Person(“zhangsan”,20);
for(x in p)
{
alert(x);//结果是两个对话框，一个是name，一个是age。
alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组，要通 过指定的元素名获取元素的值。
<script type="text/javascript" src="out.js"></script>
<!-- 用js来描述我们自己的对象，如类似java当中的Person类 -->
<script type="text/javascript">
/* js是基于对象的，如果要描述对象，那么可以用function。因为js中的
function功能和java中的类(模板) 本质上是差不多的---里面可以添加变量，也可以添加自定义函数
*/
function Person(){
println("person");
}
var p=new Person();
//给对象添加属性，直接采用“p.属性名=”的形式赋值就行---如果没有则是添加，如果有则是修改
//※※方式1：在对象外面添加属性和方法
p.name="jack";
p.age=20;
println(p.name+" "+p.age);
//给对象添加函数
p.info=function(){
return this.name+" "+this.age;
};
println(p.info());
/* 注意：前面用“对象.prototype.属性或函数名=***”的形式，更改的是原型对象
而本例用 “对象.属性或函数名=***”的形式，更改的是当前对象(原型对象的克隆体) */
</script>
<script type="text/javascript">
//js自定义对象的构造器+属性+方法
function Person(name,age){
this.name=name;
this.age=age;
this.toString=function(){
return this.name+","+this.age;
};
this.setName=function(name){
this.name=name;
};
this.getName=function(){
return name;
};
}
var p2=new Person("Tom",10000);
println(p2);
p2.setName("Jack");
</script>
Global 对象
是一个固有对象，目的是把所有全局方法集中在一个对象中。
Global对象中的属性和方法，调用时可以省略：Global.
Json
<script type="text/javascript" src="out.js">
</script>
<!-- 用js来描述我们自己的对象，如类似java当中的Person类 -->
<!-- 方式3 -->
<script type="text/javascript">
//json---在javascript中封装数据对象
//map
var pp={
//"name":"张三","age":"23", //key:value
name:"张三",age:"23", //这句和上面一句等效---key的名称可以省略引号
"getName":function(){
return this.name;
}
};
println("<hr/>");
println(pp.name+","+pp.age);
println(pp["name"]+","+pp["age"]);//表示访问pp对象中的"name"和"age"属性，注意这里属性是名称而不是变量，所以必须用引用
println(pp.getName());
println(pp["getName"]);//显示出函数的代码
println(pp["getName"]());//调用函数
var map ={
8:"张三", 3:"李四",5:"Jack"
};
println( map["8"]); //原理同前。json中冒号前面的那个是key，后面的是value
println( map[8]); //8是数字，不可能是变量名，因此引号省略照样能解析出来
</script>
<script type="text/javascript">
var myObj={
name:"张三丰",age:25
};
println(myObj.name+","+myObj["age"]);//分别用了两种读取属性的方式
</script>
<script type="text/javascript">
var myMap = {
names:["Jack1","Jack2","Tom1","Tom2"],
nums:[10,20,30,40]
};
println( myMap.names[1]+","+ myMap.nums[1] );
var myMap = {
names:[{name:"Jack111"},{name:"Jack222"},{name:"Jack333"}]
};
println( myMap.names[0].name);
println( myMap.names[0]["name"]);
</script>
注意：
全局变量: js中，直接在脚本当中定义的变量全都是全局变量。
局部变量: 在函数中定义的变量是局部的。
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
