初识JavaScript
1.什么是JavaScript
它是一门解释型脚本语言,是弱类型语言,和强类型语言(如Java)不同,它不需要预编译,对使用的数据类型未做出严格的要求。
1.1JavaScript由三个内容构成
-
ECMAScript,是JavaScript的语法规范,其中包含了不同版本的规范,其中最常用的三个版本为:
ES3:标准化了switch语句、异常处理和正则表达式。兼容各大主流浏览器
ES5:新增了严格模式,兼容普通版本浏览器。
ES6:即“ECMAScript 2015” 我们把这之后的版本 都称为ES6,它对浏览器的兼容要求较高,不同浏览器的不同版本对ES6的支持度不同,可以使用babel进行转码,转为之前的版本,进行使用。 -
BOM 浏览器对象模型:操作浏览器自带的属性和方法,控制前进 后退 刷新…
-
DOM 文档对象模型:HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构,还定义了结点对象的行为,利用对象的方法和属性,可以方便地访问、修改、添加和删除DOM树的结点和内容
1.2 主要功能JavaScript
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。控制cookies,包括创建和修改等。
6.基于Node.js技术进行服务器端编程。
2.JavaScript的书写位置
1.内嵌写法:并不经常使用
<div onclick="alert(123)">点我弹窗</div>
2.内联写法 script标签可以写在任意位置 建议写在最后 代码执行的流程 从上到下 文档流
<script>
console.log("你好");
</script>
3.外联写法 通过script标签的src引入 抽取公共代码
<script src="./js/demo1.js"></script>
4.JavaScript中的注释:
单行注释 // 快捷键 ctrl+/
多行注释 快捷键:shift+alt+a
/**
*
*/
3.变量
3.1采用var关键词来修饰的伪全局变量 它的作用是在内存中开辟一个空,并给空间命名
var 变量名 = 值
3.2 变量名的命名规范需要注意
变量名注意事项:
-
语义化命名 见名知意
-
不能使用关键词和保留字
-
驼峰命名法(第一个首字母小写以后的首字母大写)
-
不能以数字开头(构成可以有数字字母下划线以及$符号)
4.js的数据类型
4.1 js的基本数据类型
- js 六大数据类型
1. number
2. string
3. boolean
4. undefined
5. null
6. object (Array,function…)
// 数值型 number含整型,浮点类
var num = 10;
console.log(typeof num); //Number
// 二 string 字符串类型 由双引号和单引号
var str="你好";
console.log(typeof str); //String
// 三 boolean
// 它的值2个 真和假 true false;
var flag = true;
console.log(typeof flag);
// 四 null 空地址
var obj = null; // 触发 js引擎 自动回收垃圾机制
// undefined js特有,声明变量未赋值,为了js能够正常运行,退出的特殊的值
var un = undefined;
console.log(typeof un);
console.log(obj == un);
console.log(typeof typeof un); //string
// 六. object 对象 引用类型
<script>
var number = 10;
// typeof 用于检测数据类型
console.log(typeof number); //Number
// 只要是被new都是引用数据类型
var obj = new Number(number);
console.log(typeof obj); //object
// string
var str = 'hello';
console.log(typeof new String(str));
// boolean
var bool = true;
console.log(typeof new Boolean(bool));
// obj对象转换为字符串 对象中有东西 属性/方法
console.log(typeof obj.toString()); // 转换为字符串
console.log(typeof String(obj)); // 转换为字符串
// obj对象转为对应的值
console.log(typeof Number(obj));
// obj对象转为对应的布尔类型
console.log(typeof Boolean(obj));
console.log(Boolean(obj));
</script>
// 值类型和引用类型的区别
// 1. 存储空间
// 2. 值类型储存在栈中
// 3,引用类型存储在堆中
4.2 如何检测数据类型
typeof 用于判断对应的数据类型(检索对应的数据类型)返回对应的数据类型的英文名(字符串)
var str = "字符串"
var number = 10
var is = true
var un
var isNull = null
console.log(typeof str);//string
console.log(typeof number);//number
console.log(typeof is);//boolean
console.log(typeof un);//undefined
//typeof的typeof是string
console.log(typeof typeof isNull);//null返回的是object null是一个空对象的引用
5. 类型转换
5.1 基础值类型转换引用数据类型 (装箱)
var number = 10
console.log(typeof number)
//只要是被new都是引用数据类型
var obj = new Number(number)
console.log(typeof obj);
//String
var str = 'hello'
console.log(typeof new String(str))
//Boolean
var bool = true
console.log(typeof new Boolean(bool))
5.2 引用数据类型转为基础值类型 (拆箱)
// obj对象转换为字符串 对象中有东西 属性/方法 toString 转为字符串
console.log(typeof obj.toString()); // 转换为字符串
console.log(typeof String(obj)); // 转换为字符串
// obj对象转为对应的值
console.log(typeof Number(obj));
// obj对象转为对应的布尔类型
console.log(typeof Boolean(obj));
console.log(Boolean(obj));
5.3 基础值类型之间的转换
转为字符串(String 及 toString方法)
// 数值转换字符串
var number = 10;
var str = String(number);
console.log(typeof str);
// Boolean转换为字符串
var bool = true;
var str1 = String(bool);
console.log(typeof str1);
// null转换为字符串
var nullObj = null;
var str2 = String(nullObj);
console.log(typeof str2);
// undefined 转换为字符串
var un = undefined;
var str3 = String(un);
console.log(typeof str3);
// 利用tostring转换
console.log(typeof number.toString());
console.log(typeof bool.toString());
// null undefined没有toString这方法
// console.log(typeof nullObj.toString());
// console.log(typeof un.toString());
转为数值类型 (Number 强制转换 及 parseInt 和 parseFloat)
-
字符串转为数值 无法转换为NaN
-
boolean类型转为数值 true为1 false为0
-
null转为数值 值为0
-
undefined转为数值 值为NaN
// 转换为数值
console.log(Number('12345'));
console.log(Number(null)); // null转换数值为0
console.log(Number(true)); // true为1 false为0
// NaN 是数值类型
console.log(typeof NaN); //number
console.log(typeof Number(undefined)); // NaN
//任意类型转为数值的时候 无法进行转换就会出现NaN
console.log(Number('abc'))//NaN
console.log(Number('1234abc'))//NaN
//parseInt 转整型 (切割前面的内容) parseFloat(保留小数) 转浮点型
console.log(parseInt('1234.657'));//1234
console.log(parseInt('a78789')); // NaN
console.log(parseFloat('4567.89'));//4567
console.log(parseFloat('b234.98')); // NaN
转为boolean类型 (Boolean在条件表达式下自动转为布尔类型)
- 数值转为boolean类型 非0及非NaN都是true
- 字符串转为boolean类型 非空字符就是true
- null和undefined转为boolean类型 都是false
// 数值转为Boolean类型 非0以及非NaN都是true
console.log(Boolean(123));
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
// 字符串转为Boolean类型 非空字符串就是true
console.log(Boolean('')); //false
console.log(Boolean(' ')); //true
console.log(Boolean('123')); //true
// null undefined 转为Boolean类型
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
Number
- NaN 无法被转换为数值的时候出现的
- infinity 无穷大
// 常量值
console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MAX_VALUE);
console.log(Number.MIN_SAFE_INTEGER);
console.log(Number.MIN_VALUE);
console.log(Number.NaN);
// 无法被转换为数值的时候出现NaN
console.log(NaN == NaN); //false
// 无穷大
console.log(Number.NEGATIVE_INFINITY, -Infinity); // 负无穷大
console.log(Number.POSITIVE_INFINITY, Infinity); // 正无穷大
console.log(-Infinity == Number.NEGATIVE_INFINITY); //true