提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

【测试基础】之04 JS入门基础

JS测试基础入门 04
2023-09-11 14:19:30 时间

目标

  • 能够知道JS的定义和作用

  • 掌握JS的基本用法

什么是JavaScript

  • JavaScript是一种轻量级的编程语言，一种脚本语言

  • JavaScript是可插入 HTML 页面的编程代码

  • JavaScript可以控制HTML页面的结构和样式

JavaScript的用法

JS脚本的书写位置包括三种：

  • JS内嵌式

  • JS外链式

  • JS行内式

JS内嵌式

  • JS内嵌式就是把JS脚本写在HTML文档中，并且JS脚本必须位于 <script> 与 </script> 标签之间

  • JS脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS</title>
        <script>
            alert("软件测试");
        </script>
    </head>
    <body>
        Hello World！
    </body>
</html>

JS外链式

  • 脚本可放置与外部文件中，专门用来存在JS脚本的文件，文件后缀名为 .js

  • 外部脚本很实用，相同的脚本可以被许多不同的网页引用

  • 外部脚本需要在 <script> 标签的 src 属性中设置

创建JS文件myScript.js

alert("hello")
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS</title>
        <script src="myScript.js"></script>
    </head>
    <body>
        Hello World！
    </body>
</html>

JS行内式

  • JS行内式就是把JS脚步写到HTML标签上面

  • 缺点：不方便修改，没有实现代码的分离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS</title>
    </head>
    <body>
        <input type="button" value="1111" onclick="alert('软件测试')" />
    </body>
</html>

操作HTML元素

  • 使用JavaScript获取某个 HTML 元素，可以使用 document.getElementById(id) 方法

  • 使用innerHTML来获取或插入元素内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS</title>
</head>
<body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">第一段内容</p>

<script>
        document.getElementById("demo").innerHTML = "段落已被修改！";
    </script>
</body>
</html>

JS变量

  • 变量是用于存储信息的"容器"

  • 与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（例如Z=X+Y）

JS变量的命名规范

  • 变量名应该由字母、数字、下划线、$构成，不建议使用中文（建议刚刚开始就养成一个正确使用变量的好习惯）

  • 变量名不能以数字开头

  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

  • 注意要使用英文输入法，输入，可以在百度上设置输入法输入符号都设置全英。

var pi = 3.14;
var name = "zhang san" ;

创建JavaScript变量

  • 在 JavaScript 中创建变量通常称为"声明"变量

  • 使用 var 关键词来声明变量： var username;

  • 变量声明之后，该变量是空的（它没有值）

  • 为变量赋值需要使用等号： username = "张三";

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS</title>
</head>
<body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">第一段内容</p>

<script>
        var message = "今天天气不错，心情很美丽！";
        document.getElementById("demo").innerHTML = message;
    </script>
</body>
</html>

JS函数和事件

JS函数的定义

函数是JavaScript 中的基本组件之一。 一个函数是JavaScript 过程— 一组执行任务或计算值的语句。 要使用一个函数，你必须将其定义在你希望调用它的作用域内。 一个JavaScript 函数用 function 关键字定义，后面跟着函数名和圆括号。

JS函数语法

  • 使用function关键字来定义

  • 代码块放到大括号中

  • 通过使用 函数名() 来调用函数

  • 当函数被调用时，会执行函数内的代码

function functionName(){
    //执行的代码
}

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS</title>
</head>
<body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">第一段内容</p>

<script>
        function update() {
            var message = "今天天气不错，心情很美丽！";
            alert(message);
            document.getElementById("demo").innerHTML = message;
        }
        // 调用函数
        update();
    </script>
</body>
</html>

JS事件

  • HTML事件是发生在HTML元素上的事情

  • HTML事件可以是浏览器的行为，也可以是用户的操作行为（例如用户点击，网页加载完成）

常见的HYML事件

下面来举例一些比较常见的HTML事件的列表

事件

事件描述

onchange

HTML元素改变

onclick

用户点击HYML元素

onmouseover

用户在一个HTML元素上移动鼠标

onmouseout

用户在一个HTML元素上移开鼠标

onkeydown

用户按下键盘按键

onload

浏览器完成页面加载

如何为元素绑定事件

通过元素属性绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <script>
        function changeUsername() {
            alert("用户名改变了！");
        }
    </script>
</head>
<body>
    <h1>JS事件</h1>
    <p id="demo">这里显示时间</p>
    <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
    <br/>
    <input type="text" id="username" value="admin" onchange="changeUsername()">
</body>
</html>

通过JS脚本绑定

事件三要素：事件源，事件类型=function(){触发后执行的代码}

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>JS</title>
    </head>
    <body>
        <input id="btn" type="button" value="按钮" />
    </body>
</html>
<script>
//document 代表当前页面文档
//getElementById 通过id来进行查找
//onclick 鼠标单击事件类型
//function(){要执行的命令}
    document.getElementById('btn').onclick=function(){
        alert("被点击了！");
    }
</script>

相关文章