引入方式

内部脚本

JavaScript可以写在html文件的任意地方，均可运行。

但是建议写在body底部，可以改善界面显示速度。

<body>
  <!-- 界面内容 -->

  <script>
    alert('Hello JS');
  <script>
<body>

优点：代码集中管理、减少外部依赖、快速调试。

外部脚本

将js定义在外部js文件中，然后引入到HTML中

demo.js
alert('Hello JavaScript');

demo.html
<script src='demo.js'></script>

优点：复用性高、便于统一管理修改、界面简洁。

*书写规范

Javascript每行以；结尾 ，可有可无，尽量统一

注释与html不同

<!-- html -->

//Javascript

基础语法

变量

Javascript中用let声明变量（弱语言类型，同一变量可以存放不同类型的值）

<script>
  //变量
  let a = 20;
  a = "Hello";
  alert(a);
</script>

变量名规则：

· 只能用 字母、 数字、下划线（_）、美元符号（$）组成，且数字不能开头

· 变量名严格区分大小写，如name和Name是不同的变量

· 不能使用关键字作为变量名，如：let、var、if、for等

常量

JS中用const声明常量。

一旦声明，常量的值就不能改变（不可以重新赋值）。

输出

alert("JavaScript") ：弹出警告框

console.log(”JavaScript“) ：写入浏览器控制台

document.write("Javascript"）：向HTML的body区域输出内容（不常用）

数据类型

JS中数据类型分为：基本数据类型和引用数据类型（对象）。

*使用typeof运算符可以获取数据类型

<script>
  let a = 20;
alert(typeof a);//获取数据类型
alert(typeof null);//object
alert(typeof undefined);//undefined
</script>

基本数据类型

number：数字（整数、小数、NaN（Not a Number））

boolean：布尔（true、false）

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是undefined

string：字符串，单引号、双引号、反引号均可

*字符串拼接：`反引号`

<script>
  let name = 'Tom'
  let age = 18;
  
  console.log('我是' + name + ‘，我今年’ + age + "岁");
  console.log(`我是${name},我今年${age}岁数`);//在` `中用${ }框出变量即可
</script>

聚名函数

函数是被设计用来执行特定任务的代码块，方便程序的封装和复用。

定义：通过function关键字进行定义

//函数定义
function functionName(参数1，参数2 ...){
  //要执行的代码
}

function add(a,b){//无需指定返回值类型
  return a + b;
}

//函数调用
let result = add(10,20);
alert(result);

匿名函数

是一种没有名称的函数，可以通过两种方式定义：函数表达式 和 箭头表达式。

//函数表达式
let add = function(a,b){
  return a + b;
}

//箭头表达式-最常用
let add = (a,b) => {
  return a + b;
}

//调用
let result = add(10,20);
alert(result);

自定义对象

//定义格式
let 对象名 = {
  属性名1：属性值1，
  属性名2：属性值2，
  属性名3：属性值3，
  方法名[：function]（形参列表）{}
}

let user = {
  name: 'Tom'，
  age: 20，
  gender: '男',
  sing: function(){
    alert(this.name + '唱歌~')
  }
  dance(){
    alert(this.name+'跳舞~')
  }
}

在自定义对象中尽量不要使用箭头函数，此时函数内的this并不指向当前对象 - 而是指向当前对象的父级

//调用格式
对象名.属性名;
对象名.方法名();

console.log(user.name);
user.sing();

Json

概念

Json是Javascript对象标记法（JS对象标记法书写的文本）。

由于其语法简单，层次结构鲜明现多用于作为数据载体，在网络中进行传输。

Javascript对象

{
  name: 'Tom',
  age: 20,
  gender: '男'
}

Json对象

{
  "name": "Tom",
  "age": 20,
  "gender": "男"
}

在Json中所有的key和字符串必须用”双引号“包裹。

转换方法

JSON.stringify(...) 将Js对象转换成Json文本

JSON.parse(...) 将Json文本转换成Js对象

let personJson = '{"name": "Jack", "age": 18}';//Json文本 本质就是一个字符串

DOM

Docunment Object Model 文档对象模型

将标记语言的各个部分封装为对应的对象：

  • Document：整个文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment：注释对象

Javascript通过DOM，就能够对HTML进行操作：

  • 改变HTML元素的内容

  • 改变HTML元素的样式（CSS）

  • 对HTML DOM事件做出反应

  • 添加和删除HTML元素

DOM操作

DOM操作核心思想：将网页中所有元素当作对象来处理。（标签的所有属性在该对象上都可以找到）

<body>

  <h1 id="tittle1">11111</h1>
  <h1>22222</h1>
  <h1>33333</h1>

  <script>
    //1.修改第一个h1标签中的文本内容
    //1.1 获取DOM对象
    let h1 = document.querySelector('#title1');
    let h1 = document.querSelector('h1');//获取第一个h1标签
    let hs = document.querSelectoraAll('h1');//获取所有h1标签形成一个伪数组

    //1.2调用DOM对象中属性或方法
    h1.innerHTML = '修改后的文本';
    hs[0] = 'all修改后的文本'; 
  </script>
</body>

事件监听

事件：HTML事件是发生在HTML元素上的“事情”，比如：

  • 按钮被点击

  • 鼠标移动到元素上

  • 按下键盘按键

事件监听：JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件。

语法：事件源.addEventListener('事件类型',事件触发执行的函数);

事件监听三要素

  • 事件源：哪个dom元素触发了事件，要获取dom元素

  • 事件类型：用什么方式触发，比如：鼠标单击click

  • 事件触发执行的函数：要做什么事

<input id="btn" type="button" value="点我一下试试2">
<script>
  //事件监听 - addEventListener（可以多次绑定同一事件 皆可运行）
  document.quertSelector('#btn').addEventListener('click',()=>{
    alert('试试就试试');
  })
</script>

早期写法：事件源.on事件类型 = 事件触发函数

*如果多次绑定同一事件将会被覆盖

常见事件

鼠标事件

鼠标点击左键 - click

鼠标双击右键 - dblclick

鼠标移入 - mouseenter

鼠标移出 - mouseleave

键盘事件

键盘按下触发 - keydown

键盘抬起触发 - keyup

焦点事件

获得焦点触发 - focus

失去焦点触发 - blur

表单事件

用户输入时触发 - input

表单提交时触发 - submit

JS程序优化

外部JS文件可以引用JS文件 —— import导包

Demo.js

import { printLog } from "./utils.js"

document.querySelector('#b2').addEventListenter('click',() => {
  printLog("调用");
})

utils.js

export function printLog(msg){
  console.log(msg);
}

必须要在函数前加上export外部才能使用

*import和export为模块化关键字，所以在HTML引用时需要特殊标注！！！

<script src="js/Demo.js" type="model"></script>