# 三句话 #
- alert(“内容”);
效果:在页面中弹出一个提示框,提示信息从alert后面的引号中的文本来的。
注意:如果页面上出现弹出框以后,页面的位置不能改变,并且不能关闭。
- console.log(“内容”);
向浏览器的控制台输出一句话。
作用:用来进行代码调试。
- prompt(“内容”);
弹出一个输入框,给用户提供输入信息的位置。
# 数据类型 #
- Undefined
- Null
null值表示一个空对象指针
alert(null == undefined); //true
- Boolean
数据类型 | 转换为true的值 | 转换为false的值 |
---|---|---|
Boolean | true | false |
String | 任何非空字符串 | “”(空字符串) |
Number | 任何非零数字值(包括无穷大) | 0和NaN |
Object | 任何对象 | null |
Undefined | n/a | undefined |
- 字符串:String
特点:用引号引起来的文本的串。
字符串是不可变的。一旦被创建,值就不能改变
注意:
1) 这个引号既可以是单引号,也可以是双引号。
2) 如果要在字符串输出引号应该怎么办
a. 如果字符串有双引号,可以将字符串的引号改变为单引号
b. 可以使用转译符。
常用的转译符:
\' 单引号
\" 双引号
\n 换行
\t 缩进
\b 空格
\r 回车
\\ 斜杠
- 数值类型:Number
var octalNum1 = 070; //八进制的56
var octalNum2 = 079; //无效的八进制,解析为79
var hexNum1 = 0xA; //十六进制的10
var hexNum2 = 0x1f; //十六进制的31
不推荐用 .1 来代替 0.1
特点:表达的是一种数据的量
加号的作用:
1) 两个字符串用加号连接,那么将来加号起到的作用是连接这两个字符串。
2) 两个数值用加号连接,那么将来加号起到的作用是加法运算符的作用。
3) 加号连接的两个直接量中有一个是字符串,那么加号的作用是连接。
- 判断数据的类型:
typeof: 判断数据类型
返回值:
“undefined”——如果这个值未定义;
“boolean”——如果这个值是布尔值;
“string”——如果这个值是字符串;
“number”——如果这个值是数值;
“object”——如果这个值是对象或null;
“function”——如果这个值是函数。
用法:
typeof(直接量)
console.log(typeof("abd")); //string
console.log(typeof(123)); //number
typeof 直接量
console.log(typeof "abd"); //string
console.log(typeof 123); number
- Math对象
Math.pow(2,53) 2的53次幂
Math.round(.6) => 1.0 四舍五入
Math.ceil(.6) => 1.0 向上求整
Math.floor(.6) => 0.0 向下求整
Math.abs(-5)
Math.max(x,y,z)
Math.min(x,y,z)
Math.random() 生成一个大于等于0小于1.0的伪随机数
Math.PI
Math.E
Math.sqrt(3)
Math.pow(3,1/3)
Math.sin(0)
Math.log(10) 10的自然对数
Math.log(100)/Math.LN10 以10为底100的对数
Math.log(512)/Math.LN2 以2为底512的对数
Math.exp(3) e的3次幂
- 数据类型转换
强制转换:
var a = "123";
var b = Number(a) + 1;
console.log(b); //124
console.log(typeof b); //number
var c = parseInt(a);
console.log(c); //number
var a = "abc";
var b = Number(a);
console.log(b); //NaN
console.log(typeof b); //number
Number
1. 如果是数字值,返回本身
2. 如果字符中包含有效的浮点格式,将其转换为浮点数值
3. 如果是空字符串,将其转换成0
4. 如果字符串中包含非以上格式,则将其转换成为NaN
parseInt
1. 忽略字符串前面的空格,直至找到第一个非空字符
2. 如果第一个字符不是数字符号或者负号,返回NaN
3. 如果第一个字符是数字,则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
4. 如果是小数,会转成整数(向下取整)
var num1 = parseInt("10", 2); //2 (按二进制解析)
var num2 = parseInt("10", 10); //10 (按十进制解析)
//建议无论在什么情况下都明确指定基数
parseFloat
与 parseInt 一样,唯一区别是可以保留小数。
注意:
parseFloat只解析10进制,因此没有第二个参数
转字符串
- .toString()
var a = 123;
a = a.toString();
- String()
var a = 123;
a = Srting(a);
第一个方法是直接调用这个变量对象中的方法,第二个就是直接使用强制转换的方法。
- boolean转换
var a = "true";
a = Boolean(a);
注意:
false “”(空字符串) 0 NaN undefined null 会转换成false,其余转换成true
- 隐式转换
- 隐式转换成Number:
直接在要转换的内容前加上”+” “-” “*” “/” “%”;
- 隐式转换成Number:
var a = "123"; ===> a =+a;
var a = "123"; ===> var b = a * 2; ===> 246;
- 隐式转换成字符串:
var a = 123; ===> a = a + "";
3.隐式转换成boolean:
var a = 123; ===> a = !!a;
- script标签属性
type
type=”txt/javascript”
可以省略
async
async=”async”
值可以省略,立即异步下载外部js,不影响页面其它的操作,js下载完毕立即执行
defer
defer=”defer”
值可以省略,脚本延迟到文档完全被解析和显示后再执行,只有外部脚本可以使用 - 数值
最小值:Number.MIN_VALUE 5e-324
最大值:Number.MAX_VALUE 1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity 数值检测
NaN 非数值 (Not a Number)
– console.log(“abc”/18); //结果是NaN
– NaN 与任何值都不相等,包括NaN本身
isNaN(): 任何不能被转换为数值的值都会导致这个函数返回 true
– isNaN(NaN); //true
– isNaN(“blue”); //true
– isNaN(123); //false逻辑运算符
&&
如果第一个操作数为假,返回第一个操作数,第二个操作数不执行
如果第一个操作数为真,则返回第二个操作数
||
如果第一个操作数为假,返回第二个操作数
如果第一个操作数为真,返回第一个操作数,第二个操作数不执行 (常用)
没有重载
重载:函数的名字相同,但是参数个数不同
JavaScript中没有重载的概念,下面的相同名称的函数会把上面的函数覆盖,所以不允许出现同名的函数(大多数情况下)
函数的两种定义方式
1.函数声明
function f(a,b) {
return a + b;
}
console.log(f(5,6));
2.函数表达式
//myFun和f等价
var myFun = function (a,b) {
return a + b;
}
console.log(myFun(6,7));
变量的作用域
不使用var声明的变量是全局变量,不推荐使用
变量作用域只有两种,全局变量和函数内的变量
js中没有块级作用域
在其他语言中,在代码块中定义的变量,外部是访问不到的,比如在for循环中定义的变量。
但是在js中没有块级作用域
典型题目1
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
输出结果:undefined
js是解释型语言,由解析器执行
解析器解析过程,
预解析:
先找var,function和参数(函数参数)
找到var和function之后,会把var和function函数提前(var仅提前声明,不提前赋值)
从上到下一行一行执行代码
var num; //全局预解析
function fun() {
var num; //局部预解析
console.log(num);
num = 20;
}
num = 10;
fun();
典型题目2
var a = 8;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
输出结果:undefined 9
预解析后:
//全局预解析时只把函数提前,在函数要被调用前才对函数内部进行局部预解析
var a;
function f1() {
var b;
var a;
b = 9;
console.log(a);
console.log(b);
a = '123';
}
a = 8;
f1();
典型题目3
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
输出结果:9 9 9 9 9 报错
预解析后:
function f1() {
var a; //a是局部变量
a = b = c = 9; //b和c是全局变量
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
命名函数
匿名函数
没有命名的函数
一般用在绑定事件的时候
function () {}
自调用函数
只能执行一次
(function () {
console.log("test");
})();
函数是一种数据类型
var myFun = function () {
console.log("hello");
};
console.log(typeof myFun);
输出结果:function
函数可以作为另一个函数的参数
//求两个数的数学运算的结果
function getResult(a, b, fn) {
return fn(a,b);
}
var n = getResult(5,6,function (a,b) {
return a + b;
});
console.log(n); //11
console.log(typeof n); //number
function f1(a,fn) {
fn(a);
}
var n = 5;
var myFun = function (a) {
console.log(a);
}
f1(n, myFun);
创建对象
var hero = new Object();
//属性--特征 名词
hero.name = "xiaoming";
hero.level = 0;
hero.diamond = 0;
//方法--行为 动词
hero.moveLeft = function() {
console.log("left");
};
hero.attack = function(name) {
//只有在当前hero对象的方法中,this才是当前hero对象
//this 当前这个对象
console.log(this.name + "攻击" + name);
};
//获取对象的属性值
console.log(hero.name);
console.log(hero.level);
//调用对象的方法
hero.attack("xjj");
构造函数
构造一个对象,并且返回的函数
//1 内存开辟空间,存储新创建的对象new Object();
//2 会把this设置为当前对象
//3 执行函数内部的代码,设置对象的属性和方法
//4 返回新创建的对象
//定义构造函数
function Student(name, age, sex, score) {
//对象的属性
this.name = name;
this.age = age;
this.sex = sex;
this.score = score;
//对象的方法
this.sayHi = function() {
console.log("大家好,我是" + this.name);
}
//调用构造函数
var s1 = new Student("zhangsan", 18, 1, 10);
this
谁调用this就是谁
//1--------------------
function test() {
console.log(this);
}
test(); //window.test(); 两者等价
//上面的this是window, 实际是window调用test()
//2--------------------
p1.sayHi();
//sayHi()中的this,是p1,此时是p1调用sayHi()
//3--------------------
构造函数中的this,始终是new的当前对象
对象字面量
var arr = []; //数组的字面量
var arr = new Array(); //使用构造函数创建数组
var o = new Object(); //使用构造函数创建对象
var o = { //对象的字面量,等号右边的是对象的字面量,把字面量赋值给o
name: "xjj", //键值对
age: 18,
sex: "未知",
salary: 100,
dog: {},
cats: [],
sayHi: function() {
console.log("大家好,我是" + this.name);
}
};
JSON
什么是JSON
JavaScript Object Notation(JavaScript对象表示形式)
JavaScript的子集
//json 与对象字面量唯一的区别在于,键值对中的值需要用引号引起
//json是描述数据的一种标准规范
var o = {
"name": "xjj",
"age": 18,
"sayHi": function() {
console.log("大家好,我是" + this.name);
}
};
输出对象的属性和方法forin
//有些系统提供的对象的属性和方法无法遍历,原因是属性和方法被设置为不可遍历。。。
var arr = new Array();
for(var key in arr) {
//key对象的属性 键
console.log(key);
console.log(o[key]); //输出属性key对应的值
}
数据类型————简单(基本)类型和复杂(引用)类型
基本类型:直接存储值,直接在栈中存储数据
-Number、String、Boolean
-Undefined、Null
引用类型:存储引用,在栈中存储地址,地址指向堆
-Object、Array、Date、函数
两种类型作为函数的参数
当基本类型作为函数的参数的时候,函数内部对参数的修改,不会影响外部的变量
复杂类型作为函数的参数,函数内部对参数的修改,会影响外部变量
数组常用的方法
1.检测数组
instanceof 关键字 是否是谁的对象
var o = []; //o是数组类型
console.log(o instanceof Array); //true
console.log(o instanceof Date); //false
Array.isArray() HTML5中新增
2.转换数组
toString 把数组转换成字符串,每一项用,分割
valueOf() 返回数组对象本身
3.join
var array = [3,4,5,6,7,8];
console.log(array.toString()); //输出字符串3,4,5,6,7,8
console.log(array.join("|")); //输出字符串3|4|5|6|7|8
//toString()内部调用了join()
4.栈方法
push()方法,接收任意数量的参数,把他们逐个加到数组末尾,返回修改后的数组长度。
pop()方法,从数组末尾移除最后一项,减少数组的length值,并返回移除的项。
5.队列方法
typeof和instanceof的区别
typeof可以获取任意变量的类型
instanceof只能判断对象的类型
typeof在获取对象的类型的时候,不管什么时候对象获取的都是object
instanceof可以判断具体的类型
DOM
DOM:文档对象模型(Document Object Model),又称为文档树模型。是一套操作HTML和XML文档的API。
DOM可以把HTML和XML描述为一个文档树,树上的每一个分支都可以视为一个对象,通过DOM可以添加、修改和移除文档上的某一部分。
文档(Document):就是指HTML或者XML文件
节点(Node):HTML文档中的所有内容都可以称之为节点
元素(Element):HTML文档中的标签可以称为元素
文档元素(根元素):文档中的第一个元素,HTML文档元素就是
获取页面元素
getElementById() //根据id属性获取一个DOM对象,区分大小写,符合代码规范
getElementByTagName() //根据标签返回多个DOM对象
var img = document.getElementById("image");