JavaScript基础

JS定义

• JavaScript：是一种由浏览器解析执行的脚本或编程语言，简称JS。
  • 用于实现网页交互和动态效果的编程语言。
• 作用：使网页具有更好的交互性等
  • 例如：使网页具有复杂的动画、可点击的按钮、弹出菜单等，让用户与网页有更好的交互性。
• 补充：前端开发(3大块)
  • 1、HTML：负责网页结构。
  • 2、CSS：负责网页的样式。
  • 3、JavaScript：负责网页交互的行为(增加用户与网页的交互性)

JS引入HTML文件的方式

• 行内式
  • 在HTML标签内引入JS
  • 例如：
    • <input type="button" value="按钮" οnclick="alert('点我！')">
• 内嵌式
  • 在script标签内部引入JS
  • 例如：
    • <script>
      • alert("我是内嵌式的js代码 ");
    • </script>
• 外链式
  • 在src属性中引入JS文件
  • 例如：在src属性中引入相同路径下的main.js文件
    • <script src="main.js"></script>

JS变量声明方式

• var：声明一个变量【常用】
  • 作用域：
    • var声明变量的作用域限制在其声明位置的整个封闭函数内。
  • 特点：可以重复声明具有相同名称的变量
  • 例如：声明一个值为1的变量
    • var num1=1;
• let：声明一个块级本地变量
  • 作用域：
    • let声明的变量只能在其声明的块或子块中使用。(即在{}内部有效)
  • 特点：在同一作用域内重复声明同名变量、报错
• 区别：
  • var声明的变量作用域范围比let声明的变量作用域范围大。
  • 使用var声明的变量具有函数级作用域，即在声明它的函数内部有效。若在函数外部使用var声明变量，则该变量为全局变量，可在整个脚本中被访问。
  • 使用let声明的变量具有块级作用域，即仅在{}内部有效【包括{}内的任何语句块例如if语句、for循环等的{}内部。】

JS数据类型

• JS是一种弱类型语言。
  • 即不需要提前指定变量的类型，仅根据值来判断变量的类型。
• 数据类型：
  • 1、number：数字类型
  • 2、string：字符串类型
  • 3、boolean：布尔类型
  • 4、undefined类型：(例如声明变量但未初始化)
  • 5、null空类型
  • 6、object：复合类型(即对象类型)
• 补充：JS可支持不同数据类型之间的相加操作
  • 原理：JS解析器会自动将其他数据类型转换为string字符串类型，从而实现字符串的拼接操作。

JS输出方式

• alert()：以弹窗形式输出
• console.log(变量名)：在控制台输出
  • 控制台：在网页中右键/检查/console(控制台)

JS语句

• JS条件语句：

  • JS常用条件语句：
    • if-else语句
    • if-else if-…… -else语句
  • 语法：
    • if(条件判断) {
      • 条件为True时，执行
      • }
    • else { 条件为False时，执行 }
  • 逻辑运算符：
    • 与：&&
    • 或：||
    • 非： !

• JS循环语句：

  • JS常用循环语句
    • for循环
    • while循环
    • do-while循环
  • 语法：
    • for(初始化语句;循环判断条件；自增/减表达式) {
      • 循环体；
      • }
    • while(循环判断条件) {
      • 循环体；
      • 自增/自减表达式；
      • }
    • do{
      • 循环体；
      • 自增/自减表达式；
      • }while(循环判断条件)；

• JS数组

  • 数组定义：
    • 方式一：实例化对象方式创建数组
      • var 数组名 = new Array( 值1，值2，…… )
    • 方式二：字面量方式创建数组【推荐】
      • var 数组名 =  [ 值1，值2，…… ]
  • 二维数组：
    • 即(一维)数组中的元素也为数组
    • 例如：var list1 = [[1,2,3],[4,5,6]];
      • 获取二维数组list1中的元素2(即第0行，第1列的元素)
      • alter(list1[0][1])
  • 补充：js中不支持负数下标的索引

• JS函数

  • 函数定义：
    • 方式一：function 函数名(形参) {
      • 函数体
      • }
    • 方式二：箭头函数的定义
      • var 函数名 = (形参) => {
        • 函数体
        • }
  • 函数调用：
    • 函数名(实参);
• 补充：
  • splice函数：既可向列表中添加元素、也可删除元素
    • P.S、(增、删元素的操作可同时进行)。
  • 列表名.splice( start, num, element1 ,..., elementN)
    • 1、start：【必有】开始删除(或添加)的索引(下标)
    • 2、num：【可选】待删除数组元素的个数
      • 当仅向数组进行添加元素的操作时，num为0。
    • 3、elementN：【可选】(在start索引位置处)插入的新元素
  • 例如：增：向列表list2中索引为1处依次插入'apple'，'orange'
    • 【定义列表list2为：var list2 = [1,2,3] 】
    • list2.splice(1,0,'apple','orange')
    • alter(list2)                    // list2为[1,'apple','orange',3]
  • 例如：删：从列表list2中删除从索引为1开始的1个数据
    • 【定义列表list2为：var list2 = [1,2,3] 】l
    • ist2.splice(1,1)
    • alter(list2)                   // list2为[1,3]
  • 例如：边删边增：从列表list2中删除从索引为1开始的2个数据，并向索引为1处依次插入'apple'，'orange'
    • 【定义列表list2为：var list2 = [1,2,3] 】
    • list2.splice(1,2,'apple','orange')
    • alter(list2) // list2为[1,'apple','orange']

定时器

• 定时器：即在特定时间后执行某段程序代码。
• 分类
  • 1、setTimeout定时器：在到达指定时间间隔后，仅调用执行目标函数一次。
    • setTimeout( func, delay, param1, param2......)；
      • 参数func：定时器要执行的函数名
      • 参数delay：时间间隔(单位：毫秒)
      • 参数param：函数所需的参数(实参)
  • 2、setInterval定时器：以指定的时间间隔，重复调用执行目标函数多次。
    • setInterval (func, delay, param1, param2......)；
• 定时器销毁
  • 定时器使用完毕后，需要及时销毁。(避免对内存资源的消耗)
  • clearInterval(定时器对象名);

文档对象模型DOM

• 定义：文档对象模型(Document Object Model，简称DOM)
• 作用：DOM一般用于对(页面标签)元素的获取、操作等
• 补充：HTML元素之间的关系(即树结构)
  • 文档document：一个页面即一个文档
  • 元素element：页面中的所有标签都为元素
  • 节点node：网页中的所有内容都是节点(标签，属性，文本，注释等)
  • 如图：

• 常用的内置对象document的方法

  • getElementById方法：由标签元素的id属性来获取对应的标签元素，并返回一个html标签对象。
    • 例如：获取HTML标签中id属性为butt的标签对象，并将此对象赋值给变量btn
      • var btn = document.getElementById('butt');

• 标签元素属性的操作

  • 标签属性的获取
    • 由上述document.getElementById()方法获取到标签对象后
    • 可以通过标签对象名.属性名来获取标签属性
  • innerHTML属性：读取或更新指定HTML标签之间的内容
    • 例如：获取标签内容
      • alert(标签对象.innerHTML);
    • 例如：修改标签之间的文字内容
      • 标签对象.innerHTML = "新修改后的内容"

事件

• 事件：是指在特定条件下执行的代码块。
  • 当事件被触发时(例如:鼠标点击、键盘按键、页面加载、表单提交等)，JS会自动执行与该事件相绑定的代码块，从而实现特定的功能。
  • 网页中所有的HTML元素都可产生事件

• onclick事件

  • onclick事件将在元素被点击时触发。
  • onclick事件设置的语法：
    • 方法一、在HTML标签内：
      • <标签元素 οnclick=" JS事件执行代码块 ">
      • 例如：在网页中点击按钮后，执行弹窗内容“哈哈哈哈”

        • <button οnclick="alert('哈哈哈哈')"></button>

    • 方式二、在JavaScript中：
      • 通过上述的document.getElementById()方法获取到标签对象后
      • 标签对象.οnclick=function(){
        • JS事件执行代码块
        • };