JavaScript基础

-------------------------------------------------------------------------------------------------------------------------
JavaScript
-------------------------------------------------------------------------------------------------------------------------
promote('提示用户输入语');
var 变量名;     *定义变量
alter();     *弹窗
变量名 = 数值/字符串;    *变量的赋值

输出语句：document.write('在页面输出内容')
          alter('在弹窗输出内容')
          console.log('输出到控制台')
输入语句：promote('提示语')

***变量：
1.声明变量与赋值：语法     let 变量名    变量名 = 数值
2.更新变量：变量赋值后，通过新的值替换变量中的值，就是重新赋值。
3.变量的本质：程序在内存中申请的一块用于存放数据的一个小空间。

***数组：let arr = [数1,数2,......]         取值语法   arr[索引]     arr.length获取数组长度

***常量：当某个值永远不需要改变的时候，用const声明一个常量。
    语法：const 常量名 = 常量值

***数据类型：
    基本数据类型：number 数字  string 字符串  boolean 布尔型  undefined 未定义型  null 空类型
    引用数据类型：object  对象

NaN     Not a Number     它代表一个计算错误。它是一个不正确的或者一个未定义的数字操作所得到的结果。

***模版字符串示例：
let age = 20
document.write(`我今年${age}`岁了)      网页输出结果为：我今年20岁了

***数据类型的检测：typeof运算符可以返回被检测的数据类型。
    1.作为运算符：typeof x （常用写法）
    2.函数形式：typeof(x)      两种方式的结果是一样的

***类型的转换：
隐式转换：某些运算被执行时，系统内会自动将数据类型转换，这就是隐式转换。
显式转换：自己写代码告诉系统需要转换为什么数据类型。
let num = parseInt(str);      let num = Number(str);    let str = String(num);    let bool = Boolean(num);

***数组的操作：
    新增：arr.push('数组末尾新增数据')     arr.unshift('数组开头新增数据')
    删除：arr.pop('删除末尾元素')     arr.shift('删除开头元素')     arr.splice(开始下标,删除的个数)
    修改：数组[下标] = 新值
    查询：数组[下标]

***函数：function，是被设计为执行特定任务的代码块
    function 函数名() {
        代码块;
}
通过    函数名()    调用函数

***匿名函数：

1.函数表达式：将匿名函数赋值给一个变量，并且通过变量名来进行调用。
    函数表达式与具名表达式的区别：
    1.具名表达式的调用可以写在任意位置
    2.函数表达式，必须先声明函数表达式，后调用
语法：
let fn = function() {
    //函数体
}                       
调用方式   fn()

2.立即执行函数：不需要调用，立即执行
使用场景：避免全局变量的污染
语法1：(function () { //函数体 } ) ( );
语法2：(function () { //函数体 } ( ) );

***对象(object)：JavaScript里面的一种数据类型，通常用于描述某一事物或某一类人
对象声明语法：
let 对象名 = { 
    uname: '名字',
    age: 18,
    gender: '性别'
}

***对象中属性的操作：
    1.获取对象属性值：对象名.属性名      对象名[ '属性名' ]
    2.修改对象属性值：对象名.属性名 = 修改的值
    3.新增新的属性并赋值：对象名.新属性名 = 新属性值
    4.删除属性：delete 对象名.属性名  （很少用，了解一下就好）
    
***对象中的方法：
定义格式：
let obj = {
    属性名1: 属性值1,
    方法名1: function() {
        //方法体    
    }
}
调用方法：对象名.方法名()

***遍历对象：
for( let k in 对象名) {
    console.log(k)                 //打印的是属性名
    console.log(对象名[ k ])       //打印的是属性值
}

***内置对象：JavaScript内部提供的对象，包含各种属性和方法供开发者使用
1.数学对象：Math：提供了一系列做数学运算的方法
    random：生成0-1之间的随机数[ 0,1 )
    ceil：向上取整
    floor：向下取整
    round：四舍五入
    max：获取最大值
    min：获取最小值
    pow：幂运算
    abs：获取绝对值
***获取N--->M之间的*随机数*的公式：Math.floor( Math.random( ) * ( M - N + 1 ) ) + N

**************************************************************************************************************  Web API
**************************************************************************************************************
---Web API
作用：就是使用JS去操作HTML和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）

***DOM对象：浏览器根据HTML标签生成的JS对象
    ->所有的标签属性都可以在这个对象上面找到
    ->修改这个对象的属性会自动映射到HTML标签身上
    DOM的核心思想：
    ->把网页内容当做对象来处理
    document对象：
    ->是DOM里面提供的一个对象
    ->所以它提供的属性和方法都是用来访问和操作网页内容的 （ 列如document.write() ）
    ->网页所有内容都在document里面

&&&获取DOM对象&&&
1.根据CSS选择器来获取DOM元素 (***重点***)
*** document.querySelector( 'css选择器' )        //获取第一个匹配选择器的元素
*** document.querySelectorAll( 'css选择器' )    //获取所有对应选择器的元素放在一个数组中

2.操作元素内容：能够修改元素修改文本更换内容
    1.对象.innerText属性           --->对象.innerText = '修改的值'
        ->只识别文本，不能解析标签
    2.对象.innerHTML属性        --->对象.innerHTML = '修改的值'
        ->将文本内容添加/更新到任意标签位置
        ->会解析标签，多标签建议使用模版字符

3.操作元素样式属性：
    1.通过style属性操作CSS
    -->获取元素对象后：                //对象.style.样式属性 = '  '
    2.操作类名（className）操作CSS
    -->获取元素对象后：                //对象.className = ' 选择器 '    可以同时修改多个属性
    3.通过classlist操作类控制CSS             &&classlist是追加和删除不影响以前类名
    -->获取元素对象后：                
    //对象.classlist.add( ' 选择器 ' )          在原先类名后进行追加同一级选择器
    //对象.classlist.remove( ' 选择器 ' )      移除选择器
    拓展-->对象.toggle( ' 选择器 ' )          替换原先的选择器
    
获取表单里面的值通过value属性获取
表单对象.value   可以获取值
表单对象.value =  '修改值'
表单对象.type =  'password'   修改类型password/text

复选框：const checkbox = document.querySelector('input')
              checkbox.checked = 'true'
button:
    const bt = document.querySelector('button')
        bt.disabled = true    true禁止点击  false允许点击

***自定义属性：以data- 开头   例如data-id =  '1'

***定时器-间歇函数
开启定时器：setInterval( 函数, 间隔时间 )
关闭定时器：let num = setInterval( 函数, 间隔时间 )     num表示定时器的id（每个定时器的唯一标识符）
              clearInterval( num )    即可关闭对应的定时器
//函数可以在外面定义，函数名()调用，也可以直接作为一个匿名函数写在参数列表中     
//间隔时间单位是毫秒

***事件监听***：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，
                   也称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。
***语法：元素对象.addEventListener( ' 事件类型 ' , 要执行的函数 )
        ->事件源：那个DOM元素被事件触发了，要获取DOM元素
        ->事件类型：用什么方式触发，比如鼠标经过mouseover，鼠标点击click等等
        ->事件调用的函数：要做什么事

***事件监听版本的区别：
```DOM L0：事件源.on事件 = function( ){   }
```DOM L2：事件源.addEnventListener('事件' , 函数)
:::二者区别：on方式会被覆盖，addEnventListener()方式可以绑定多次，拥有事件更多特性，推荐使用

js页面加载：
window.onload = function () {   }

***接收主页?action=参数值   判断进入哪一个子页***
-------------------------------------------------------------
// 获取查询字符串
const queryString = window.location.search;
// 解析查询字符串，将参数以对象的形式存储
const params = new URLSearchParams(queryString);
// 获取 action 参数的值
const action = params.get('action');
// 判断 action 参数的值
if (action === 'login') {
  // 执行登录操作
  console.log('用户选择登录页面');
} else if (action === 'register') {
  // 执行注册操作
  console.log('用户选择注册页面');
} else {
  // 其他操作
  console.log('未指定页面类型');
}
-------------------------------------------------------------