一.核心
1.1 ECMAScript+DOM+BOM=JS(组成部分)
ECM:浏览器内置对象 js核心 语法规范
BOM:浏览器对象模型 操作API集合
DOM:文档对象模型 操作页面元素API集合
1.2 特点:
交互性(它可以做的就是信息的动态交互)
安全性(不允许直接访问本地硬盘)
跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)
二.书写位置
2.1 内嵌式:
<script>
alert("内嵌式")
</script>
2.2 外链式:
建一个文件类型为.js的文件,在该文件中写js语句,通过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
5.3 行内式:
直接写在标签身上
<input type="button" value="点我呀!" οnclick="alert('点我干啥!^6^');">
<button οnclick="alert('恭喜你,中 500 万.');">点我呀!</button>
三.注释
单行注释: // 注释语句 快捷键ctrl+/
多行注释: /* 注释语句 */ 快捷键ctrl+shift+/
注意:多行注释相互不能嵌套使用,只能在多行注释里面使用单行注释
四.数据类型
简单 数据
数值(number):整数和小数(比如1和3.14)
字符串(string):文本(比如Hello World)。
布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假)
undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值
null:表示空值,即此处的值为空。
对象(object):各种值组成的集合。
未定义型:undefined
复杂数据类型:Object
获取变量类型:typeOf
转换:toString() String()等
数值型:var i = 1; var d = 2.35;
字符串:var str = "用心学习";
布尔型:var b = true;
五.变量
声明
var 变量名称 = 存储的数据; (variable 变量)
命名规范
1. 只能由字母、数字、_(下划线)、$(美元符号)组成。
2. 不能以数字开头。
3. 命名中不能出现-(js会理解成减号进行减法的操作),不能和关键字冲突。
六、检测数据类型
typeof(value)
返回这个变量的类型.
说明 : 同一个变量, 可以进行不同类型的数据赋值
<script type="text/javascript">
var a;
alert(typeof a); // undefined
a = 998;
alert(typeof a); // number
a = "用心学习";
alert(typeof a); // string
七、算数运算符
- / % ++ –
1. 由于js中的小数和整数都是number类型,不存在类似整数除以整数还是整数的结论。
2. 字符串和其他的数据使用+号运算,会连接成一个新的字符串。
3. 字符串使用除了+以外的运算符:如果字符串本身是一个数字,那么会自动转成number进行运算
,否则就会返回一个NaN的结果,表示这不是一个数字。NaN:not a number
<script>
alert(1234 / 1000 * 1000); // 1234
var s = "12";
s -= 10;
alert(s); // 2
var s = "aa";
s -= 10;
alert(s); // NaN Not a Number 不是一个数字
var s = "12";
s += 10;
alert(s); // 1210
</script>
八.逻辑运算符
> >= < <= !=
== 等于(只比较内容) === 恒等于(比较内容的同时还要比较数据类型)
注意:关系运算符返回的结果只有两个:true / false
<script>
// 请问1 : 3 > 5, 结果为 ?
alert(3 > 5); // false
// 请问2 : “22” == 22 结果为 ?
alert("22" == 22); // true (仅仅判断数值)
// 请问3 : “22” === 22 结果为 ?
alert("22" === 22); // false (恒等于, 数值和类型都要相等)
</script>
九、逻辑运算符
&& 与 true&&false ====>false
|| 或 true||false ====>true
! 非 !true ====>false
false(理解):false, 0, null, undefined
true(理解):true, 非0, 非null, 非undefined
针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)
十、if语句
<script>
var score = 59;
if (score >= 90) {
alert("优秀");
} else if (score >= 80) {
alert("良好");
} else if (score >= 60) {
alert("及格");
} else {
alert("不及格");
}
十一、switch语句
<script>
var score = 59;
// 需求 : 将需要一个整型数值, 不想要小数点.
// window 对象的 parseInt 方法.
score = window.parseInt(score / 10 + "");
// alert(score);
switch (score) {
case 10:
case 9:
alert("优秀!");
break;
case 8:
alert("良好!");
break;
case 7:
case 6:
alert("及格!");
break;
default:
alert("不及格!");
break;
}
</script>
十二、循环结构 while、do-while. for;
<script>
// 需求 : 统计 1~100 之间能够被3和7整除的数字个数
var count = 0;
// 1. 遍历 1~100 之间的所有整型数值
for (var i = 1; i <= 100; i++) {
// 2. 判断
if (i % 3 == 0 && i % 7 == 0) {
// alert(i);
console.log(i);
// 3. 累加个数
count++;
}
}
// 4. 查看结果
// alert(count);
console.log(count);
十三、函数
是一种数据类型的函数都是Function的实例对象
13.1自定义函数
格式:
function 函数名(形式参数){函数体}
调用函数:函数名(实际参数);
1、函数只有被调用后才会执行
2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型
3.js中出现二个重名的函数名、后者会把前面的覆盖掉
script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}
// 调用函数 :
alert(demo2());
</script>
<script type="text/javascript">
// 定义一个函数 : function
function demo3(a, b) {
return a + b;
}
// 调用函数 :
alert(demo3(10, 20));//显示30
</script>
十四、匿名函数
没有名字的函数
function(形式参数){函数体}
调用方式:将匿名函数赋值给一个变量,通过变量名调用函数
定义函数并赋值给变量:var fn = function(形式参数){函数体}
调用函数:fn(实际参数);
<script type="text/javascript">
// 匿名函数 : 没有名称的函数
var func = function(i, u) {
alert(i + " love " + u);
}
// 调用函数 :
func("柳岩", "小白");//显示柳岩love小白
</script>
十五、js事件
事件三要素:
- 事件源:被监听的html元素(就是这个事件加给谁),就是某个(某些)html标签
- 事件类型:某类动作,例如点击事件,移入移除事件,敲击键盘事件等
- 执行指令:事件触发后需要执行的代码,一般使用函数进行封装 语法格式:事件源.事件类型=执行指令
十六.作用域
全局变量:不使用var声明的变量 尽量不用
局部变量:固定的代码块中可访问的变量 如函数内部
块级作用域:ES6之前没有
闭包: 有权访问另一个函数作用域中变量的函数 一个作用域可以访问另外一个函数内部的局部变量
作用:延申变量的作用域
递归:函数本身调用自己 很容易产生“栈溢出” 必须加退出条件return
<script type="text/javascript">
function f(num){
if(num<1){
return 1;
}else{
return f(num-1)*num;
}
}
</script>
</head>
<body>
<script type="text/javascript">
alert("10!的结果为:"+f(10));
</script>
十七.作用域链
只有函数可以制造此结构
十八.自定义对象
无序属性集合 特征–属性 行为–方法
十九.关键字
new:返回新对象 内部创建的一个空对象 使用this指向这个新对象
unction Animal(name){
this.name = name;
}
Animal.color = "black";
Animal.prototype.say = function(){
console.log("I'm " + this.name);
};
var cat = new Animal("cat");
console.log(
cat.name, //cat
cat.height //undefined
);
cat.say(); //I'm cat
console.log(
Animal.name, //Animal
Animal.color //back
);
Animal.say(); //Animal.say is not a function
this:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用