核心(ECMAScript)
文档对象模型(DOM) Document object model (整合js,css,html)
浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
1.JavaScript的引入方式
直接编写
可以放在head和body标签内,建议放在body里的最后面,将html标签加载完成后加载js。
<script>
alert('hello')
/*alert访问网页时会在地址栏出现一个hello框*/
</script>
导入文件
<script src="hello.js"></script>
2.变量
- 声明变量时不用声明变量类型,全都使用var关键字 var a
- 一行可以声明多个变量,并且可以是不同类型
- 声明变量时不用var,则是全局变量.
- 变量命名,首字符只能是字母下划线$三选一,且区分大小写
- 变量还应遵守以下命名规则:
Camel 标记法
首字小写,接下来的字母都以大写字符开头 var myTestValue = 0;
Pascal 标记法
首字母大写,接下来的字母都以大写字符开头
Var MyTestValue = 0, MySecondValue = “hi”;
匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母或小写字母序列,说明该变量的类型。i 表示整数,s 表示字符串,
Var iMyTestValue = 0, sMySecondValue = “hi”;
<script>
var a=1, b=3;
var s="hello";
var f=3.2;
alert(a)
alert(s)
alert(f)
<!--在title中依次显示asf的值,点击确认进行下一个-->
console.log(a);
console.log(b);
console.log(s);
console.log(f);
<!--在f12里的console栏中显示-->
<!--注释方式: // /**/-->
</script>
3.基本数据类型
基本数据类型放在堆内存中,引用数据类型在堆内存中存栈内存中的地址,指向栈内存。
js的五种基本数据类型
1 Number不区分整型数值和浮点型数值
2 String字符串数据类型""或’'构成 unicode类型
3 Boolean : true false 用于条件判断
4 Undefined:undefined
5 null: object占一个对象位置
<script>
//16进制数据前面加上0x,八进制前面加0
var i=10;
var s2="\u4f60\u597d\n欢迎来到\"JavaScript世界\""
var b=false;
alert(s2);
if (true){
alert("success!");
}
var a; //如果声明了某个变量,但是未对它赋值,则该变量是Undefined类型,值也为undefined
alert(a);
var obj1=null //设置占用一个对象 需要的时候进行赋值
var obj= new Object()
//数据类型转换 数字加字符串 数字转换为字符串。true表示1 false表示0。字符串加布尔为将布尔直接变为字符串
alert(1+"hello");
alert(1+true);
alert(1+false);
alert(2==true);//false true为1
alert("hello"+true);
alert(parseInt(3.14));//转换为整形
alert(parseInt("3.14a"));
alert(parseInt("a3.94"));//NaN: 当字符串转换数字失败时就是NaN;属于Number;
alert(NaN==0);
alert(NaN>0);
alert(NaN<0);
alert(NaN==NaN);//NaN出现在表达式中结果一定为false,除了!=
alert(NaN!=0);
//查看数据类型
console.log(typeof(s2));
console.log(typeof(a));
console.log(typeof(obj1));
console.log(typeof(i));
console.log(typeof(b));
console.log(typeof(obj));
</script>
4.运算符
算数运算符
-
加(+)、 减(-)、 乘(*) 、除(/) 、余数(% )
-
加、减、乘、除、余数和数学中的运算方法一样 9/2=4.5,4*5=20,9%2=1
-
-除了可以表示减号还可以表示负号
-
+除了可以表示加法运算还可以用于字符串的连接
-
递增(++) 、递减(--)
逻辑运算符
-
等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < ) 大于等于(>=) 、小于等于(<=) 与 (&&)、或(||) 、非(!)
-
逻辑 AND 运算符(&&)
-
逻辑 OR 运算符(||)
赋值运算符
关系运算符
<script>
//先运算还是先赋值
var x=1;
alert(x++); //1
alert(++x); //3
alert(--x); //2
alert(x--); //2
alert(x); //1
// 一元加减法
var a=3;
var a="3.2"
var a="123a456"
b=+a;
alert(b)//3 3.2 NaN;
alert(typeof(b))//number number number;
//&& 逻辑与 两方都为1则为1
//|| 逻辑或 两方都为0则为0
//! 逻辑非
var a=1;
if(a<10 && a>0){
++a;
alert(a); //2
}
if (null && true){
alert(1); //不响应
}
if (true && new Object()){
alert("hello"); //hello
}
//移位运算 & | ^
3<<2 //3向左移两位 移一位乘2
// 11<<2-->1100 //12
// 1100>>1-->110 //6
//赋值运算符
alert(2==2);//true
alert(2=="2");//true 先数据转换
alert(2==="2");//false 不进行转换处理
alert(4!="4")//false 先数据转换
alert(4!=="4")//true
//等性运算符
null==undefined
false==0
true==1
"5"==5
//关系运算符
alert(25<3);//false
alert("25"<"3");//两个字符串比较acsii码 true
alert("25"<3)//false
alert(true&&3)//3
//比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
//比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续
</script>
5.控制语句
if-else switch for while 异常处理
<script>
// if else
var week="Sunday";
if (week=="Sunday"){
alert(7);
}
else if(week=="周六"){
alert(6);
}
else {
alert("not 6 7");
}
//switch
var x=3;
switch(x){
case 1:y="星期一";
break; //不加break会继续往下走
case 2:y="星期二";
break;
case 3:y="星期三";
break;
case 4:y="星期四"
break;
case 5:y="星期五";
break;
case 6:y="星期六";
break;
case 7:y="星期日";
break;
default: y="未定义";//其余所有情况 default放到最下面
break;
}
alert(y);
// for循环
var a=[1,"hello",true];
for (var i in a){
console.log(i);//i表示索引
console.log(a[i]);//通过索引拿到值
}
//for循环求1-100的和
var ret=0;
for (var i=1;i<101;i=i+1){
ret+=i;
}
alert(ret)
//在浏览器显示不同字体的hello
for (var i=1;i<=6;i++){
document.write("<H"+i+">hello</H "+i+">");
document.write("<br>");
}
obj={"11":"111","22":[1,2]};
alert(typeof(obj)) //object
alert(obj) //[object Object]
for (var i in obj){
console.log(i);//11 22
console.log(obj[i]);// 111 [1,2]
}
//while 循环
var i=1;
var ret=0;
while (i<101){
ret+=i;
i++;
}
alert(ret)
//异常处理
function func1() {
try{//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
var b=123;
alert(b);
throw new Error("hello")
}
catch(e){// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
alert(e);
}
finally {
alert("success!")//无论try中代码是否有异常抛出,finally代码块中始终会被执行。
}
}
func1()
</script>
6.对象的概念与分类
object对象:所有对象都由这个对象继承而来;
11种内置对象
Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp(正则表达式) , Object
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象。
function 对象
<script>
var s="hello";
var s2=new String("helloha");//创建字符串对象
alert(s);
alert(s2);
//function 对象
//function 创建方式1 (推荐)
function func1() {
alert(123);
return 8;
}
var ret=func1();
alert(ret);
//function 创建方式2
//var func2=new Function("参数1","参数n","函数体");
var add=new Function("a","b","alert(a+b)");
add(1,2);
alert(add.length);//参数个数
//function 创建方式3
var func3=function () {
alert(123)
};
func3();
//function属性和方法
function f() {
return 8;
}
alert(void(f())); //void 对返回的值阻拦,输出undefined
function func1(){
b=4;//全局变量
//var b=3;//局部变量
}
func1();//先将全局变量缓存到内存中
alert(b);
var ret=0
function func1(a,b) {
ret=a+b;
return ret;
}
alert(func1(1,5,6,9));//不报错,取前两个参与计算1+5
function a(a,b){
alert(a+b);
}
var a=1;//对a重新赋值
var b=2;
a(a,b);//报错 此时a不是一个函数
//arguments对象 实现所有参数的加减
var ret=0;
function add() {
console.log(arguments.length);//5
console.log(arguments);//arguments对象
for (var i in arguments){
ret+=arguments[i];
}
return ret;
}
alert(add(1,2,3,4,5));
function func2() {
if (arguments.length!=3){
throw new Error("param should be 3");//抛出异常
}
}
func2(1,2,3,45);
//自执行函数
(function(arg){
console.log(arg);
})('123')
dic={"1":"111"};
console.log(dic);//Object {1: "111"}
ret=dic.toString();
console.log(ret);//[object Object]
console.log(typeof(ret));//string
</script>