静态Web开发 JavaScript

三章 Javascript

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

脚本，一条条的文字命令。执行时由系统的一个解释器，将其一条条的翻译成机器可识别的指令，然后执行。(不需要编译)
常见的脚本:批处理脚本、T-SQL脚本、VBScript等。(.net生成的exe文件用记事本打开看不懂)
js有一种计算能力的作用，可以在页面添加一些功能
LiveScript+java一些特性--->js
工具：Editplus MyEclipse Visual 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文件

<script language= > //不推荐，依然在使用
<script>标签也可以放到html里或body,先执行head中的js
js标签可以有多个
alert('今天是个耗子日,</script>'); //当前js就结束了; 要想显示，用纯字符型拼接：</'+'script>'>

<script src="1.js" type="text/javascript"> //1.js 值写js内容，需要js标签
</script>

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局部变量冲突
数据类型:Boolean Number(数字) String Undefined(未定义) 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转义

<script type="text/javascript">
var n=10;
function fun(){
var num=100;
for(var i=0;i<10;i++){ //可以吧i直接申明在最外面
...
}
alert(i);
}
fun(); //js中没有作用域这个问题
</script>
<script type="text/javascript">
n=null;//释放掉这个n
alert(n); //能打印n，n为全局变量
</script>

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

6节
类型转换

<script type="text/javascript">
//1 转整数
var n='100'; //n='100fs' n='nn100'
ver n1=parseInt(n); //parseInt(n,8) -->8进制的n进行转换
alert(n1+100);
//2 转小树
var num=parseFloat('100.7');
//3 转数字
var num='100'; //num='100fs'
var n=Number(num);
alert(n+100);
//4 判断是不是整数
var n=100;
if(isNaN(n)){
alert('不能使用');
}else{
alert('可以使用');
}
</script>
//5
String(arg) 表示任意类型可以转字符串
Boolean(arg) 表示任意类型的值可以转Boolean

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中的调出所有方法

【详情-->请查看：】

 <script type="text/javascript">
         //最简单的方法是console.log()，可以用来取代alert()或document.write()。
         console.log("Hello World");
         //console对象还有4种显示信息的方法，分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。
         console.info("这是info");
         console.debug("这是debug");
         console.warn("这是warn");
         console.error("这是error");
         //3 占位符
         //console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。
         console.log("%d年%d月%d日", , , );
         console.log("圆周率是%f", 3.1415926);
         var dog = {};
         dog.name = "大毛";
         dog.color = "黄色";
         console.log("%o", dog);
         //4 分组显示
         //如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。
         console.group("第一组信息");
         console.log("第一组第一条");
         console.log("第一组第二条");
         console.groupEnd();
         console.group("第二组信息");
         console.log("第二组第一条");
         console.log("第二组第二条");
         console.groupEnd();
         //5 console.dir()
         //console.dir()可以显示一个对象所有的属性和方法。比如，现在为第二节的dog对象，添加一个bark()方法。
         dog.bark = function () { alert("汪汪汪"); };
         console.dir(dog);
     </script>

JS中Console的方法