一、JavaScript介绍
1、JavaScript:轻量级的客户端脚本语音
2、目前js已经不仅仅是客户语音,基于NODE可以做服务器端程序,所以Javascript是全栈编程语音
3、js及部分组成
- ECMAScript (ES):js的核心语法
- DOM:docment object model 文档对象模型,提供各种api(属性和方法)让js可以获取或操作页面中的HTML元素(DOM和元素)
- BOM:browser object model 浏览器对象模型,提供各种api让js可以操作浏览器
- ESMAScript
- 他是js的语法规范,js中的变量,数据类型,语法规范
二、JavaScript变量(variable)
它不是指具体值,只是一个用来存储具体容器或者代名词,因为他存储的值可以改变。
1.基于ES语法规范,在JS中创建变量有以下方式
- 严格区分大小写
- var(ES3)
- function (ES3) 创建函数(函数名也是变量,只不过存储的值是函数类型的而已)
- let (ES6)
- const (ES6) 创建的是常量
- class (ES6)基于ES6创建类
- import (ES6)基于ES6的模块规范导出需要的信息
/*
* 语法:
* var [变量名] = 值;
* let[变量名] = 值;
* const[变量名] = 值;
* function 函数名(){
* }
* ....
*/
2、创建变量,命名的时候要遵循一些规范
- 严格区分大小写
var n = 12;
var N = 13; //=>两个n不是同一个变量
- 遵循驼峰命名法:第一个小写,后面的单词大写按照数字,字母,下划线来命名(数字不能做为开头)
var studentInfo; / student_info/
var _studentInfo;//(下划线在前端的都是公共变量)
var $studentInfo;//(一般存储都是JQ元素)
function ion toLowerPase(){
}
- 不能使用关键字
三、数据类型
1、基本数据类型
-
基本数据类型(值类型)
- 数字 number
[基本数据类型]
有一个特殊的NaN(not a number代表不是一个有效的数字但是属于number类型的)- 字符串 string
- 布尔 boolean
- null
- undefined
-
引用数据类型
- 对象object
- 普通对象
var o = {name:'xie',age:18}
- 数组对象
var ary = [1,2,34];
- 正则对象
var reg = /-?\d|([1-9]\d+))(\.\d+)?/g; 由元字符组成一个完整的正则 // 不是空正则是单行注释
- 日期对象
- ·······
- 函数function
function fn() { }
- 对象object
- ES6中新增加的一个特殊的类型:Symbol,唯一的值
[Symbol]
创建出来的是唯一的值
var a = Symbol('谢');
var b = Symbol('谢');
a==b =>false
2、浏览器
- Elements:在当前页面的元素和样式在这里都可以看到,还可以调节样式修改结构等
- Console:控制台,可以在JS代码中通过.log输出到这里,也可以在这里直接编写JS代码
- Sources:当前网站的源文件都在这里
3、扩展:JS代码如何被运行以及运行后如何输出结果
[如何被运行]
把代码运行在浏览器中(浏览器内核来渲染解析)
-
基于NODE来运行(NODE也是一个基于V8引擎渲染和解析JS的工具)
[如何输出结果] -
alert:在浏览器中通过弹框的方式输出(浏览器提示框)
ps:输出的结果是toString后的结果
//基于alert输出的结果都会转换为字符串:(如果是表达式先计算出结果然后在用toString方法转换为字符串
var num = 21;
alert(num); =>window.alert
alert({name:'xxx'});=>['object Object']
//为什么toString后的结果是object??
- confirm:确认提示框
var num = 2;
var fiag = confirm(num);
alert(fiag);//如果点击的是确定就是true点击的是取消则是false
- prompt:在confirm的基础上增加输入框(不常用)
- console.log:原来的意思是在浏览器工作台输出日志
- console.dir:比log输出的更加详细一些(尤其是输出对象的数据值的时候)
- console.table:把一个JSON数据按照表格的方式输出