[VN-SGG] JavaScript 基础(上)
JavaScript视频课程笔记【入门到精通】,内容非系统讲解,仅做个人参考回顾,这只是笔记!!!
什么是JavaScript
一门完备的计算机编程语言,诞生于95年,一开始用于前端网页内容校验;Node.js是运行在服务端的JavaScript;JS的标准称为ECMAScript;该标准由不同的厂商实现,不同的浏览器厂商会有不同的实现;Chrome的js引擎是V8引擎,运行速度最快;
实际上JavaScript的含义要大些:一个完备的JavaScript实现包含三个部分:
- ECMAScript:JavaScript的标准,一般指前端的JS;
- DOM:文档对象模型,提供了一组对象 可以操作网页;
- BOM:浏览器对象模型,提供了一组对象 可以操作浏览器;
JS特点:
- 解释型语言;
- 动态语言;
- 基于原型的面向对象;
与Java的关系
没啥关系
hello world
运行环境:浏览器;
<script type="text/javascript">
// 警告框
alert("Hello world");
// 在计算机页面中输出一个内容
document.write("Hello world");//向body中输出一个内容
// 向控制台输出一个内容
console.log("Hello world");
</script>
JS代码的书写位置:
- 可在点击事件中 直接写入js代码
<button onclick="alert('tint')">click</button>
- 可在超链接的href属性中
<a href="javascript:alert('tint')">click</a>
- script标签中:参照前面示例;
- js外部文件中,方便复用,也可以利用浏览器的缓存机制;
<script type="text/javascript" src="js/script.js"></script>
script标签一旦被用于引入外部文件,则在标签之间写入的内容将不再生效;
JavaScript基础语法
- JS中严格区分大小写;
- 每条语句以分号’;'结尾;
- JS中会自动忽略多个空格和换行,因此可用两者进行格式化;
声明变量并赋值:
var x = 1;
console.log(x);
标识符规则:
- 包含字母、数字、下划线、$;
- 数字不能开头;
- 不能是关键字和保留字;
- 多采用驼峰命名;
JS底层实际是Unicode编码,理论上也可以使用中文做标识符;
数据类型
基本数据类型:
- String
- Number
- Boolean
- Null
- Undefined
引用数据类型:
- Object
字符串-String
var str = "hello";
var str1 = "\"hello\"";//转义字符‘\’的使用
Number
JS中所有的数字都是Number类型:整数 和 浮点数;
// 可以使用 运算符 typeof 检查一个变量的类型
var a = 'string';
var b = 123;
typeof a;//string
typeof b;//number
Number.MAX_VALUE;// 如果用Number表示的数字超过最大值 则会返回 Infinity;
- Number.MAX_VALUE:最大值;
- Number.MIN_VALUE:0以上最小值;
- Infinity:表示正无穷,类型是Number;
- -Infinity:表示负无穷,类型是Number;
- NaN:这不是一个数字,类型是Number;
如果使用JS进行浮点运算,可能会得到一个不精确的值;所以不要使用JS进行精确度比较高的运算,尽量放到服务端;
Boolean
有两个值 true 和 false;
Null
只有一个值 null,专门用来表示一个 空对象;所以使用typeof检查的时候会返回 object;
Undefined
一个变量 声明了但没有赋值,它的值就是Undefined,使用typeof检查的时候会返回 undefined;
强制类型转换
强制类型转换-String
方式1:调用被转换数据类型的 toString()方法;
var a = 123;
/*
* 该方法有返回值,并不会改变变量的数据类型;
* 注:null和undefined 没有toString方法;
*/
a.toString();// "123"
方式2:调用String()函数;
/*
* 该函数有返回值,并不会改变变量的数据类型;
* 对于 Boolean Number String 调用String()函数 就是在调用 toString()方法;
* 但对于null和undefined,则直接转换成相应的字符串'null'和'undefined';
*/
var a = 234;
String(a);// "234"
强制类型转换-Number
方式1:Number函数
var a = "123";
a = Number(a);
var b = "abc";
b = Number(b);//非纯数字的字符串 将之转换为数字 返回NaN
var c = "";
c = Number(c);// 0
var d = true;
d = Number(d);// 1
var e = false;
e = Number(e);// 0
var f = null;
f = Number(f);// 0
var g = undefined;
g = Number(g);// NaN(任何值 和NaN运算的值 还是NaN;任何值 和NaN比较的值 都是false)
方式2:专门用来处理字符串
var a = "123px";
a = parseInt(a);//123 只转换第一个有效整数
var b = "a123px";
b = parseInt(b);//NaN
var c = "123.5px";
c = parseFloat(c);//123.5 只转换第一个有效浮点数
如果对非String类型使用这两个函数,会先将其转换为字符串,再进行处理;
var a = 123.456;
a = parseInt(a);// 123 会先转成 字符串"123.456"
其他进制的数字:
0x 0 0b 对应16 8 2进制的数;其中0b不同的浏览器可能会不支持;var a = "070"; a = parseInt(a);//不同浏览器解析出来的结果可能会不一样; //解决方式:传入标识进制的参数 a = parseInt(a,10);
强制类型转换-Boolean
使用Boolean函数:
数字:除了0 和 NaN外,其他都是true;
字符串:除了空串 “”,其他都是true;
null:false;(对象非空即为true)
undefined:false;
var a = 123;
a = Boolean(a);//true
运算符
注:通用的运算符规则不再描述,只对相对陌生的一些点进行梳理;
运算符 有返回结果,如typeof运算符的返回结果的类型是"string";typeof(typeof res)
;
对 数字 和 非数字类型进行算数运算时,会先将其转换为Number 再进行运算;
如果是字符串类型的加法,表示的是字符串的拼接;
var a = 123 + true;
console.log(a);//124
var a = 123 + "abc";
console.log(a);//123abc
1+2+"3";//33
"1"+2+3;//123
隐式类型转换:
- 转String:其他类型与字符串+ 都表示字符串拼接,可以利用这个 将任意数据类型转换为字符串;
a=a+"";
- 转Number:其他类型与数字运算 都会先转成Number再运算,可以利用这个将任意数据类型转换为数字;
a=a-0; //-0 *1 均可 //使用正+负-号也可行 1 + +"2" + 3;//6
- 转Boolean:为任意的数据类型做两次非运算,即可将其转换为布尔值;
var a = "hello"; a = !!a;//true
&& 和 || 用于非布尔值的情况:
- 对参与运算的值,先转换为Bool值;
- 对于 && 如果第一个值为true,则返回第二个值;如果第一个值为flase直接返回第一个值;注意返回的不是true或false;
- 对于 || 如果第一个值为true,则返回第一个值;如果第一个值为flase直接返回第二个值;注意返回的不是true或false;
var res = "123" && 456;
console.log(res);//456
比较运算符:
- 参与比较的两个值默认会转换成数字 再进行比较;
- NaN参与的比较结果均为false;
- 参与比较的两个值 如果均为字符串,实际比较的则会使 两个unicode编码;
- 多个字符的比较 是一个个进行比较的,如"abc" > “b”;比较的是a和b;
console.log("11" > "5");//false 比较的实际是 1 和 5
Unicode编码的使用:
- 在JS代码中使用转义字符 \u四位编码,编码是16进制,如
console.log("\u2100");//℀
- 在网页中使用 &#四位编码,注意这个编码是十进制的,如
☠
表示的是“☠”;
相等运算符:
- ==
相等:如果比较的值数据类型不一致,会转换成相同类型再进行比较,一般都是将两个值转换成Number(但不都是);
'1' == 1;//true true == '1';//true null == 0;//false(特殊的) undefined == null;//true NaN == NaN;//false
NaN不和任何值相等,包括它本身;可以通过isNaN函数 判断一个值是否是NaN;
- !=
不等:使用类似 相等;
- ===
全等:和 相等 类似,只不过不会进行自动的数据类型转换,如果数据类型不一致直接返回false;
- !==
不全等:使用类似 全等;
代码块:(ES5)
js使用{}对代码进行分组,形成一个代码块;但是它的作用只是分组,代码块中的内容在外部是完全可见的;
{var a = 10;}
console.log(a);//10
JavaScript流程控制语句
- 条件判断语句:
- 条件分支语句
- 循环语句
条件判断语句
if-else if-else
prompt()函数
可以弹出一个提示框,提示框中提供了一个文本输入框;
用户输入内容将作为该函数的返回值;
var score = prompt("请输入成绩(0-100)");
if (score > 100 || score < 0 || isNaN(score)){
alert("something!");
}
条件分支语句
switch(条件){
case 表达式值:
执行语句;
break;
case 表达式值:
执行语句;
break;
default:
执行语句;
break;
}
循环语句
- while循环
- for循环
break 和 continue,二者只能用在循环中;
对象的简介
Object对象,引用数据类型;区别于5中基本数据类型;对象是复合数据类型,在对象中可以保存不同数据类型的属性;
对象的分类:
- 内建对象:由ES标准中定义的对象,任何ES实现中均可使用;
Math Function Object String Number…
- 宿主对象:由JS运行环境提供的对象,主要是浏览器提供的对象;
BOM DOM;如console document对象;
- 自定义对象:开发人员创建的对象;
对象基本操作
//使用new调用的函数,是构造函数(constructor),构造函数是专门用来创建对象的函数;
var obj = new Object();
typeof obj;//object
//向对象中添加属性
obj.name = "Flower";
obj.age = 29;
//删除对象属性
delete obj.name;
//获取对象属性 方式1
obj.name = "haha";
obj.name;
//获取对象属性 方式2
obj['name'] = "haha";//这种方式赋值 只能以这种方式访问;
obj['name'];
使用中括号
[]
形式操作属性,更加灵活;可以直接传递一个对应属性名的变量;
JS属性的值可以是任意的数据类型;
in运算符
检查一个对象中是否含有指定属性,返回布尔值;
if ("test" in obj){
return;
}
基本数据类型和引用数据类型
基本数据类型:
栈内存;变量保存的是值;
引用数据类型:
堆内存,new一个对象时,就是在堆中开辟一个内存空间,变量保存的是对象的内存地址(引用);
对象字面量
var obj = {};
var obj1 = {name:"haha",age:28};//创建对象字面量同时 指定属性,属性名的双引号可加可不加;
函数的简介
函数也是一个对象;可以封装一些功能;
//函数构造器
var fun = new Function("console.log('testing');");
typeof fun;//function
fun();//函数调用
//函数声明
function funname([para1,para2...paran]){
console.log('testing');
}
//匿名函数表达式
var funcname = function(paras){
};
- 调用函数时解析器不会检查实参类型;可能需要必要的函数类型校验;
- 调用函数时,解析器也不会检查函数的数量;(不足的形参为undefined,多余的实参会被忽略)
立即执行函数
//立即执行函数 往往只会执行一次
(function(){
alert();
})();
方法
对象的属性值可以是任意数据类型,如果是一个函数,通常称这个函数为对象的方法;
var obj = new Object();
obj.name = "houzi";
obj.logName = function(){
console.log(obj.name);
}
var obj2 = {
name:"bajie",
logName:function(){
console.log(obj2.name);
}
}
枚举出一个对象的所有属性
使用for in 枚举对象的属性
var obj = {
name:"shaseng",
age:18
}
for(var n in obj){
// n 就是对象的属性名 的一个变量
console.log(obj[n]);
}
JS中作用域
全局作用域
页面打开时创建,页面关闭时销毁;
全局作用域中有一个全局对象window,代表一个浏览器窗口,由浏览器创建;
在全局作用域中创建的变量都会作为window对象的属性保存;创建的函数都会作为window对象的方法;
- 变量的声明提前
使用var声明的变量,会在所有代码执行之前被声明;
如果不使用var,则变量不会被声明;
赋值则是在赋值语句执行时才发生;
console.log(a);//undefined
var a = 1;
- 函数声明提前
使用函数声明形式创建的函数
function funname(){}
,会在所有代码执行之前就被创建,因此可以在函数声明语句前调用该函数;其他形式创建的函数则不可,如使用函数表达式创建的就不行;
sayHello();
function sayHello(){
console.log('hello');
}
函数作用域
调用函数时创建,函数调用结束销毁;
每次调用函数都会创建一个新的函数作用域;
全局作用域无法访问函数作用域的变量;
当在函数作用域中使用一个变量时,如果没有声明,会继续向上层作用域寻找;如果全局作用域也没找到,就报错;
函数作用域中要访问全局变量,可以使用window.a;
函数作用域中,也有声明提前的特性;
在函数作用域中使用的变量,如果不使用var声明,就会变成全局变量;
function func1(){
d = 100;
}
func1();//调用下
console.log(d);//100
JS Debug
查看Chrome浏览器,打开调试控制台,Sources下,可以对js脚本这是断点,查看当前作用域变量值的变化;