JavaScript 介绍

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言, 是用来控制网页行为的, 实现人机交互效果.
JavaScript 和 Java 是完全不同的语言, 不论是概念还是设计。但是基础语法类似.
(哪个编程语言基础语法不类似呢?

JavaScipt 又分为:

ECMAScript(JavaScript 语言基础) 和 Web APIs
Web APIs 其中又包括 DOM(页面文档对象模型) 和 BOM(浏览器对象模型)

ECMAScript 和 JavaScript 的关系是, 前者是后者的规格, 后者是前者的一种实现.
在日常场合, 这两个词是可以互换的.

ECMAScript入门

书写位置

内部书写

直接写在 html 文件里.

在 HTML 文档中，可以在任意地方，放置任意数量的<script> </script>,
一般会把脚本置于<body>元素的底部，可改善显示速度.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 引入方式</title>
</head>
<body>

  <script>
    alert('Hello JS')
  </script>
</body>
</html>

外部书写

代码写在以 .js 结尾的文件里.
通过在 HTML 文件的标签, 引入到 html 页面中.

<script src="你的/文件路径/你的JS文件名字.js"></script>

这个<script>标签通常放在 HTML 页面的<head>部分或<body>部分的底部.

注意在 你的JS文件名字.js 中, 无需 <script>

同之前的例子, 在 你的JS文件名字.js 只用这样编写:

alert('Hello JS')

即可达到同样的效果.

关于在 JavaScript 的结束符, 对于浏览器可以自动推断语句结束位置, 写不写无所谓.
不过要注意的是在同一项目中, 要么全写, 要么全不写.

JavaScript 基础语法

变量名, 函数名等都是区分大小写的.
每行结尾分号不是必须的, 但是推荐加上.

输入输出语法

输出语法

有以下三种:

api	描述
`window.alert`	警告框
`document.write`	在 HTML 输出内容
`console.log`	写如浏览器的控制台

window.alert

alert(`要输出的内容`)

在页面弹出警告对话框, 完整的语法为 window.alert(要输出的内容)

document.write

document.write('要输出的内容')

能向 body 内输出内容.
如果输出的内容写的是标签, 也会被解析成网页元素.

document.write('<h1>标题示例</h1>')

可以直接输出标签.

console.log

console.log(`在控制台输出的内容`)

控制台输出语法, 程序员调试使用.

输入语法

prompt(`要求输入内容的提示`)

能显示一个对话框, 对话框中包含提示信息.

访问/更改 HTML 元素

// 访问
document.getElementById(id)

// 更改
document.getElementById(id).innerHTML = 要更改成的元素

JavaScript 值

变量

JS 是一门弱类型语言, 变量是可以存放不同类型的值的. (类似于 Python)
JS 中主要通过 let 关键字来声明变量的.

要想使用变量, 首先需要创建变量(也称为声明变量或者定义变量).

let 变量名 = 要赋的值

在早期, 声明变量还可以使用 var 关键字来声明.
不过, var声明的变量，有一些其他不严谨的地方, 例如能够重复声明变量等.

因此, 声明变量主要还是使用 let.

常量

使用 const 声明的变量称为 “常量” .
当某一个变量 永远不会被改变 的时候, 就可以使用 const 来声明.

const 常量名 = 常量的值

常量不允许重新赋值, 声明时必须初始化.

数据类型

JS 中的数据类型分为: 原始数据类型 和 引用数据类型.
可以使用 typeof() 关键字来判断变量的数据类型.

原始数据类型

number 数字型

JS 属于弱数据类型, 数字类型(Number)可以是整数, 小数, 正数, 负数.

NaN(Not a number, 非数) 表示一个计算错误. 对 NaN 的任何操作都会返回 NaN.

boolean 布尔型

只有两个值: true 和 false

String 字符串型

被 双引号, 单引号 包裹的都是字符串.

+ 运算符, 可实现字符串拼接.

字符串也可以使用 反引号 包裹, 一般用于模板字符串:

document.write(`大家好, 我是${name}, 今年${age}`)

这就是格式化字符串输出, 变量用 ${} 包裹.

数组

JavaScript 数组用方括号书写.
数组属于对象.

var cars = ["Porsche", "Volvo", "BMW"];

引用数据类型

object 对象

对象用花括号来书写

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

undefined 未定义型

只声明变量而 不赋值, 使用未定义型.

null 空类型

Javascript 中的 null 仅仅是一个代表 “无”, 或 “值未知” 的特殊值.
Undefined 与 null 的值相等，但类型不相等.

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

空值

空值与 undefined 不是一回事.

空的字符串变量既有值也有类型.

var car = "";                // 值是 ""，类型是 "string"

JavaScript 函数

函数（function）是被设计用来执行特定任务的代码块, 方便程序的封装复用.
其基本格式如下:

方式一

function 函数名(参数1,参数2..){
    要执行的代码
}

下面是计算两个数的乘积, 并返回结果函数的实例:

let x = add(7, 8);        // 3. 调用函数，返回值被赋值给 x

// 1. 定义一个 add 函数
function add(a, b) {
    return a + b;                // 2. 定义其功能, 计算并返回 a 和 b 的和
}

因为 JavaScript 是弱数据类型的语言, 所以注意以下几点:

形参不需要声明类型
返回值也不需要声明类型

JavaScript 解释器会在函数调用和返回时根据传入的实参自动确定它们的类型.

特别注意, 在 JavaScript 中, 函数的调用只需要名称正确即可，参数列表不管的.
例如刚刚的 add() :

let result = add(10,20,30,40);
alert(result); // 30 (10+20)

依然能得到结果, 10 传递给了变量 a, 20 传递给了变量 b, 而 30 和 40 没有变量接受, 但是不影响函数的正常调用.
不过呢, 当然在实际开发中, 还是建议一致.

方式二

还有一种不为函数指定名字的定义方式, 称之为 匿名函数.
由于它们没有名称, 因此无法直接通过函数名来调用, 而是通过变量或表达式来调用.

匿名函数有两种定义的方式:

函数表达式

var add = function (a,b){
    return a + b;
}

箭头函数 (常用)

var add = (a,b) => {
    return a + b;
}

匿名函数声明好了之后, 是将这个函数赋值给了 add 变量.
那我们就可以直接通过 add 函数直接调用, 调用代码如下：

let result = add(10,20);
alert(result);

自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){}
};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.方法名()

代码演示：

<script>
    //自定义对象
    let user = {
        name: "wreckloud",
        age: 10,
        gender: "男",
        show1: function(){
             console.log("是我!");
         }
         // 可简写为:
        show2(){
             console.log("还是我!");
         }
    }

    console.log(user.name);
    user.show1();
    user.show2();
<script>

JSON

JSON 对象：JavaScript Object Notation，JavaScript 对象标记法。
JSON 是通过 JavaScript 标记法书写的文本。其格式如下：

{
    "key":value,
    "key":value,
    "key":value
}

其中，key 必须使用引号并且是双引号标记，value 可以是任意数据类型。

代码演示:

//3. JSON - JS对象标记法
let person = {
  name: 'itcast',
  age: 18,
  gender: '男'
}
alert(JSON.stringify(person)); //js对象 --> json字符串

let personJson = '{"name": "heima", "age": 18}';
alert(JSON.parse(personJson).name);

Web API 基础

DOM (Doucument Object Model) 文档对象模型 是浏览器提供的一套专门用来操作网页内容, 实现用户交互的功能.

DOM 文档树 能直观的体现了标签与标签之间的关系.

DOM 对象 浏览器根据 html 标签生成的 JS 对象称之为 DOM 对象.是对象就有其属性和方法, 修改这个对象的属性会自动映射到标签身上.

获取 DOM 对象

// 选择匹配的第一个元素
document.querySelector("css选择器")

// 只能匹配第一个元素, 可以直接操作

参数: 包含一个或多个有效的 CSS 选择器 字符串

返回值: CSS 选择器匹配的 第一个元素 , 一个 HTMLElement 对象. 如果没匹配到返回 null.

// 选择匹配的全部元素
document.querySelectAll("css选择器")

// 多个时返回 NodeList 对象集合(伪数组)
const lis = document.querySelectorAll(".nav li")

// 想要得到里面每一个对象, 则需要遍历的方式获得
for (let i = 0; i < lis.length; i++){
  console.log(lis[i])
}

其他获取 DOM 元素方法(了解)

// 根据id获取
document.getElementById("nav")
// 根据标签获取
document.getElementByTagname("div")
// 根据 类名 获取元素
document.getElementByClassName("w")

JavaScript 事件监听

当事件触发时, 可以自动的完成对应的功能, 这就是事件监听.

事件监听语法

事件源.addEventListener('事件类型', 要执行的函数);

事件源: 哪个 dom 元素触发了事件, 要获取 dom 元素
事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover
要执行的函数: 要做什么事

接下来是一个简单示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="点我一下试试1">
    <input type="button" id="btn2" value="点我一下试试2">

    <script>
        document.querySelector("#btn1").addEventListener('click', ()=>{
            alert("按钮1被点击了...");
        })
    </script>
</body>
</html>

常用事件

鼠标事件

click：用户点击元素。
mouseover：鼠标指针移动到元素上。
mouseout：鼠标指针移出元素。

// 获取元素
const button = document.getElementById('myButton');

// 点击事件
button.addEventListener('click', function() {
  console.log('按钮被点击了！');
});

// 鼠标移动到元素上
button.addEventListener('mouseover', function() {
  console.log('鼠标移动到按钮上！');
});

// 鼠标移出元素
button.addEventListener('mouseout', function() {
  console.log('鼠标移出按钮！');
});

键盘事件

keydown：用户按下键盘上的键。
keyup：用户释放键盘上的键。

// 监听键盘事件
document.addEventListener('keydown', function(event) {
  console.log('按键被按下：', event.key);
});

document.addEventListener('keyup', function(event) {
  console.log('按键被释放：', event.key);
});

表单事件

change：元素的值发生变化。
submit：表单被提交。

// 获取输入框和表单元素
const input = document.getElementById('myInput');
const form = document.getElementById('myForm');

// 值改变事件
input.addEventListener('change', function() {
  console.log('输入框的值已改变！');
});

// 表单提交事件
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交
  console.log('表单被提交！');
});

窗口事件

load：页面或元素加载完成。
resize：窗口大小改变。

// 页面加载完成事件
window.addEventListener('load', function() {
  console.log('页面已加载完成！');
});

// 窗口大小改变事件
window.addEventListener('resize', function() {
  console.log('窗口大小已改变！');
});](<焦点事件
blur：元素失去焦点。
focus：元素获得焦点。
javascript
// 获取输入框元素
const input = document.getElementById('myInput');

// 失去焦点事件
input.addEventListener('blur', function() {
  console.log('输入框失去焦点！');
});

// 获得焦点事件
input.addEventListener('focus', function() {
  console.log('输入框获得焦点！');
});>)

滚动事件

scroll：文档或元素滚动。

// 页面滚动事件
window.addEventListener('scroll', function() {
  console.log('页面正在滚动！');
});

渊痕爪记

网页之大脑-Javascript