javaweb03-js基础

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

前言：
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')
```
操作元素对象的属性：
修改图片
```

var image_lamp = document.getElementById('image_lamp');
image_lamp.src = '/Users/0desktop/22222222222.png';
```
修改文字+样式
```

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

```

四、js事件监听

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

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

 function on() {
   alert('我被点击了')
 };
```
（2）通过dom元素属性绑定
```
 var img = window.document.getElementById('image1');
 img.onclick = () => {
    img.src = image2;
 };
```
（3）案例演示
 

<!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>