JavaScript
JS:轻量级的客户端脚本编程语言
- 编程语言
html和css是标记语言
编程语言是具备一定的逻辑的,拥有自己的编程思想(面向对象编程【OOP】,面向过程编程)
——面向对象:C++,Java,PHP,C#,JS
——面向过程:C
- 目前JS不仅仅是客户端语言,基于NODE可以做服务器端程序,所以JS是全栈编程语言
- 学习JS,学习它的及部分组成
JS的组成以及ES
1.JS组成
ECMAScript(ES)
:描述了该语言的核心语法和基本对象DOM:document object model
文档对象模型,描述处理网页内容的方法和接口,提供各种API(属性和方法)让JS可以获取或者操作页面中的HTML元素(DOM和元素)BOM:browser object model
浏览器对象模型,描述于浏览器进行交互的方法和接口,提供各种API让JS可以操作浏览器
2.ESMAScript
它是JS的语法规则,JS中的变量、数据类型、语法规范、操作语句、设计模式等等都是ES规定的
ES3.0被广泛应用, ES5 和ES6 没差太多
创建变量
1.变量(variable)
它不是具体的值,只是一个用来存储具体值的容器或者代名词,因为它存储的值可以改变,所以称为变量
2.创建变量的六种方式
基于ES的语法规范,在JS中创建变量有以下方式:
var(ES3)
function(ES3)
创建函数(函数名也是变量,只不过存储的值是函数类型的)、let(ES6)
const(ES6)
创建常量,常量的值不能被修改import(ES6)
基于ES6的模块规范导出需要的信息class(ES6)
基于ES6创建类
代码示例:
var[变量名]=值;
let[变量名]=值;
const[变量名]=值;
function 函数名(){
}
const m=100;
m=200;//=>Uncaugght TypeError:Assiqnment to constant variable.不能给常量重新赋值
3.创建变量的命名规范
- 严格区分大小写
- 遵循驼峰命名法:按照数字、字母、下划线或者$来命名(数字不能作为名字的开头),命名的时候基于英文单词拼接成一个完整的名字(第一个单词字母小写,其余每一个有意义单词的首字母都大写)
- 一般下划线在前面的,都是公共变量;$在前面的一般存储的是JQ元素
- 语义化强一些:
add/create/insert/del(delete)/update/remove(rm)/info/detail/log
- 不能使用关键字和保留字:在JS中有特殊含义的叫做关键词,未来可能会成为关键字的叫做保留字
数据类型
1.数据类型的分类
数据值是一门编程语言进行生产的材料,JS中包含的值有以下这些类型
- 基本数据类型(值类型)
(1)数字number
(2)字符串string
(3)布尔boolean
(4)null
(5)undefined - 引用数据类型
(1)对象object:普通对象 / 数组对象 / 正则对象 / 日期对象 / …
(2)函数function - ES6中新增加的一个特殊的类型:Symbol,唯一的值
2.各数据类型的特点
代码示例:
[基本数据类型]
var n=13;//=>0 -13 13.2 NaN 数字类型
var s='';//"" '13' "{}" 字符串类型
var b=true; // 布尔类型
[引用数据类型]
var o={
name:'xiaziyi',age:20}; //普通对象
var ary=[12,23,34,45]; //数组对象
var reg=/-?(\d|([1-9]\d+))(\.\d+)?/g; //正则对象 验证是否为有效数字的正则
function fn(){
} //函数对象
//Symbol类型
var a=Symbol('xiaziyi')
var b=Symbol('xiaziyi')
a==b =>false
1.数字类型
:中有一个特殊的值NaN(not a number代表不是一个有效的数字,但是属于number类型的)
2.字符串类型
:JS中所有用单引号或者双引号包裹起来的都是字符串,里面的内容是当前字符串中的字符(一个字符串由零到多个字符组成)
3.布尔类型
:只有两个值 true真 false假
4.普通对象
:由大括号包裹起来,里面包含多组属性名和属性值(包括多组键值对) { }空对象
5.数组对象
:中括号包裹起来,包含零到多项内容 [ ]空数组
6.正则对象
:由元字符组成一个完整的正则 / /不是空正则是单行注释
7.Symbol类型
:创建出来的一个唯一的值
3.****扩展:JS代码如何被运行以及运行后如何输出结果
- 如何被运行
1.把代码运行在浏览器中(浏览器内核来渲染解析)
js代码写在<script></script>
里面
或者当前项目新建一个js文件1-printvar a=12; alert(a);
下然后在html里面引入<script src="js/1-print.js"></script>
2.基于NODE来运行(NODE也是一个基于V8引擎渲染和解析JS的工具,不是语言)
var a=12; console.log(a);
- 运行后如何输出
1.alert
:在浏览器中通过弹框的方式输出(浏览器提示框)
注意:!!!基于alert输出的结果都会转化为字符串:把值(如果是表达式先计算出结果)通过toString这个方法转换为字符串,然后再输出!!!
var num=12;
alert(num); // =>window.alert
var str="xiaziyi";
alert(str);
alert(1+1); =>输出'2'
alert(true); =>'true'
alert([12,23]); =>'12,23'
alert({
name:'xxx'}); =>'[object Object]'
拓:为什么所有对象toString之后变成’[object Object]’?
toString()函数的作用是返回object的字符串表示,JavaScript中object默认的toString()方法返回字符串”[object Object]“。定义类时可以实现新的toString()方法,从而返回更加具有可读性的结果。JavaScript对于数组对象、函数对象、正则表达式对象以及Date日期对象均定义了更加具有可读性的toString()方法:
array的toString() | 将返回以逗号分隔的数组成员。比如,[1,2,3].toString()会返回字符串”1,2,3″ |
function的toString() | 将返回函数的文本定义。比如,(function(x){return x2;}).toString()会返回字符串”function(x){return x2;}” |
RegExp的toString() | 与function的toString()方法类似,将返回正则表达式的文本定义。比如,/\d+/g.toString()会返回字符串”/\d+/g” |
Date的toString() | 将返回一个具有可读性的日期时间字符串。 |
2.confirm
:和alert的用法一致,输出结果也是字符串,差别在于提示的框中有确定和取消两个按钮,所以它是确认提示框
但是var flag=confirm(num); alert(flag);
接受当前
var flag=confirm('确定要退出吗?');
if(flag){
//=>用户点击确定按钮
}else{
//=>用户点击取消按钮
}
3.prompt
:在confirm的基础上增加输入框(一般不怎么用)
4.console.log
:在浏览器控制台输出日志(按F12(Fn+F12)打开浏览器的控制台)
(1)Elements
:当前页面中的元素和样式在这里都可以看到,还可以调节样式修改结构等
(2)Console
:控制台,可以在JS代码中通过.log
输出到这里,也可以在这里直接编写JS代码
(3)Sources
:当前这个网站的源文件都在这里
(4)…
console.dir
:比log输出的更加详细一些(尤其是输出对象数据值的时候)
console.table
:把一个JSON数据按照表格的方式输出
number数据类型详细剖析
1. number数据类型
NaN
:not a number 但是它是数字类型的
isNaN
:检测当前值是否不是有效数字,返回true代表不是有效数字,返回false是有效数字 语法:isNaN([value])
isNaN('13'); =>flase
isNaN(true); =>flase
isNaN(false); =>flase
isNaN(null); =>flase
isNaN(undefined); =>true
isNaN({
age:9}); =>true
isNaN([12,23]); =>true
isNaN([12]); =>flase
isNaN(/^$/); =>true
isNaN(function( ){
}); =>true
isNaN检测的机制:
-
首先验证当前要检测的值是否为数字类型的,如果不是,浏览器会默认的把值转化为数字类型
把非数字类型的值转换为数字
(1)其他基本类型转换为数字:直接使用Number这个方法转换的
[字符串转数字]
Number('13')->13
Number('13px')->NaN
如果当前字符串中出现任意一个非有效数字字符,结果则为NaN
Number('13.5')->13.5
可以识别小数
[布尔转数字]
Number(true)->1
Number(false)->0
[其他]
Number(undefined)->NaN
Number(null)->0
(2)把引用数据类型转换为数字:先把引用值调取toString转换为字符串,然后再把字符串调取Number转换为数字
[对象]
({}).toString()->'[object Object]'->NaN
[数组]
[12,23].toString()->'12,23'->NaN
[12].toString()->'12'->12
[数组]
/^$/.toString()->'/^$/'->NaN
!!注意!!:
Number(‘’)->0
[ ].toString()->' '
=>isNaN([ ]):false
-
当前检测的值已经是数字类型,是有效数字返回false,不是返回true(数字类型中只有NaN不是有效数字,其余都是有效数字)
2. parseInt / parseFloat
等同于Number,同样是为了把其他类型的值转换为数字类型
和Number的区别在于字符串转换分析上
Number
:出现任意非有效数字字符,结果就是NaN
parseInt
:把一个字符串中的整数部分解析出来
parseFloat
:是把一个字符串中小数(浮点数)部分解析出来
注意: 从字符串最左边字符开始查找有效数字字符,并且转换为数字,但是一旦遇到一个非有效数字字符,查找结束
parseInt('13.5px') =>13
parseFloat('13.5px') =>13.5
parseInt('width:13.5px') =>NaN
3. NaN的比较
NaN和谁都不相等,包括自己
NaN==NaN:false
检查一个变量num存储的值是否为一个有效数字,只能使用 if (isNaN(num))
布尔数据类型
-
只有true false 两个值
-
将其他数据类型转换为布尔类型
(1)Boolean
(2)!
先转布尔再取反
(3)!!等于没取反,直接转换为布尔类型 -
注意:
JS中只有 0 NaN 空字符串 null undefined 这五个值转换为布尔类型的false,其余转换为true
undefined数据类型
null 和 undefined 都代表空或者没有
null:空对象指针
一般都是人为手动的先赋值null,后面的程序中我们会再次给他赋值
undefined:未定义
不是人为手动控制,大部分都是浏览器自主为空,后面的程序中可以赋值也可以不赋值
object对象数据类型
如何理解对象(借鉴)
- 所谓对象,就是一种无序的数据集合,由若干个“键值对”(key-value)构成。
键名与键值之间用冒号分隔。如果对象内部包含多个键值对,每个键值对之间用逗号分隔。 - 从两个层次来理解:
(1)“对象”是单个实物的抽象。
一本书、一辆汽车、一个人都可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。当实物被抽象成“对象”,实物之间的关系就变成了“对象”之间的关系,从而就可以模拟现实情况,针对“对象”进行编程。
(2)“对象”是一个容器,封装了“属性”(property)和“方法”(method)。
所谓“属性”,就是对象的状态;所谓“方法”,就是对象的行为(完成某种任务)。比如,我们可以把动物抽象为animal对象,“属性”记录具体是那一种动物,“方法”表示动物的某种行为(奔跑、捕猎、休息等等)。 - 其次,典型的面向对象编程语言(比如C++和Java),存在“类”(class)这样一个概念。所谓“类”就是对象的模板,对象就是“类”的实例。JavaScript语言没有“类”,而改用构造函数(constructor)作为对象的模板。
- 前面说过,“对象”是单个实物的抽象。所以,通常需要一个模板,表示某一类实物的共同特征,然后“对象”根据这个模板生成。
所谓“构造函数”,就是专门用来生成“对象”的函数。它提供模板,作为对象的基本结构。一个构造函数,可以生成多个对象,这些对象都有相同的结构。 - 普通对象:
1.由大括号包裹起来的
2.由零到多组属性名和属性值(键值对)组成
属性是用来描述当前对象特征的,
属性名是当前具备这个特征,属性值是对这个特征的一个描述
(专业语法:属性名称为键【key】,属性值称为值【value】,一组属性名和属性值称为一组键值对)
对像的常规操作(对键值对的增删改查)
var obj={
name:'xiaziyi',
age