一.JavaScript的由来(了解)
1995年2月发布的,Netscape Navigator 2浏览器开发一种名为 LiveScript 的脚本语言。为了赶在发布日期前完成 LiveScript的开发,Netscape 与 Sun 公司建立了一个开发联盟,共同开发 LiveScript。在 NetScape Navigator 2 发布前夕,网景为了更好地推广这个脚本语言(利用 Java语言的知名度),临时把 LiveScript 改名为 JavaScript,实际上两者没有任何关系。
二.制定标准(了解)
1997年,网景公司给欧洲计算机制造商协会(ECMA, European Computer Manufacturers Association)提了一个建议,以 JavaScript 1.1 为蓝本,由该协会主导制定了一套 JavaScript 语言开发规范。于是 ECMAScript 诞生了,这是一个国际标准化的 JavaScript 开发标准,所有浏览器厂商在开发浏览器脚本语言时,都要准守这套规范。这样的话,编程人员在写代码时只要写一次,就可以在所有的浏览器上执行了。
三.Javascript的特点(重点)
-
Javascript是一个脚本语言,可跨平台,支持面向对象。
-
脚本(Script)简单地说就是一条条的文本命令,按照程序流程执行。 常见的脚本语言:JavaScript、VBScript、Perl、PHP、Python等。 非脚本语言:C、C++、Java、C#等。
-
脚本语言与非脚本语言的区别: 非脚本语言一般需要编译、链接,生成独立的可执行文件后才能运行。 脚本语言依赖于解释器,只在被调用时自动进行解释或编译。
-
几乎所有的浏览器,包括手机等各类移动设备。 特点:JavaScript语言不依赖操作系统,仅需要浏览器的支持。
四.JavaScript和HTML、CSS的区别
HTML:结构层,提供网页的结构,提供网页中的内容。
CSS: 表示层,用来美化网页。
JavaScript:行为层,可以用来控制网页内容,给网页增加动态的效果,用于跟用户的交互。
五.Javascript的组成(重点)
1. ECMAScript - JavaScript的核心
ECMA 欧洲计算机制造联合会
网景:JavaScript
微软:JScript
定义了JavaScript的语法规范
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
2.DOM(Document Object Model) - 文档对象模型
一套操作页面元素的API(API(Application Programming Interface,应用程序接口))
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作。
3.BOM(Browser Object Model) - 浏览器对象模型
一套操作浏览器功能的API(接口-类库-方法),通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等。
简单记忆:
包括三部分(1. ECMA 2.DOM文档对象模型 3.BOM浏览器对象模型)
六.使用JavaScript(重点)
1.行内代码
将 JS 代码写到元素的事件属性值中
代码详情如下:
<!-- 1.行内代码 -->
<div onclick="alert('你好世界')">hello world</div>
<a href="javascript:alert('hello')">百度一下你就知道</a>
2.内部代码(内嵌式)
如果页面需要中包含大量的 JavaScript 代码,则建议将这些JavaScript脚本放在 <script> 标签中。<script> 元素即可作为 <head> 的子元素,也可作为 <body> 的子元素,通常位于<body>元素闭合标签的前面。
代码详情如下:
<!-- 2.内部代码 -->
<script>
alert("内部代码");
</script>
3.外部代码(外链式)
为了让 HTML 页面和 JavaScript 脚本更好地分离,我们可以将 JavaScript脚本单独保存在一个 .js 文件中,HTML 页面导入该 .js 文件即可。
代码详情如下:
<!-- 3.外部代码 -->
<script src="./01-js的使用.js"></script>
alert("外部js文件");
注意:
-
由于现代网页开发提倡结构、样式、行为的分离,即分离HTML、CSS、JavaScript三部分的代码,避免直接写在HTML标签的属性中,从而更有利于维护。因此在实际开发中不推荐使用行内式。
-
存在的问题:引入JavaScript代码时,页面的下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。 解决的办法:对于不需要提前执行的代码,将<script>标签放在<body>标签的底部,可以减少对整个页面下载的影响。
七.Window对象
Window 对象表示浏览器中打开的窗口。
在页签浏览器(比如 Chrome)中,浏览器会为 HTML 文档创建一个 window 对象,每个页签具有自己的 window对象。也就是说,同一个窗口的页签之间不会共享一个 window 对象。window对象给我们提供了一些方法、属性和事件.
1.Window对象的方法(重点)
window 提供的几个关于对话框的方法:
<script>
//window对象的方法
//警告框
window.alert("警告框");
//确认框
window.confirm("是否确认!");
//输入框
window.prompt("输入内容");
</script>
实际运行效果:
2.window对象的属性
window对象是BOM的顶层(核心)对象,其他对象都是以属性的方式添加到window对象下,称为window的子对象。
-
window对象的console属性也是一个对象,它提供了几个可以在控制台输出信息的方法。
-
再例如:window对象的document属性是非常重要的对象,每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
<script> //window对象的属性 //日志打印 window.console.log("你好世界你好"); //打印一个对象的所有属性和方法 window.console.dir(window); //写入文档 window.document.write("<br>你好"); //windo对象是顶层对象,在访问window对象下的属性和方法时,可以省略window不写 console.log("省略不写"); </script>
实际运行效果:
-
八.JavaScript语法
1.标识符
所谓标识符,就是指变量、函数、属性,或者函数参数的名字。
标识符的组合规则:
-
定义规则
-
由大小写字母、数字、下划线和美元符号($)组成。
-
不能以数字开头。
-
严格区分大小写。
-
不能使用JavaScript中的关键字命名。
-
要尽量要做到“见其名知其意”。
-
命名书写规范:
推荐采用第一个单词的首字母小写,其余单词首字母大写的方式,例如:firstName、getUserInfo。
大小写敏感
JS 中的标识符是区分大小写的,也就是说变量 name 和 Name 是两个不同的标识符。
九.变量(重点)
1.定义变量
-
变量是一种使用方便的占位符,用于引用计算机内存地址,该地址可以存储Script运行时可更改的程序信息,存放数据的容器。
-
语法:JavaScript中变量通常利用var关键字声明,并且变量名的命名规则与标识符相同。
2.如何使用变量
<script>
// java中 数据类型 变量名 = 变量值 int a = 10; char b = 'b';
// javascript 声明变量通过 var 关键字
// 变量的初始化
var a = 10;
// 创建变量
var b;
// 给变量赋值
b = 20;
console.log(a);
console.log(b);
// 同时创建多个变量(不推荐)
var a, b, c, d;
// 省略var关键字,所得到的是全局变量
name = "张三";
console.log(name);
</script>
3.变量在内存中的存储
变量的本质是在内存中申请的一块用来存放数据的空间。
var age = 18;
var uname='张美丽';
4.变量声明提升
<script>
//console.log(a); // a is not defined
var b;
console.log(b); // undefined
var c = 10;
console.log(c); // 10
// 变量的声明提升,声明部分被提升到该作用域最上方
console.log(d); // undefined
var d;
console.log(x); // undefined
var x = 100;
// var x;
// console.log(x);
// x = 100;
</script>
十.数据类型
1.原始数据类型
Boolean 类型 布尔类型表示一个逻辑值,有两个值:true 和 false。
Number类型 数字类型用于表示数值,整数、浮点数(小数),还有一些带符号的值:+Infinity(正无穷大),-Infinity(负无穷大)和 NaN (非数值,Not a Number)。
String类型 字符串类型用于表示文本数据,使用单引号或双引号括起来,比如:'Hello World!'。
Undefined类型 Undefined 类型只有一个值,即 undefined。任何一个只声明而没有赋值的变量都会被隐式的(自动的)赋值为 undefined。
Null类型 Null 类型也只有一个值,即 null。
null是表示缺少的标识,指示变量未指向任何对象。把 null作为尚未创建的对象,也许更好理解。
2.复杂数据类型(引用类型)
在计算机科学中, 对象是指内存中的可以被 [标识符] 引用的一块区域。
在 Javascript里,引用类型的数据指的是各种对象,他们在内存中的存储方式与原始类型的数据不同。
以Object对象为例,Object对象是一组属性的集合。属性包含一个属性名和一个属性值
代码详情如下:
<script>
var a = 10; // number数值类型
console.log(a);
var _NaN = NaN; // not a number
console.log(_NaN);
var b = "10"; // string字符串
console.log(b);
var bool = true; // boolean布尔
console.log(bool);
var empty = null; // null空
console.log(empty);
var und = undefined; // undefined未定义
console.log(und);
var obj = {
name: "张三",
age: 20,
gender: "男"
} // object对象
console.log(obj);
// 转义字符
var str = "hello\nworld";
console.log(str);
</script>
3.检测数据类型
代码详情如下:
<script>
// 通过 typeof 检测数据类型
var num = 10;
console.log(typeof num); // number
var str = "张三";
console.log(typeof str); // string
var bool = true;
console.log(typeof bool); // boolean
var und = undefined;
console.log(typeof und); // undefined
var empty = null;
console.log(typeof empty); // object
var obj = {
name: "张三",
age: 18
}
console.log(typeof obj); // object
</script>
4.数据类型转换(变量)(重点重点)
强制转换:编程人员编写代码强制对数据进行转换。
隐式转换:不是编程人员刻意去转换的,而是浏览器(JS 解析引擎)帮我们自动转换的。
代码详情如下:
<script>
// 1.强制类型转换
// 1.1 Boolean()将其他数据类型转为布尔类型
var num = 0;
console.log(Boolean(num)); // false
var str = "";
console.log(Boolean(str)); // false
var und = undefined;
console.log(Boolean(und)); // false
var empty = null;
console.log(Boolean(empty)); // false
var _NaN = NaN;
console.log(Boolean(_NaN)); // false
console.log("=====================================");
// 1.2
// 1.2.1 Number()将其他类型转为数值类型
var num1 = "123.321";
console.log(Number(num1));
var str1 = "abc";
console.log(Number(str1)); // NaN
var str3 = "";
console.log(Number(str3)); // 0
var bool1 = true;
console.log(Number(bool1)); // 1
var bool2 = false;
console.log(Number(bool2)); // 0
console.log(Number(und)); // NaN
console.log(Number(empty)); // 0
// 1.2.2 parseInt()将其他类型转换为数值类型
// 1.2.3 parseFloat()将其他类型转换为数值类型
// 1.3 将其他类型转换为字符串类型
// String()
var num3 = 20;
console.log(String(num3));
// toString() 进行进制转换
console.log(num3.toString(2));
console.log(num3.toString(8));
console.log(num3.toString(16));
// 2.隐式类型转换
var strNum = "20";
var strNum2 = "10";
console.log(strNum + strNum2);
var num5 = 30;
console.log(strNum + num5);
// isNaN() 判断一个值是否为非数值类型
console.log(isNaN(10)); // false
console.log(isNaN("")); // false
console.log(isNaN(true)); // false
</script>
(可能文章中有简写的部分,请根据自身情况来合理阅读。)