一.JavaScript语言介绍
(1) JavaScript是一种专为与网页交互而设计的脚本语言, 具有较强的逻辑性.
(2)诞生: JavaScript 诞生于 1995 年.
(3)版本:
JavaScript这种语言的基本语法结构是由ECMAScript来标准化的, 所以我们说的JavaScript版本一般指的是ECMAScript版本.
1997年7月，ECMAScript 1.0发布。
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布。(数组的一些方法)
2007年10月，ECMAScript 4.0版草案想要提交ECMA组织, 但由于4.0版的目标过于激进, 改动太大, 并且微软,谷歌等大公司极力反对；一直到2008年7月ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本）
2009年12月，ECMAScript 5.0版正式发布
2011年6月，ECMAscript 5.1版发布
2015年6月，ECMAScript 6 正式发布，并且更名为“ECMAScript 2015”。
(4)特点：
a. 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
b. 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
c. 简单。JavaScript语言中采用的是弱类型的变量类型, 对使用的数据类型未做出严格的要求.
d. 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作,JavaScript都可直接对这些事件给出相应的响应。
e. 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
(5)组成:
JavaScript由三部分组成:
1. 核心(ECMAScript)
2. 浏览器对象模型(BOM)
3. 文档对象模型(DOM)
a.ECMAScript：是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的基础，他的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等.
b.BOM： Browse Object Model, 浏览器对象模型，提供与浏览器交互的方法和接口(API), 开发人员使用BOM可以控制浏览器显示页面以外的部分.
c.DOM： Document Object Model,文档对象模型，提供访问和操作网页HTML内容的方法和接口
二.初体验
(1).在控制台输出内容, 控制台的目标(前端调试,用完删除)
console.log("hi..你好!");
(2). 页面上输出
document.write("<div style='color:Red'>你好</div>");
(3).提示框
alert("你好呀!");
页面的简单渲染过程
打开页面, 页面的标签和css进行解析,在解析 html标签的过程中,如果遇到了js,将暂停html的渲染,执行js ,由于js的阻塞 ,js没有执行完,后面的html,css 都不执行.
核心原因:js是单线程
正是因为 js的阻塞,就推出了async 和defer这2个属性 (都解决阻塞)
三.JS变量
(1).<script>便签的属性
src:引入文件,如果script上面有 src,将不会执行 script里的代码,而是执行外部引用的代码
type:默认是 text/javascript,可以不写
async 等页面加载完成后,js立即执行
defer 等页面加载完成后,js有顺序执行
(2).注释
单行注释 // 快捷键 ctr + /
多行注释 /**xxx **/ ctr + shift + /
(3).变量 variable 可变的量
变量声明的细节 (重点)
a. 声明变量,必须使用 var关键字
b. 声明变量,未赋值的默认初始值 undefined
c. 建议声明变量,并赋予初始值
d. 声明变量后的值,可以随时随意被修改(因为js属于弱类型语言)
var myname = "刘德华"; // 声明变量,必须使用 var关键字
console.log(myname);//在控制台显示
var age; //没有赋值,它的默认值是 undefined (重点)
console.log(age);
age = 20;// 把20赋值给age , 把右边的值,赋值给左边
age = '贰拾'; //把数值改成了字符串(一组双引号或单引号组成)
console.log(age);
//推荐写法,声明变量并赋予初始值 (重点)
var sex = "男";
变量命名规则 (重点)
a.只能是数字,字母,下划线_,$
b.不能以数字开头
c.不能是保留字,关键字
d.严格区分大小写
.遵循驼峰命名法
1).小驼峰
变量,实例对象
2).大驼峰
类,构造函数
f.语义化(见名思意)
//var 关键字
// SyntaxError 语法错误
// var myname="abc";
var var1 = "abc123";
console.log(var1);
// 什么是程序?
// 一组有序的指令(代码),就是程序
// var myname = "刘德华";
// var myName = "小驼峰";
// var MyName = "大驼峰"
四.js的数据类型
js在ECMA5之前,只有6大数据类型
a. 数值类型 (Number)
b. 字符串类型 (String) 一组双引号或单引号组成
c. 布尔类型 (Boolean) 它的值只有2个 true/false (真/假)
d. null 空地址
e. undefined 未定义类型
d. object 类型
把六大数据类型分成2类
a. 值类型 (Number,String,Boolean,undefined,null)
b. 引用类型 (Object Array ,Function,Date,...)
//如果检测基本数据类型,使用 typeof (重点)
//1. Number 数字类型
var money = 100;
console.log(money);
//写法1
var res1 = typeof money;
console.log(res1);
//写法2
var res2 = typeof (money);
console.log(res2);
//2. 字符串类型 由一组双引号或单引号组成的,就是字符串
var str = "我是周杰伦,我今年18岁";
console.log(typeof str) //string
//3. Boolean 布尔类型 (真/假) (true/false)
var flag = true;//真
console.log(flag);
console.log(typeof (flag)); // boolean
//4. undefined 未定义,申明变量未赋予初始值,默认是undefined
//5.null, 空地址
console.log(null == null); //true
//6.object 对象类型
//
var obj = { name: "刘德华" } //创建了一个崭新空盒子
console.log(obj);
var obj = new Object()
obj.age = 100;
console.log(obj);
console.log(typeof(obj)); //object
var num = 100;
console.log(typeof typeof (num)); // "Number"
console.log(typeof "Number"); //String
五.js的类型转化
//js有2个特性的类型 , null和undefined
// 1. undefined
// 在声明变量的是,未赋予初始值,就是undefined
// 2.Null
// 它也是一个特殊的类,指向是空地址
//注意:null和undefined是什么关系?
// 派生关系 null派生了undefined
//3.Boolean类型 它的值只有2种, true和fasle
//4. Number类型 数值类型,它有一个特殊的值 NaN
//NaN not a number 是否不是一个数值
var n = "你好";
console.log(n * 100); //NaN ,按理报错,为了程序能正常的执行,就推出了一个特殊的值 NaN
console.log(0 / 0);
//检测是否为一个NaN
//isNaN() 是数值为false,不是数值则为true
console.log(isNaN("你好")); //true
console.log(isNaN(100)); //false
console.log(isNaN(NaN)); //true
console.log(typeof (NaN));//number
console.log(NaN == NaN); //fasle
//用isNaN 来判断是否为一个数值,只要是fasle,就认为是数值
//Infinity 无穷大
var b = 12 / 0; //Infinity
console.log(b);
//number的最大值 (了解)
console.log(Number.MAX_VALUE); // 1后面308个0
//number的最小值 (了解)
console.log(Number.MIN_VALUE);
// Boolean类型 (重点)
//1. 字符串转bool的规则
// 非空字符串为true,空字符串为false
var str = "儿童日预计";
var res = Boolean(str);
console.log(res);//true
var str = " ";//空格也为内容
var res = Boolean(str);
console.log(res);//true
var str = "";
var res = Boolean(str);
console.log(res);//false
//2. 数值转bool类型
// 非0为true,0为false,NaN为false
var n = 100;
console.log(Boolean(n)); //true
var n = 0;
console.log(Boolean(n)); //false
var n = -50;
console.log(Boolean(n));//true
var n = NaN;
console.log(Boolean(n));//false
// 非空字符串为true,空字符串为false
var str = '0'
console.log(Boolean(str));//true
var str = '0' - 0; // "0"-->0 // 0-0
console.log(Boolean(str));//false
// null和undefined 转换成bool,始终是false
console.log(Boolean(null)); //false shift+Alt+ 下
console.log(Boolean(undefined)); //false shift+Alt+ 下
//对象转boolean ,只要是对象,就是true,null为false
var obj = {}
console.log(typeof (obj)); //object
console.log(Boolean(obj));//true
var obj = null
console.log(typeof (obj)); //object
console.log(Boolean(obj));//false
//转数值
// Int 整型
// Float 浮点类型 0.1
// string-->数值
var str = "你好";
console.log(Number(str)); // NaN
console.log(parseInt(str));// NaN
console.log(parseFloat(str));// NaN
//Number转空字符串 为0
var str = "";
console.log(Number(str));// 0
console.log(parseInt(str));// NaN
console.log(parseFloat(str));//NaN
var str = "12.9";
console.log(Number(str));// 12.3
console.log(parseInt(str));// 12
console.log(parseFloat(str));//12.3
// bool -->数值
// true 为1,fasle 为0
var flag = true;
console.log(Number(flag));// 1
console.log(parseInt(flag));//NaN
console.log(parseFloat(flag));//NaN
// null,undefined -->数值
// obj -->数值
var n = null;
console.log(Number(n));// 0
console.log(parseInt(n));//NaN
console.log(parseFloat(n));//NaN
var n = undefined;
console.log(Number(n));// NaN
console.log(parseInt(n));//NaN
console.log(parseFloat(n));//NaN
// parseInt 和 parseFloat, 在字符串里能转换
// 必须数值开头
var str = "100.88px";
console.log(parseInt(str));
console.log(parseFloat(str));
//其他的场景,建议使用Number()来转换
// 使用Number()方法,空字符串和null都是0
//Math
// Math.round() 四舍五入
console.log(Math.round(4.5));
console.log(Math.round(78.466)); //
// console.log(Math.round(4.1));
// var num = 100;
