一、JavaScript简介
1、JavaScript是一种用在网页上的脚本语言。
脚本语言的特点是语法简单,一般以文本形式保存,并且不需要编译成目标程序,在调用的时候直接解释。
这可以当做是脚本语言的判断标准。
比如说JavaScript,你只需要用记事本新建一个Html文件,
在里面加上一段脚本就可以了,在浏览器打开Html文件时就会自动调用JS脚本。这类语言不会运行在服务器端
而是由解释器直接解释翻译
解释器被称为JavaScript引擎,为浏览器的一部分。
javascrip可以用来给HTML网页增加动态功能,比如表单验证,网页特效,游戏等。
2、JavaScript的组成
3、JavaScript 前身语言叫 liveScript
所以JavaScript和Java是没有任何关系的(老婆饼和老婆)
4、js有三种方式
1)作为元素的属性使用 相当于 内联样式表
<button οnclick="alert('警告!');">测试<button>
2)使用script标签 相当于 嵌入样式表
<script>alert('警告!');</script>
3)把js代码放在单独文件中
<script src="js文件路径"></script>
注意:引入外部js不能自闭合,自闭合后内部的js不好使了。
不能利用引入外部标签作为内部标签进行写代码。
4)js执行顺序
<script>alert('警告!');</script>
<body>测试</body>
发现alert是先执行,body后执行,所以js代码是从上到下依次执行。
二、基本语法
几乎和Java一模一样,代码格式,变量名驼峰标识,标识符,注释/* */,转义字符\等。
1、变量
JavaScript用var声明变量
var a=1;
var b="张三";
对于已经赋值的变量,可以再给他赋其他内容,甚至可以省略var;
2、数据类型
数值类型:3,3.5;
布尔类型:true,false
字符串类型:可以用单引号或双引号引上
null类型:一个变量已有值,值为null
特殊类型:undefined:
NaN:
InFinity:
三、运算符
几乎和Java一模一样
1、除法
9/4 在Java中得2 js得2.25
2、判断
所有判断都用==
3)在JavaScript中&&
结果不仅仅可以用于boolean类型,也不仅仅返回Boolean类型
4)在JavaScript中&&
结果不仅仅可以用于boolean类型,也不仅仅返回Boolean类型
一般这样使用
四、流程语句和循环语句
和Java一摸一样
五、函数
1、格式一:
function 函数名(形参列表){
函数体;
return [返回值];
}
格式二:
var test=function(形参列表){
函数体;
return [返回值];
}
2、动态函数
var x=new Function(参数1,参数2,....参数last);
所有的参数必须是字符串类型,最后一个参数必须是要执行的程序代码
var a=10;
var b=20;
var d=new Function("x","y","var sum=x+y;return sum;");
alert(d(a,b));
//相当于以下定义
function d(x,y){
var sum=x+y;
return sum;
}
3、系统函数
alert();
parseInt() 将字符串转成数值型
alert( parseInt("123中国")); =>123
alert( parseInt("中国123")); =>NaN
parseFloat()
eval() 接收一个字符串,把这个字符串按javascript表达式执行
var str ="alert('这是个字符串,能执行吗?');"
eval(str);
isNaN() 用来判断是不是一个数字
function test(){
if(!isNaN(document.getElementById("n1").value)){
alert("是数字"); //它可以判断小数
}
else{
alert("不是数字");
}
}
encodeURI() 和 encodeURIComponent() //URI其实就是URL,只是它的范围更大
可以对URI进行编码,以便发送给服务器。
一个有效的URI中不能包含某些字符,例如空格。而这两个方法就可以对URI进行编码,
它们用特殊的UTF-8编码替换所有无效的字符,从而让浏览器能够接受和理解。
这两个方法不会对 ASCII 字母和数字以及符号进行编码
它们的主要区别在于,encodeURI()不会对 冒号、正斜杠、问号和井号等编码;
而encodeURIComponent()则会对它发现的任何非标准字符进行编码
decodeURI 和 decodeURIComponent 将已编码的字符串解码
六、对象
在JavaScript中所有的一切都是对象,比如:字符串,数字,函数
1、如何自定义对象
方式一:var obj={};
obj.name="张三";//js对象的属性可以任意添加。
obj.age=2;
obj.test=function(n){
alert(n);
}
obj.test(2);
方式二:var obj={name="张三",age=2};
alert(obj.name);
方式三:var obj=new Object();
2、如果站在bom角度,window对象是所有对象的跟对象,所以书写时可以省略不写。
window.ibj.test(2);
window.document.....
window.location....
3、可以使用prototype用来扩展对象功能
<script>
Number.prototype.add=function(n){
return this+n;
}
var num=999;
alert(num.add(1).add(1000));
</script>
七、内置对象
1、动态对象:要用new创建出来
2、静态对象:使用类型.成员的格式来访问其属性和方法。
Object动态对象
String动态对象
js操作css本质就是在操作标签的style属性
Number静态对象
Date静态对象
八、数组
1、数组的创建
var array=new Array();
2、数组的初始化
静态初始化:
方式一:var array=new Array("张三","李四","王五");
方式二:var array=["张三","李四","王五"];
动态初始化:var array=new Array();
array[0]="张三";
array[1]="李四";
3、数组的遍历
function change(){
var array=["张三","李四","王五"];
for(var i=0;i<array.length;i++){
alert(array[i]);
}
}
for(index in array){ //增强for,此时index是索引值
alert(array[index]);
}
4、数组中常用方法
1) unshift() :在数组头部插入元素
2) shift() :移除并返回数组的第一个元素
var demoArray = ['a', 'b', 'c'];
demoArray.shift(); // => a
demoArray.shift(); // => b
demoArray.shift(); // => c
demoArray.shift(); // => undefined
3) push() :在数组尾部插入元素
var demoArray = ['a', 'b', 'c'];
demoArray.push('d'); // => 4, demoArray : ['a', 'b', 'c', 'd']
demoArray.push('e', 'f'); // => 6, demoArray :['a', 'b', 'c', 'd', 'e', 'f']
console.log(demoArray); // => ['a', 'b', 'c', 'd', 'e', 'f']
4) pop() :移除并返回数组的最后一个元素
var demoArray = ['a', 'b', 'c'];
demoArray.pop(); // => c
demoArray.pop(); // => b
demoArray.pop(); // => a
demoArray.pop(); // => undefined
5) concat() //连接数组,并返回结果
6) join()
alert (array.join("-")); //把数组中的元素,按传进去的符号,拼接成字符串
alert(array.join()) ; //如果不传参数,则用 , 拼接成字符串
7) indexOf()
['a', 'b', 'c'].indexOf('a'); //ie不支持
8) lastIndexOf
['a', 'b', 'c'].lastIndexOf('b') //1 , 实测火狐支持,ie不支持
9) reverse() //颠倒数组中元素的顺序。
10) sort();
1. [1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5] :这里都元素都被转换为字符,11的字符在2前
2. [1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
return v1 - v2;
}); // => [1, 2, 3, 4, 5, 11, 22] :从小到大排序
3. [1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
return -(v1 - v2); //取反,就可以转换为 从大到小
}); // => [22, 11, 5, 4, 3, 2, 1]
11) slice(startIndex,endIndex)
[1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6] :从序号1开始截取
[1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4] :截取序号0到序号3(序号4的前一个)的元素
[1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6] :截取后面的2个元素