Web前端-JavaScript

易21992024-04-19 14:13

黑马程序员JavaWeb开发教程

文章目录

  1. javaScript（简称JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互
  2. JavaScript和java是完全不同的语言，不论是概念还是设计，但是基础语法类似

一、js引入方式

1、内部脚本

  • 将JS代码定义在HTML页面中

  1. JavaScript 代码必须位于<scripy></script>标签之间

  2. 在HTML文档中可以在任意地方防止任意数量的<scripy></script>标签

  3. 一般会把脚本防止在<body>元素的底部这样可以改善显示速度

2、外部脚本

  • 将JS代码定义在外部JS文件中，然后引入到HTML页面中
  1. 外部JS文件中，只包含JS代码，不包含<scripy></script>标签
  2. 在HTML文件中通过<scripy></script>标签来引入JS文件
  3. <scripy></script>标签不能自闭合

二、js基础语法

1、书写语法

（1）基本语法

  • 区分大小写：与java一样，变量名、函数名以及其他的一切东西都是区分大小写的
  • 每行结尾的分号可有可无（建议写上）
  • 注释：
    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */
  • 大括号表示代码块

（2）输出语句

  • 使用 window.alert() 写入警告框
  • 使用document.write() 写入HTML输出
  • 使用 console.log() 写入浏览器控制台输出

2、变量

（1）变量

  • JavaScript中使用 var 关键字来声明变量

    • var 声明的变量作用域比较大，全局变量
    • var 声明的变量可以重复定义，后定义的会将前边定义的变量覆盖掉

  • JavaScript是一门弱类型语言，变量可以存放不同类型的值

  • 变量名需要遵循如下规则

    • 组成字符可以使任何目、数字、下划线（_）、或者美元符号（$）
    • 数字不能开头
    • 建议使用驼峰命名

（2）注意事项

  • ECMScript 6 新增了let关键字来定义变量。他的用法类似于 var ，但是所声明的变量只在let代码块内有效，且不允许重复声明。
  • 新增了 const 关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变

3、数据类型、运算符、流程控制语句

（1）数据类型

  • 原始类型
    • number：数字（整数、小数NaN）
    • string：字符串，单引号和双引号都可以
    • boolean：布尔
    • null：对象为空
    • undefined：当声明的变量未初始化时，该变量的默认值是undefined

（2）运算符

  1. 运算符
  • 算术运算符：+ , - , * , / , % , ++ , --
  • 赋值运算符：= , += , -= , *= , /= , %=
  • 比较运算符：> , < , >= , <= , != , == , ===
    • ==：会进行类型转换
    • ===：不会进行类型转换
  • 逻辑运算符：&& , || , !
  • 三元运算符：条件表达式 ？true_value ： false_value
  1. 类型转换
  • 字符串类型转为数字 parseInt
    • 将字符串字面值转为数字，如果字面值不是数字，则转为 NaN
  • 其他类型转为boolean
    • Number：0 和 NaN 是 false，其余的都是 true
    • String：空为 false，其余的都是 true
    • Null和undefined：都是 false

（3）流程控制语句

  • if...else if ...else...
  • switch
  • for
  • while
  • do...while
  • 语法与 java 当中一致

三、js函数

（1）函数

  • 介绍 ：函数（方法）是被设计为执行特定人物的代码块

  • 定义：

    • JavaScript函数通过function关键字进行定义，语法为

    • 第二种方式

  • 注意：

    • 形式参数不需要类型，因为JS是弱类型语言
    • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
    • 调用：函数名（实际参数列表）

四、js对象

1、Array

（1）数组的定义以及访问语法

  • JavaScript 中 Array 对象用于定义数组

  • 定义

    • 方式一

    • 方式二

  • 访问

（2）Array中的属性和方法

  • 属性
    • length：社会或返回数组中元素的数量
  • 方法

    • forEach（）：遍历数组中每个有值的元素，并调用一次传入的函数


    • push（）：将新元素添加到数组的末尾，并返回新的长度

      • arr.push(3,4,5);

    • splice（）：从数组中删除元素

      • arr.splice(2,3);//从索引为2的位置开始删，一共删除3个元素

2、String

（1）字符串的创建方式

  • String字符串的创建方式有两种

      		// 第一种方式
          var 变量名 = new String("...");
          var str = new String("Hello String");
          
          // 第二种方式
          var 变量名 = "...";
          var str = "HelloString";

  • 属性

    • length：字符串的长度

  • 方法

    • charAt（）：返回在指定位置的字符
    • indexOf（）：检索字符串
    • trim（）：去除字符串两边的空格，中间的不会去除
    • subString（）：提取字符串中两个指定的索引号之间的字符

3、JSON

（1）JavaScript自定义对象

  • 定义格式

  • 调用格式

（2）JSON-介绍

  1. 概念：JavaScript Object Notation，JavaScript对象标记法

  2. JSON是通过JavaScript对象标记法书写的文本

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

  4. 正确的JSON格式：key必须使用双引号

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

（3）JSON-基础语法

  • 定义：

  • value的数据类型为

    • 数字（整数或浮点数）
    • 字符串（在双引号中）
    • 逻辑值（true或者false）
    • 数组（在方括号中）
    • 对象（在花括号中）
    • null

  • JSON字符串转为JS对象

  • JS对象转为JSON字符串

4、BOM

（1）BOM

  • 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象
  • 组成
    • Window：浏览器窗口对象
    • Navigator：浏览器对象
    • Screen：屏幕对象
    • History：历史记录对象
    • Locationn：地址栏对象

（2）Window

  • 介绍

    • 浏览器窗口对象

  • 获取

    • 直接使用window，其中window.可以省略

  • 属性

    • history：对History对象的只读引用
    • location：用于窗口或者框架的Location对象
    • navigator：对Navigator对象的只读引用

  • 方法

    • alert():显示带有一段消息和一个确认按钮的警告框

    • confirm（）：显示带有一短消息以及确认按钮和取消按钮的对话框

    • setInterval()：按照指定的周期来调用函数或计算表达式

    • setTimeout()：在指定的毫秒数之后调用函数或计算表达式

（3）Location

  • 介绍

    • 地址栏对象

  • 获取

    • 使用window.location获取，其中window.可以省略

  • 属性

    • href ：设置或返回完整的URL

5、DOM

（1）DOM

  • 概念

    • Document Object Modeel，文档对象模型

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

    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象

  • JavaScript 通过DOM，就能够对HTML进行操作

    • 改变HTML元素的内容
    • 改变HTML元素的样式CSS
    • 对HTML DOM 时间做出反应
    • 添加和删除HTML元素

  • DOM 是 W3C 的标准，定义了访问HTML和XML文档的保准，分为3个不同的部分

    1. Core DOM-所有文档类型的标准模型
    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
    1. XML DOM-XML 文档的标准模型
    1. HTML DOM -HTML文档的标准模型
    • Image：<img>
    • Button:<input type='button'>
      ###（2）获取HTML中的DOM对象

  • HTML的的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

  • Document对象中提供了以下获取Element元素的函数

    • 根据id属性值获取，返回单个Element对象

    • 根据标签名称获取，返回Element对象数组

    • 根据name属性值获取，返回Element对象数组

    • 根据class 属性值获取，返回Element对象数组

实例完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <img id ="h1" src="../img/off.gif" width="50px"><br><br>

    <div class="cls">传智教育</div><br>
    <div class="cls">黑马程序员</div><br>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏

     <script>

        // 1.获取 Element 元素 
        // 1.1 获取元素-根据 id 获取
        var img = document.getElementById("h1");
        alert(img);
        // 1.2 获取元素-根据标签获取
        var d = document.getElementsByTagName("div");
        for (let i = 0; i < d.length; i++) {
            alert(d[i]);
        }

        // 1.3 获取元素-根据 name 属性获取
        var names = document.getElementsByName("hobby");
        for (let i = 0; i < names.length; i++) {
            alert(names[i]);
        }
        // 1.4 获取元素-根据 class 属性获取
        var clsArray = document.getElementsByClassName("cls");
        for (let i = 0; i < clsArray.length; i++) {
            alert(clsArray[i]);
        }
       
    </script> 

    <script>
        // 2、查询参考手册，属性、方法
        var divs = document.getElementsByTagName("div");
        var div1 = divs[0];//拿到第一个div
        div1.innerHTML = "传智教育666";
    </script>
</body>
</html>

结果示例

（2）DOM操作小案例

注意：可以在 https://www.w3school.com.cn/ 查找相关的操作DOM的属性和方法

  • 将灯泡点亮

  • 所有div标签的内容后边加上very good（红色字体）

  • 使所有的复选框呈现选中状态
    实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM 练习</title> </head> <body> 

      <div class="cls">传智教育</div><br>
  <div class="cls">黑马程序员</div><br>

  <input type="checkbox" name="hobby">电影
  <input type="checkbox" name="hobby">旅游
  <input type="checkbox" name="hobby">游戏

  <script>
      // 1、点亮灯泡
      // 1.1 通过id属性拿到 img对象
      var img = document.getElementById("h1");
      // 1.2 操作元素的src属性
      img.src = "../img/on.gif";

      // 2、所有div标签的内容后边加上very good（红色字体）
      // 2.1 获得div标签
      var divs = document.getElementsByTagName("div");
      // 2.2 在div标签内容后边添加内容
      for (let i = 0; i < divs.length; i++) {
          const div = divs[i];
          div.innerHTML += "<font color='red'>  very good</font>";
      }

      // 3、使所有的复选框呈现选中状态
      // 3.1 根据name属性得到所有复选框
      var checks = document.getElementsByName("hobby");
      // 3.2 将复选框做成选中状态
      for (let i = 0; i < checks.length; i++) {
          checks[i].checked = true;
          // c.checked=true;
      }
  </script>
    </body> </html>

结果示例：

五、js事件监听

1、事件监听

（1）概念

  • 事件：HTML事件是发生在HTML元素上的"事情"。比如
    • 按钮被点击
    • 鼠标移动到元素上
    • 按下键盘按键
  • 事件监听
    • JavaScript 可以在时间被侦测到的时候执行代码

2、JS事件监听

（1）事件绑定

  • 方式一：通过HTML标签中的事件属性进行绑定

  • 方式二：通过DOM元素属性绑定

  • 完整示例代码

    <!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> <script> function on() { alert("事件绑定1被点击了"); } </script> <script> document.getElementById("btn2").onclick = function () { alert("事件绑定2被点击了"); } </script> </body> </html>

（2）常见事件

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

注意:常见事件的使用方法在下个案例中有所提及

（3）案例

  1. 最初的图片是如下图：
  1. 案例要求如下
  • 1、 点击"点亮"按钮灯泡被点亮，点击"熄灭"按钮熄灭灯泡（即修改图片）
  • 2、输入框，鼠标聚焦之后展示小写，离焦之后展示大写
  • 3、点击"全选"按钮使所有复选框呈现被选中状态，点击"反选"按钮，使所有复选款呈现未被选中状态

  1. 最终呈现状态

  2. 实例代码如下

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

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

 <input type="text" value="ITCAST" onfocus="fMouse()" onblur="bMouse()" id="text_value"><br><br>

 <input type="checkbox" name="hobby">电影
 <input type="checkbox" name="hobby">游戏
 <input type="checkbox" name="hobby">旅游
 <br><br>

 <input type="button" value="全选" onclick="on_select()">
 <input type="button" value="反选" onclick="on_unselect()"><br><br>

 <script>
     //1、 点击"点亮"按钮灯泡被点亮，点击"熄灭"按钮熄灭灯泡（即修改图片）
     // 1.1 点亮，首先根据标签中的事件属性绑定事件,再通过document修改src属性
     function on() {
         document.getElementById("img_id").src = "../img/on.gif";
     }
     // 1.2 熄灭，同点亮
     function off() {
         document.getElementById("img_id").src = "../img/off.gif";
     }
     // 2、输入框，鼠标聚焦之后展示小写，离焦之后展示大写
     // 2.1 聚焦，onfocus
     function fMouse() {
         var text = document.getElementById("text_value");
         text.value = text.value.toLowerCase();
     }
     // 2.2 离焦，onblur
     function bMouse() {
         var text = document.getElementById("text_value");
         text.value = text.value.toUpperCase();
     }
     // 3、点击"全选"按钮使所有复选框呈现被选中状态，点击"反选"按钮，使所有复选款呈现未被选中状态
     // 3.1 全选
     function on_select() {
         var select = document.getElementsByName("hobby");
         for (let i = 0; i < select.length; i++) {
             select[i].checked = true;
         }
     }
     // 3.2 反选
     function on_unselect() {
         var unselect = document.getElementsByName("hobby");
         for (let i = 0; i < unselect.length; i++) {
             unselect[i].checked = false;
         }
     }



 </script>
    </body> </html>
相关推荐
yufei-coder2 分钟前
C#基础语法
开发语言·c#·.net
长天一色2 分钟前
【ECMAScript 从入门到进阶教程】第三部分：高级主题（高级函数与范式，元编程，正则表达式，性能优化）
服务器·开发语言·前端·javascript·性能优化·ecmascript
_.Switch14 分钟前
Python机器学习模型的部署与维护：版本管理、监控与更新策略
开发语言·人工智能·python·算法·机器学习
醉颜凉17 分钟前
银河麒麟桌面操作系统修改默认Shell为Bash
运维·服务器·开发语言·bash·kylin·国产化·银河麒麟操作系统
NiNg_1_23420 分钟前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河22 分钟前
CSS总结
前端·css
NiNg_1_23422 分钟前
Vue3 Pinia持久化存储
开发语言·javascript·ecmascript
读心悦23 分钟前
如何在 Axios 中封装事件中心EventEmitter
javascript·http
带带老表学爬虫31 分钟前
java数据类型转换和注释
java·开发语言
qianbo_insist34 分钟前
simple c++ 无锁队列
开发语言·c++
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache