文本中涉及的一些基础介绍，不是全的。只写一些最常见、最经常使用的，其他的想了解可以自行查找资料。

前言：
script引入
内部引用 script
外部引用 script:src

一、js语法

1.编写语法

（1）区分大小写，建议驼峰式命名
（2）结尾分号可有可无，建议结尾分号添加，更严谨
（3）注释：单行注释// 多行注释/* */
（4）大括号代表代码块{}

2.输出语句

（1）window.alert 写入警告框
（2）document.write 写入html输出
（3）console.log 写入浏览器控制台

3.变量 - var关键字

（1）js是弱语言，没有强类型的概念，可以赋值不同类型。比如var x = 10 后面赋值x = “aaaaa”也是可以的，一个int类型，一个string类型
（2）不能以数字开头，但支持包含数字、字母、下划线、$美元符
（3）作用域比较大，全局变量。
（4）可以重复定义。比如设置var x=10 、var x="aaaa"， 后定义的会覆盖之前的定义
（5）es6新增let和const关键字，let关键字为局部变量，且不允许重复声明。const关键字，用来声明只读变量，不能改变

注意：

var x = 2;
let x = 1;
alert(x);

像这种情况，会报错的。Uncaught SyntaxError: Identifier 'x' has already been declared

4.数据类型、运算符+类型转换、流程控制符

（1）数据类型

• 原始类型
  number：整数、小数、NaN
  string：字符、'字符'
  boolean：布尔
  null：空对象
  undefined：声明的变量未初始化时
  typeof：获取数据类型

注意：

typeof null返回的是Object，null针对的是对象
变量var a申明后不赋值，typeof返回的是undefined

（2）运算符+类型转换

• 运算符
  算数运算符 + - * / % ++ --
  赋值运算符 = += -= *= /= %=
  比较运算符 > < >= <= == != ===全等
  逻辑运算符 && || !
  三元运算符 a!=null?ture:false

注意：

比较运算符-双等比较过程中会进行类型转换，如果比对类型不同，转换相同类型后在计算比较，全等不会进行类型转换

• 类型转换
  字符串类型转换为数字：
  如果字符串内容是纯数字，转换为字符串表面值，如果不是纯数字，从第一个数字开始记录，直到不是数字的下标值停止，如果开头第一个不是数字则是转换为NaN
  其他类型转换成Boolean：
  Number：0和NaN是false，其他值全部都是true
  String：空字符串为false ,其他全部为true
  Null和Undefined，都转换为false

（3）流程控制符

• 控制符
  if else if else
  switch
  for
  while
  do while
  break
  try catch finally
  continue
  throw

二、js函数

说明：函数（方法）执行特定任务的代码块。
通过function 关键字进行定义。

• 定义1

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

• 定义2

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

注意：

1.方法 形参不需要定义类型、返回值不需要定义类型。因为js是弱类型语言
2.传参不做限制，可以传n个，方法体取参数申明的个数，声明2个就取前两个
3.通过函数名称直接调用

三、js对象

1.基础对象（重点只关注这3）

（1）Array

• 定义

//方式一
var arr = new Array(元素列表)
var arr = new Array(1,2,3,4)

//方式二
var arr = [元素列表]
var arr = [1,2,3,4]

• 访问
  arr[索引] = 值
  arr[10]=1

• 特点

1.长度可变
var arr =[1,2,3]
arr[10] = 50
中间未赋值的值，输出为undefined

2.类型可变
var arr =[1,2,3]
arr[8] = 'a'
arr[9] = ture

• 常用属性
  length：返回数组中元素的数量

• 常用方法

foreach：遍历数组当中每一个”有值“的元素，并调用一次传入的函数，可以简化：箭头函数：(....)=>{....}

var arr = [1,2,34]
arr.forEach(function(a,b,c){
  console.log('a='+a);
  console.log('b='+b);
  console.log('c='+c);
})
输出顺序 元素、下标、数组。


简化，箭头函数：(....)=>{....}
var arr = [1,2,34]
 arr.forEach((a,b,c) => {
  console.log('a='+a);
  console.log('b='+b);
  console.log('c='+c);
});

push
将新元素添加到数组的末尾，并增加数组的长度

splice
从数组中删除元素。开始位置和结束位置。需要注意的是 开始位置为包容，结束位置为不包容

arr.splice(arr.length-1,arr.length)
console.log('a->',arr);

（2）String

一共有两种

• 定义

var string = new String("123")   
var string = "123123"

• 常见属性
  length 字符串的长度

• 常见方法
  charAt 返回指定位置的字符
  indexOf 检索指定字符
  trim 去除字符两边位置的空格，中间不会去除
  substring 字符串截取

（3）JSON

• 自定义对象
  申明：

var 对象名称 = {
  属性名:属性值,
  属性名:属性值,
  函数名称:function(形参列表){
  alert('111111')
  }
}

调用：
对象名称.属性名或者属性方法

• JSON
  对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
  常见方法：
  JSON.parse(str); //json字符串转换为js对象
  JSON.stringify(jsobject); //js对象转换为jSON字符串

2.浏览器对象模型

说明：BOM浏览器对象模型，他对浏览器中的各个组件进行了封装

• 组成
  window 浏览器窗口对象（窗口）
  navigator 浏览器对象（应用名称、版本、内核等信息 ）
  screen 屏幕对象
  history历史记录对象（上一步、下一步等）
  location地址栏对象
  其中window 和 location为重点关注对象

• window

获取：直接使用window，其中window.可以省略（window.alert \ alert）

属性：
history：对history对象的只读引用
location：用于窗口或框架的location对象
navigator：对navigator对象的只读引用
history ：对history对象的只读引用

方法：
alert

confirm：
显示带有一段消息的以及确认按钮和取消按钮的对话框。```

confirm('您确认删除该消息吗？') 自带确认删除， 点击确认返回true 取消false

setinterval：
指定周期调用某一个函数，周期性的执行，间隔时间后继续执行

setInterval(() => {
  alert('1111')
}, 3000);

setTimeout：
只调用一次，指定时间到达后调用

 setTimeout(() => {
        //aaaaa
}, 3000);

• location地址栏对象

获取：
window.location 或 location.属性

属性值：
href 设置或返回完全的UR
location.href='https://www.xxxxx.com' 设置后执行时会自动跳转到该地址

3.文档对象模型

说明：DOM文档对象模型，把每个html标签都封装成了一个对象

• DOM文档对象模型
  document 整个文档对象
  element 元素对象
  attribute 属性对象
  text 文本对象
  comment 注释对象

• 通过dom和事件监听来控制网页行为，通过dom控制Html中的元素
  改变html元素内容
  改变html样式
  对html dom事件做出反应
  添加和删除html元素

• dom 3c标准
  core dom ：所有文档类型的标准模型
  xmldom ：xml文档的标准模型
  html dom：html文档的标准模型

• 操作点关注

获取元素对象：通过document对象来获取

（1）通过id

document.getElementById('id')

（2）标签名称

document.getElementByTagName('div') 返回数组

（3）name属性值获取

document.getElementByName('name')

（4）class属性获取

document.getElementByClassName('cls')

操作元素对象的属性：
修改图片

<img id="image_lamp" src="/Users/0desktop/1111111.png" alt="" width="200px" height="150px">

var image_lamp = document.getElementById('image_lamp');
image_lamp.src = '/Users/0desktop/22222222222.png';

修改文字+样式

<div class="cls">测试文字1</div>
<div class="cls">测试文字2</div>

var clss = document.getElementsByClassName('cls');
    for (let i = 0; i < clss.length; i++) {
        const cls = clss[i];
        cls.innerHTML += "<font color='red'>追加文字</font>"
    }

四、js事件监听

1.常见监听

onclick 鼠标点击事件
onblur 元素失去焦点
onfocus 元素获取焦点
onload 某个页面或图像被完全加载
onsubmit 当表单提交时触发的事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某个元素之上
onmouseout 鼠标从某元素移开

2.事件绑定

（1）通过标签中的事件属性绑定

 <div id="html" class="cls" onclick="on()">html标签绑定</div>
 function on() {
   alert('我被点击了')
 };

（2）通过dom元素属性绑定

 var img = window.document.getElementById('image1');
 img.onclick = () => {
    img.src = image2;
 };

（3）案例演示

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>

<body>
    <img id="image_lamp" src="/Users/0desktop/sc_20230906170036.png" alt="" width="200px" height="150px">
    <br>

    <input onclick="light()" type="button" value="点亮">
    <input onclick="nolight()" type="button" value="熄灭">
    <br>

    <input onfocus="smallLetter()" onblur="bigLetter()" type="text" value="TEST" placeholder="请输入字母" id="edit_content">
    <br>

    <input class="checkbox" type="checkbox" name="hobby" id="1">电影
    <input class="checkbox" type="checkbox" name="hobby" id="2">旅游
    <input class="checkbox" type="checkbox" name="hobby" id="3">游戏
    <br>
    <input onclick="checkAll()" type="button" value="全选">
    <input onclick="uncheckAll()" type="button" value="复选">
</body>

</html>

<script>
    var image_lamp = document.getElementById('image_lamp');
    var edit_content = document.getElementById('edit_content');
    var checkboxs = document.getElementsByClassName('checkbox');

    function light() {
        image_lamp.src = '/Users/0desktop/sc_20230906165739.png';
    }

    function nolight() {
        image_lamp.src = '/Users/0desktop/sc_20230906170036.png';
    }

    function smallLetter() {
        edit_content.value = edit_content.value.toLowerCase();
    }

    function bigLetter() {
        edit_content.value = edit_content.value.toUpperCase();
    }

    function checkAll() {
        for (let i = 0; i < checkboxs.length; i++) {
            const element = checkboxs[i];
            element.checked = true;
        }
    }

    function uncheckAll() {
        for (let i = 0; i < checkboxs.length; i++) {
            const element = checkboxs[i];
            if (element.checked) {
                element.checked = false;
            } else {
                element.checked = true;
            }
        }
    }
</script>