静态Web开发 JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

三章 Javascript

1节
javascript基本语法和注意事项

脚本，一条条的文字命令。执行时由系统的一个解释器，将其一条条的翻译成机器可识别的指令，然后执行。(不需要编译)
常见的脚本:批处理脚本、T-SQL脚本、VBScript等。(.net生成的exe文件用记事本打开看不懂)
js有一种计算能力的作用，可以在页面添加一些功能
LiveScript+java一些特性--->js
工具：EditplusMyEclipseVisual Studio 2010
var声明变量
<script type="text/javascript">
var n=10;n="我是js";
</script>
js基本组成:
ECMAScript基本语法(浏览器都支持,有统一标准)
Dom(文档对象模型)
Bom(浏览器对象,一般功能浏览器支持，没有统一标准)控制浏览器可见区域以外的部分
注意：
大小写铭感
弱类型语言，声明用var
字符串用单引号(建议)
每句话后面加';'
js注释与c# java一样

alert("我的名字是:"+name);
alert(new Date().toLocaleTimeString());

2节
外部引用js文件

3节
js中的事件超链接显示时间

<input type="button" onclick="alert(new Date().toLocaleString());" />
<a href="#" onclick="...">百度</a>//‘#’ 默认跳转起始位置
<a href="javacript:void(0);" onclick="..."></a>//void(0) 表示没有用的值，不去任何地方
<a href="javascript:alert('时间');"></a>

4节
数据类型

变量命名规则：字母、下划线、$开头，中间可以有数字
声明字符串时用单引号，主要是方便和html进行合成，避免转义符的麻烦
声明变量时，如果前面没有var，那么此时该变量为全局变量，可以会和将来外部引入的js局部变量冲突
数据类型:BooleanNumber(数字)StringUndefined(未定义)Null(空对象)Object(对象类型),underfined与其他计算结果不是我们想要的
//判断变量是哪种数据类型?
var n1=10;
alert(typeof n1);//Number
var n2=null;
alert(typeof n2);alert(String(n2));//Object //Null
var n3;
alert(typeof n3);//Undefined
alert(typeof(n3));
//判断数据对象是不是某种数据类型 instanceof
var obj=new Object();
alert(obj instanceof Object);

//null(已知的)和undefined(未知的)
alert(Boolean(underfined));//false
alert(Boolean(null));//false
alert(underfined==null);//true 非严格判断
alert(underfined===null);//false 严格判断(类型相同，值相等)
//判断一个变量是否可以使用，判断不是null underfined
var n;//n=null
if(typeof(n)!='underfined' && n!=null){
alert("该变量可以使用");
}else {
alert("该变量不可以使用");
}

5节
变量的作用域和js转义

//js转义
alert('c:\\sss\\ffff\\aaa.txt');

6节
类型转换

7节
js中的方法
//1
function show1(){
alert(...);
}
show1();
//2
function showName(name){
alert('我的名字:'+name);
}
showName('小子')
//3呆参数呆返回值
function addNum(num){
return 100+num;
}
var sum=addNum(100);
alert(sum);
//自定义的函数名不要和js内置、dom内置的方法重名，比如selectAll、focus等函数名不要用

js中没有方法的重载 arguments对象:可以获得方法有多少个参数和传的方法的值
function addNumber(){
//alert(arguments.length);
var ret=0;
for(var i=0;i<arguments.length;i++){
ret += arguments[i];
}
return ret;
}
//一个方法没有明确的返回值，得到的结果就是undefined
var sum=addNumber(1,2,3,4,5);
alert(sum);

8节
js中的匿名方法
//1
var ff=function(){
alert('帅');
}
ff();
//2
onload=function(){
document.getElementById('btn').onclick=function(){
alert('学好电脑');
}
}
<input type="button" id="btn" />
//3
（function(n1,n2){alert(n1+n2);}）(1,2);

9节
字符串常用方法

length charAt() indexOf() split() substr()/substring() toUpperCase()/toLowerCase()

var msg="我好开心!创奇拿明月湖"
alert(msg.length);
alert(msg.charAt(2));
//2
var i = msg.indexOf('光',0);
alert(i);
//3
var names='东邪|西毒|南帝|北丐';
var strs=names.split('|');
//alert(strs);
for(var i=0;i<strs.length;i++){
alert(strs[i]);
}
//4
var msg='我靠，美死了';
//var s = msg.substr(1,3);//截取子字符串(从索引1到索引3)
var s=msg.substring(1,3)（从索引1到索引2）
alert(s);
//5
toUpperCase(); toLowerCase();

10节
js中的数组

js中的Array对象就是一个数组，是一个动态数组：可以存数字、Boolean等等类型，可以看成是一个像C#中的数组、ArrayList、Hashtable等的超强综合体
var aa=new Array();
aa[0]=1;
aa[1]=false;
aa[2]='zhangsan'；
//2
var arr=[1,2,false,'zs'];//数组
for(){
alert(arr[i]);
}
for(var key in arr){//key 索引
alert(key+'=='+arr[key]);
}
//3
var arr={"东邪":"123","西毒":"345"}；//键值对
for(var key in arr){//key 键值对中
alert(key+'=='+arr[key]);
}

11节
js中的扩展方法及调试

通过类对象的prototype设置扩展方法
//1
var msg="qwweer@126.com";
String.prototype.isEmail=function(){
return this.indexOf('@')!=-1?true:false;
};
alert(msg.isEmail());
//2调试--->google--->设置断点---F11单步运行----Console中的调出所有方法
var sum=0;
for(var i=0;i<10;i++){
sum+=i;
}
alert(sum);

//2 调试--->google--->设置断点---F11单步运行----Console中的调出所有方法

【详情-->请查看：】