什么是 JavaScript?
Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。
三个组成部分：
HTML：负责网页的基本结构（页面元素和内容）。
CSS：负责网页的表现效果（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。 JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。 JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。 ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。
ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。
一、JS引入方式
内部脚本：将JS代码定义在html页面的<script></script>中
建议：将<script></script>放在<body>的底部
外部脚本：将JS代码定义在js文件中，通过<script></script>标签引入
注意：通过<script>标签引入外部js文件时，标签不可以自闭合
二、JS基础语法
1.书写语法
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：
单行注释：// 注释内容
多行注释：/* 注释内容 */
大括号表示代码块
输出语句：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 console.log() 写入浏览器控制台
2.变量
特点：JS是弱类型语言，变量可以存放不同类型的值
声明：
var：声明变量，全局作用域/函数作用域，允许重复声明
let：声明变量，块级作用域，不允许重复声明
const：声明常量，一旦声明，常量的值不能改变
3.数据类型、运算符、流程控制语句
数据类型
JavaScript中分为：原始类型 和 引用类型。
原始类型：
number：数字（整数、小数、NaN(Not a Number)）
string：字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
使用 typeof 运算符可以获取数据类型
运算符
算术运算符：+ , - , * , / , % , ++ , --
赋值运算符：= , += , -= , *= , /= , %=
比较运算符：> , < , >= , <= , != , == , ===
逻辑运算符：&& , || , !
三元运算符：条件表达式 ? true_value: false_value
== 与 ===的区别：== 会进行类型转换，=== 不会进行类型转换
类型转换
字符串类型转为数字： 将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。
其他类型转为boolean：
Number：0 和 NaN为false，其他均转为true。
String：空字符串为false，其他均转为true。
Null 和 undefined ：均转为false。
三、js函数
介绍：函数（方法）是被设计为执行特定任务的代码块。
定义：JavaScript 函数通过 function 关键字进行定义，语法为：function functionName(参数1,参数2..){ //要执行的代码 }
注意： 形式参数不需要类型。因为JavaScript是弱类型语言。返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称(实际参数列表)
定义方式二：var functionName = function (参数1,参数2..){ //要执行的代码 }
JS中，函数调用可以传递任意个数的参数。
四、js对象
Array
JavaScript 中 Array对象用于定义数组。
定义：
var 变量名 = new Array(元素列表); //方式一
var 变量名 = [ 元素列表 ]; //方式二
访问：arr[ 索引 ] = 值;
JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
箭头函数(ES6)：是用来简化函数定义语法的。具体形式为: (…) => { … } ，如果需要给箭头函数起名字： var xxx = (…) => { … }
String
String字符串对象创建方式有两种：
var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二
JSON
JavaScript自定义对象
定义格式：
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};
调用格式：
对象名.属性名;
对象名.函数名();
JSON-介绍
概念：JavaScript Object Notation，JavaScript对象标记法。
JSON 是通过 JavaScript 对象标记法书写的文本。
定义：var 变量名 = '{"key1": value1, "key2": value2}';
value 的数据类型为：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中） null
JSON字符串转为JS对象：var jsObject = JSON.parse(userStr);
JS对象转为JSON字符串：var jsonStr = JSON.stringify(jsObject);
BOM
概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象。
组成：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
Window
介绍：浏览器窗口对象。
获取：直接使用window，其中 window. 可以省略。
属性
history：对 History 对象的只读引用。请参阅 History 对象。
location：用于窗口或框架的 Location 对象。请参阅 Location 对象。
navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。
方法
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()：在指定的毫秒数后调用函数或计算表达式。
Location
介绍：地址栏对象。
获取：使用 window.location 获取，其中 window. 可以省略。
属性： href：设置或返回完整的URL。
DOM
概念：Document Object Model ，文档对象模型。 将标记语言的各个组成部分封装为对应的对象：
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
Core DOM - 所有文档类型的标准模型
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
Image：<img>
Button ：<input type='button'>
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
1.根据id属性值获取，返回单个Element对象：var h1 = document.getElementById('h1');
2.根据标签名称获取，返回Element对象数组：var divs = document.getElementsByTagName('div');
3.根据name属性值获取，返回Element对象数组：var hobbys = document.getElementsByName('hobby');
4.根据class属性值获取，返回Element对象数组：var clss = document.getElementsByClassName('cls');
五、JS事件监听
事件：HTML事件是发生在HTML元素上的 “事情”。比如： 按钮被点击 鼠标移动到元素上 按下键盘按键
事件监听：JavaScript可以在事件被侦测到时 执行代码。
事件绑定
方式一：通过 HTML标签中的事件属性进行绑定
方式二：通过 DOM 元素属性绑定
常见事件
完
标签：对象,JavaScript,JS,HTML,var,属性 From： https://blog.csdn.net/weixin_72952570/article/details/142821273