JavaScript笔记
1.认识JavaScript
简介： JavaScript是一种直译式脚本语言，是一种动态类型，基于原型的语言。
c++、java均是基于类的语言。两者的区别：
基于类的(java) | 基于原型的(javaScript) |
类和实例是不同的事物。 | 所有对象均为实例。 |
通过类定义来定义类； 通过构造器方法来实例化类。 | 通过构造器函数来定义和创建一组对象。 |
通过new操作符来创建单个对象。 | 相同。 |
通过类定义来定义现存类的子类，从而构建对象的层级结构。 | 指定一个对象作为原型并且与构造函数一起构建对象的层级结构。 |
遵循类链继承属性。 | 遵循原型链继承属性。 |
类定义指定类的所有实例的所有属性。无法在运行时动态添加属性。 | 构造器函数或原型指定初始的属性集。允许动态地向单个的对象或者整个对象集中添加或移除属性。 |
- JavaScript的解释器又称为JavaScript引擎，属于浏览器的一部分。
- JavaScript是网景公司（Netscape）的产品。
一个完整的JavaScript应该有三部分组成：
1.核心（ECMAScript）
2.文档对象模型（DOM）
3.浏览器对象模型（BOM）
- 核心部分规定了JavaScript这门语言的语法、变量语句等。
语法 | 变量和数据类型 | 关键字和保留字 | 操作符 | 控制语句 | 对象 |
- 文档对象模型定义了所有HTML元素的对象和属性，以及访问它们的方法（接口）。
- 浏览器对象模型提供的是浏览器窗口之间进行交互的对象，核心对象是window。
注： ECMAScript简称ES。目前最新的版本是ES2019，又称ES10。而市面上最常用的是ES2015和ES2016，也就是ES6和ES7。
2.JavaScript引入方法
Javascript的引入方法与CSS引入方法类似，也可以单独写到.js文件中或者写在html中（一般写在<head>标签里），只是写在html页面中时，CSS的标签需要用<style>标签，而Javascript需要用<script>
二者引入方式的区别：
CSS 引入方式 | JavaScript 引入方式 |
内部引入、外部引入 | 内部引入、外部引入 |
内部引入、用<style>标签 | 内部引入、用<script>标签 |
外部引入.css文件 <link rel="stylesheet" type="text/css" href="mystyle.css"> | 外部引入.js文件 <script src="myScript.js"> |
3.JavaScript输出
3.1 弹出警告框
弹出警告窗是window对象的alert方法，每当页面加载完成时，alert语句便会执行一次。
<script>
window.alert("5 + 6 的结果是：");
window.alert(5 + 6);
</script>3.2 操作HTML元素
使用 document.getElementById(id) 方法可以让 JavaScript 访问某个 HTML 元素以进行操作。
此方法一般结合具体的操作进行。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>在上述代码中，
标签里的内容已经被更改为 “段落已修改。” 其中：
document.getElementById(“demo”).innerHTML：表示获取对应标签的内容，可以看做是一个变量。
这个变量可以直接用“=”赋新的值，也可以放到alert( )里用来显示。
3.3 写入到HTML文档
写入到HTML文档的操作一般用作测试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>- 写入的方法主要是document.write()方法；
- 若是在网页加载完成后执行此方法（例如此方法绑定了一个点击事件），则此方法写入的内容将覆盖掉整个页面。
3.4 写入到控制台
一般的浏览器按F12或者右键->检查 可以进入调试模式，可以看到Console控制台的一些信息。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>4.JavaScript语法
4.1 字面量
首先科普下字面量 常量 变量的区别： 字面量是指由字母，数字等构成的字符串或者数值，它只能作为右值出现。
(右值是指等号右边的值，如：int a=123这里的a为左值，123为右值。)常量和变量都属于变量，只不过常量是赋过值后不能再改变的变量，而普通的变量可以再进行赋值操作。
1.数字
可以是整数：1001
可以是小数：3.14
可以是科学计数：123e5 （=123 x 10=12300000 ）
2.字符串
可以是双引号：“涛涛”
可以是单引号：‘想想’
3.表达式
可以是加法：5 + 6
可以是乘法：5 * 10
4.数组
可以是数组：[40, 100, 1, 5, 25, 10]
5.对象
可以是对象：{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
也可以写成：{
firstName:“John”,
lastName:“Doe”,
age:50,
eyeColor:“blue”
}
6.函数
可以是函数：function myFunction(a, b) { return a * b;}
也可以写成：function myFunction(a, b) {
return a * b;
}
4.2 变量
变量是一个名称。字面量是一个值。
变量用 var来定义。
var x, length
x = 5
length = 6注：
- 一个没有初值的变量，值为undefined。
- const 关键字表示变量的值不可变。
- 可以对同一个变量多次赋值，以最后一次的赋值为准。
- JavaScript中可以不用分号结尾，但为了可读性，一般在每条语句后加上“;”。
4.3 操作符
JavaScript的操作符与其他高级语言相比并无不同。包括赋值运算符和条件运算符。
4.4 关键字
JavaScript中有系统保留关键字，这些关键字不允许用户作为自定义的变量名称。
abstract | else | instanceof | super |
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
4.5 注释
JavaScript注释的方式与java一模一样。
单行注释：//
多行注释：/* */
4.6 数据类型
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值4.7 JavaScript大小写
- JavaScript对大小写敏感，敏感，敏感！！！
- 请注意大小写！
- 一般都是小写
- 驼峰命名法：一个名字若只有一个单词组成，首字母小写。若有多个字母组成，第一个单词首字母小写，后面的每一个单词首字母大写。
注： 变量与函数重名的时候，变量生效
var a = 100;
function a() {
return "function";
}
console.log(a); //输出 100
console.log(a());
/*
报错
Uncaught TypeError: a is not a function
(anonymous function) @test.html:9
*/由于变量a的优先级高，故即使有函数a()，console.log(a());依然会被编译为变量a，故出错。
5.JavaScript对象
类似于Java，JavaScript也是有对象的，几乎所有的事物都可以看作对象。
一个对象可以是一个变量，也可以是多个变量。
var car = "Fiat";var car = {type:"Fiat", model:500, color:"white"};var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};5.1 对象属性
可以说 “JavaScript 对象是变量的容器”。
但是，我们通常认为 “JavaScript 对象是键值对的容器”。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
5.2 访问对象属性
两种方式访问对象属性:
1.对象名.属性名
person.lastName;2.对象[“属性名”]
person["lastName"];5.3 对象方法
对象方法也是对象中的一个属性。
5.4 访问对象方法
两种方式访问对象方法:
1.对象名.方法名()
name = person.fullName();2.对象名.方法名
name = person.fullName;如果fullName是一个方法，在通过对象访问时没有加括号( )，则返回结果不是函数的返回结果，而是把方法体整个代码作为一个字符串返回。
注： 类似数组，对象在创建时也可以先创建空对象，再根据需要逐一加入属性。
var person=new Object();
person.name='小明';
person.sex='男';
person.method=function(){
return this.name+this.sex;
}6.JavaScript函数
函数也可以称之为方法，是所有程序设计语言里需要实现逻辑功能最重要的部分。
6.1 普通函数
<script>
function functionname( )
{
// 执行代码
}
</script>
注：
- 函数只有在调用时才会执行函数里的代码。而调用方式多种多样，可以设置为点击按钮执行，或者网页加载完自动执行等。
- 与HTML不同，JavaScript严格区分大小写。function必须小写。
6.2 带有参数的函数
<script>
function myFunction(var1,var2)
{
代码
}
</script>
这些参数可以直接在函数里使用。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>在调用有参数的函数时，必须传入实参。且实参的类型需要与形参的顺序一致。
6.3 带有返回值的函数
<script>
function myFunction()
{
var x=5;
return x;
}
</script>在使用 return 语句时，函数会停止执行，并返回指定的值。
注： 函数停止执行，不会影响其他js代码继续执行。
仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}若a>b，则什么也不做，直接退出函数。
若a<=b，计算a+b的值给x。
6.4 局部变量和全局变量
局部变量 | 全局变量 |
定义在函数内部 | 定义在函数外部 |
只有本函数才能访问 | 所有函数都可以访问 |
函数运行完删除 | 页面关闭后删除 |
