JavaScript 入门（一）

网址

http://www.w3school.com.cn/js/index.asp

笔记

简介

脚本语言（在浏览器上运行，不需要环境）

JavaScript 是一种轻量级的编程语言，面向对象的（基于原型的，和C++,JAVA有很大不同），。

JavaScript 是可插入 HTML 页面的编程代码，用来验证发向服务器的数据

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行（浏览器解释一条，执行一条）。

变量

<script>
var a=10,
b="你好",
c=true,
d={},
e=0/0,
f=13/0;alert(typeof(b));//string
alert(c);//boolean
alert(d);//object
alert(e);//NaN
alert(f);//infinity
alert(NaN==NaN)//false
alert(NaN+1)//NaN</script>

//变量： 基本类型（栈内存中） 和 引用类型（堆内存中对象）
var b=3;
var c=b;//b,c完全独立，互不影响var o1=new Object();
var o2=o1;//引用到同一个对象

函数

<html>
<head>
<script>
function box(name,age){
alert('your name is' + name+', your age is' + age);
}function add (a,b){var c= a+b;
return c;
}function cheng(a,b){var c=add(a,b)+a*b;alert(c);
}var d=add(3,4);
alert(d);//7function argument(){
return arguments[0] + ',' + arguments[1] ;}alert(argument('你','好'));//你，好function argument2()
{return arguments.length;
}alert(argument2(1,2,3,4));//4
alert(argument2(1,2,3,4,5));//5function argument3(){var sum=0;for(var i=0;i<arguments.length;i++)sum+=arguments[i];
return sum;}
alert(argument3(1,2,3,4,5));//15function add100(num,a){
return num + 100;
}function add100(num){
return num + 200;
}alert(add100(100,1));//300 调换add100函数的位置后，为200； 和重载没有关系，后面的函数把前面的函数覆盖掉</script>
</head>
<body><h1>My First Heading</h1><p>My first paragraph.</p>
<button οnclick="box('xiaoming',24)">点击这里</button>
<button οnclick="cheng(3,4)">乘法</button></body>
</html>

对象和函数（一）

<head>
<script>
var ob = new Object();//方法一，new可以省略
ob.name='xiao';
ob.age=1;var ob2={//方法二，定义对象name:'xiao',age:1
};alert(ob.age);//等价于alert(ob2.age);
alert(ob['age']);//等价于alert(ob2.age); 使用数组的方式输出
alert(ob["age"]);//等价于alert(ob['age']);function func(){return '23';
}//方法一，必须先写一个函数
var ob3 = new Object();//方法一，new可以省略
ob3.name='xiao';
ob3.age=1;
ob3.run=func();
alert(ob3.run);//输出函数返回'23', 必须先写一个函数//方法二，自变量写法
var ob4={name:'xiao',age:1,myrun:function(){return '23';}}alert(ob4.myrun());//'23,调用方法，必须用myrun(); 使用myrun时打印函数内容delete ob4.name;//删除属性
alert(ob4.name);//undefined//函数参数为对象
function func2(obj){
if (obj.name != undefined)
{alert(obj.name);
}
if(obj.age != undefined){alert(obj.age);
}}func2(ob3);//传递匿名对象func2({name:'xiao',age:1
})</script>
</head>

对象和数组（二）

<head>
<script>
//array 数组方法一
var ar =new Array();
alert(ar);var ar2= new Array('xiao',1,'ming',4);//数组有3个元素
alert(ar2);// 结果:  xiao,1,ming,4
alert(ar2[0]);// xiaovar ar3=new Array(10);//数组有10个元素
alert(ar3);// 9个逗号
ar3[4]='xiao';
alert(ar3);//array 数组 方法二 自变量的方式创建
var ar4 =[];
alert(ar4);var ar5=['xiao',2,3,4];
alert(ar5);//xiao,2,3,4
ar5[2]=100;
alert(ar5);//xiao,2,100,4
alert(ar5.length);
ar5.length=10;
alert(ar5.length);//10ar5[ar5.length]=10;var ar6=[{name:'xiao',age:1},[3,4,5,'江苏',new Object()],'ming',new Array(1,2,3)
];
alert(ar6);var ar6=[1,2,];//多个逗号，让IE浏览器获取参数错误</script>
</head>

对象和数组（三）

<head>
<script>
var str=['xiao',2,3,4];
alert(str.toString());
alert(str.valueOf());
alert(str.toLocaleString());alert(str.join('|'));//元素间分割形式//数组的push(),pop()方法str.push('ming');
alert(str);//数组末尾添加， xiao,2,3,4,mingstr.pop();
alert(str);// xiao,2,3,4str.shift();//移除开头元素
alert(str);//2,3,4str.unshift('xiao');//添加元素到开头
alert(str);//xiao,2,3,4var str1=[3,4,5,3,2,4];
alert(str1.sort());//按照字符串排序，升序
alert(str1);//按照字符串排序，升序function compare(value1,value2){
if(value1 < value2)
return -1;
else if (value1 > value2)
return 1;
else
return 0;
}alert(str1.sort(compare));
alert(str1.reverse());//降序
alert(str1);var str2=str1.splice(0,1);
alert(str2);
</script>
</head>

对象和函数（四）

<head>
<script>//函数的声明方式//1. 普通的声明
function fun1(a,b){
return a+b;
}alert(fun1(1,2));
//2. 变量初始化函数
var fun2= function(a,b){
return a+b;
}alert(fun2(1,2));//3. 不推荐，2次解析，
var fun3=new Function('a','b','return a+b');alert(fun3(1,2));//递归 n!
function jiecheng(n){
if(n<=1) {
return 1;
}
else {
return n*jiecheng(n-1);
}
}function jiecheng2(n){
if(n<=1) {
return 1;
}
else {
return n*arguments.callee(n-1);//使用arguments.callee调用自身，实现递归
}
}alert(jiecheng(4));
alert(jiecheng2(4));// window是对象，js中最大的对象
alert(typeof window);//object
alert(this);//等价于alert(window)var color='red';// color是全局变量
alert(window.color);//red ,全局变量时window的属性
alert(this.color);//同上，this==windowwindow.color='red';//等价于var color='red';var v={color:'yello'};//局部变量</script>
</head>

日期

<head>
<script>var da= new Date();
alert(da);// 精确到秒alert(Date.parse('05/28/2015'));//返回毫秒数var da1=new Date(Date.parse('05/28/2015'));
alert(da1);var da2= new Date('05/28/2015');
alert(da2);// 精确到秒
alert(da2.toLocaleString());// 精确到秒
alert(da2.valueOf());// 精确到秒alert(da2.toDateString());// 精确到日期
alert(da2.toTimeString());// 精确到秒
alert(da2.toLocaleDateString());// 精确到日期
alert(da2.toLocaleTimeString());// 精确到秒alert(da2.getFullYear());// 2015
alert(da2.getFullYear()+1);// 2016
alert(da2.getHours());//
alert(da2.getUTCHours());// 与da2.getHours()相差8个小时</script>
</head>

正则表达式（一）

<head>
<script>
//创建正则表达式的2种方法//方法一
var re = new RegExp('re');//re为模式字符串
var re = new RegExp('re','gi');//re为模式字符串,gi可选参数，
//i-忽略大小写，g-全局匹配//方法二
var re2=/re/;
var re2=/re/gi;var str='this is a test and Regexp';
alert(re.test(str));//true
alert(re2.test(str));//truealert(/re/gi.test(str));//true
alert(/re/gi.exec(str));//Re, 返回值或nullalert(str.match(re2));//Re ,返回匹配数组var str2='this is a test and Regexp  re kdkdkdk re ';
alert(str2.match(re2));//Re ,re,revar re3=/re/i;
alert(str2.match(re3));//Re
alert(str2.search(re3));//19 找不到返回-1alert(str2.replace(re3,'AAA'));//找到后替换，只替换第一个匹配的alert(str2.replace(re2,'AAA'));//找到后替换，替换所有匹配的alert(str2.split(re3));//返回匹配数组</script>
</head>

正则表达式（二）

<head>
<script>// ^ $ 行首，行尾
//[a-z0-9]
// . 匹配任意字符； + 至少一个var re6=/g..gle/;
alert('geegle'.match(re6));//geeglevar re7=/g.*gle/;//匹配多个alert('gddddddddgle'.match(re7));//gddddddddgle</script>
</head>

JavaScript 入门（一）相关推荐

经典的JavaScript入门书
经典的 JavaScript 入门书 --<JavaScript基础教程(第7版)> 原版销售累计超过 150 000 册! 欢迎你使用 JavaScript !使用这种容易上手的程序设计 ...
原版销售累计超过150 000册的经典JavaScript入门书
媒体评论如果你要学习 JavaScript,本书绝对不容错过. --JavaScript.about.com 一本伟大的 JavaScript入门书!适合初级程序员和 Web设计师. --Amazo ...
《jQuery与JavaScript入门经典》——2.6　小结
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第2章,第2.6节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
《jQuery与JavaScript入门经典》——第 1 章　动态Web编程简介 1.1理解Web服务器浏览器范式...
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第1章,第1.1节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
JavaScript入门经典(第4版)
循序渐进精细讲解所有JavaScript知识点指导您构建建出神入化的完美Web应用程序 JavaScript入门经典(第4版) 基本信息原书名: Beginning JavaScript 原出版社 ...
《JavaScript入门经典（第6版）》——2.7　问答
本节书摘来自异步社区<JavaScript入门经典(第6版)>一书中的第2章,第2.7节,作者: [美] Phil Ballard 译者:李军陈冀康,更多章节内容可以访问云栖社区&quo ...
JavaScript入门【JavaScript专题1】
JavaScript入门从今天开始就与大家一起学习JavaScript了在本系列教程中,您将学习如何制作 JavaScript 驱动的网页. JavaScript 入门在这里,您将了解使用 Ja ...
《JavaScript入门经典（第4版）》上第5章一个实例程序的修正，完善
今日,做<JavaScript入门经典(第4版)>第5章上的一个例题,感觉书上的代码有个小错误. 这是ch5_examp5.html上的一个实例,是计算一个数x保留y小数位后,四舍五入的结 ...
JavaScript入门(part12)--内置对象
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门内置对象 Math对象日期对象数组对象字符串对象 JavaScript入门内置对象 Math对象 ...
JavaScript入门(part11)--对象
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门对象创建对象的三种方式利用字面量创建对象利用 new Object 创建对象利用构造函数创建对象 n ...