JavaScript测试基础

最新推荐文章于 2024-07-13 12:39:05 发布
最新推荐文章于 2024-07-13 12:39:05 发布
阅读量641 收藏 1
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39181204/article/details/123257870
版权

  • 前端脚本语言
  • 网页行为动作

1.编程工具

  • HBuilder或者notepad++
<html>
<head></head>
<body>
<script type="text/javascript">
        // 注释：打印hello world
        /*
        多行注释
        测试
        */
     document.write("Hello World,i am Javascript!");
</script>
</body>
</html>

2.注释与语句

  • 注释单行//或者多行/ /
  • 语句也可叫句柄，Javascript语句以分号结束

3.变量的声明与使用

  • var声明变量
  • 变量命名符合规范(字符开头，名称大小写敏感)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
        // 变量声明与使用
           var a = 10; // 整型
           var b = 5;  
           var name = "小张"; // 字符类型
           var W;  // 声明变量
           W = "小王"; // 变量赋值
           var x = 1,y = 2; 
           document.write(a+b);
           document.write(name);
           document.write(W+name);
           document.write(x-y);
        </script>
    </body>
</html>

4.变量类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
        var a = 1;        // 整型
        var b = 1.2;      // 小数
        var c = "测试";   // 字符型
        var d = -1.2;     // 负数
        var e = false;    // 布尔型
        var f = null;     // 空
        // 转义字符\使用
        document.write("小明说：\"思密达\"")
        </script>
    </body>
</html>

5.变量和字符串组合使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var name = "小王";
            var str_name = "lance";
            document.write(name+"说：\""+str_name+"你好！\"");
        </script>
    </body>
</html>

6.函数定义带参与调用

  • function关键字定义函数
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // 定义函数带参数
            function openweb(a){
                alert("弹窗别动"+a);
            }
            // 调用函数
            openweb("窗口");
        </script>
    <form>
    <!-- 按钮调用函数 -->
    <input type="button" value="点我" onclick="openweb(value)"/>
    </form>
    </body>
</html>

7.多参函数与输出html标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // 定义函数
            function openweb(a,b){
                alert(a+"弹窗别动"+b);
                // html标签插入
                document.write("试试<br/>换行")
            }
            // 调用函数
            openweb("小明","窗口");
        </script>
    <form>
    <!-- 按钮调用函数 -->
    <input type="button" value="点我" onclick="openweb(value,value)"/>
    </form>
    </body>
</html>

8.基础语法汇总

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复习</title>
    </head>
    <body>
        <script type="text/javascript">
        // 函数
        function test(){
            // if判断，&&，||，！
            if (1 == 1 && 2 == 2 || 1 != 2){
                return "测试";
            }
            else{
                return "测试不通过";
            }}
            
        // while循环
        function test_while(a){
            var sum = 0
            while(a){
                sum += a;
                a--;
            }
            return sum;
        }
        // do while循环
        function test_do_while(a){
            var sum = 0;
            // 退出条件
            do{
                sum += a;
                a++;
            }while(a<101);
            return sum;
        }
        // switch
        function test_switch(a){
            switch(a){
                case 1:return 1;
                case 2:return 2;
                case 3:return 3;
            }
        }
        
        // for循环
        function add_test(){
            var sum = 0;
            for(i = 1;i<=100;i++){
                sum += i;
            }
            return sum;
        }
        // 调用函数
        document.write(test_do_while(1)+"<br/>");
        document.write(test_switch(3)+"<br/>");
        document.write(test()+"<br/>");
        document.write(test_while(5)+"<br/>");
        document.write(add_test());
        </script>
    <form>
        <input type="button" value="点我咯" onclick="alert('别点我好吧')">
    </form>
    </body>
</html>

9.事件处理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复习</title>
    </head>
    <body onload="alert('加载完成!')">
        <a href="https:www.baidu.com" onmouseover="alert('别到我头上来!')">百度</a>
        <a href="https:www.baidu.com" onmouseout="alert('别离开我头上!')">百度</a>
    </body>
</html>

10.对象

  • 对象初始化类似python的字典
  • function可用于声明类也可声明函数
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复习</title>
        <script type="text/javascript">
        // 定义对象
            pepole = {name:"小明",age:25};
            pepole1 ={name:"小狗",age:23}; 
        </script>
    </head>
    <body>
        <script type="text/javascript">
            // 调用对象的属性
            document.write(pepole.name+pepole1.name+pepole1.age)
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复习</title>
        <script type="text/javascript">
            // 定义对象
            function person(name,age){
                this.name = name;
                this.age = age;
                // 通过方法名调用方法，省略()
                this.leftYears = leftYear;
            }
            // 定义方法
            function leftYear(){
                var s_age = 100 - this.age;
                return s_age
            }
            // 实例化对象
            var a = new person("小明",18);
        </script>
    </head>
    <body>
        <script type="text/javascript">
            // 调用对象的属性，又需要加()表示类内部函数获得的值？
            document.write(a.name+"的剩余生命"+a.leftYears())
        </script>
    </body>
</html>

与下列Python类似用法：

class Person:    
    # 初始化对象
    def __init__(self, name, age):       
        self.name = name        
        self.age = age        
        self.leftYears = self.leftYear()    
    # 通过初始对象传入age，计算剩余生命
    def leftYear(self):        
        s_age = 100 - self.age       
        return s_age
a = Person("小明", 18)
print(a.leftYears)

11.数组

  • 需知道常用的方法和属性
  • 数组创建和映射
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复习</title>
    </head>
    <body>
    <script type="text/javascript">
        // 第一种创建数组
        var arr = new Array(1,"test1",2,3,"login","autotest");
        for(i = 0;i<arr.length;i++){
            document.write(arr[i]+"<br/>");
        }
        // 第二种创建数组
        var arr2 = new Array();
        arr2[0] = "test";
        arr2[1] = "autotest";
        document.write(arr2[0]+arr2[1]+"<br/>");
        // 数组的属性和方法
        document.write(arr.length+"<br/>");
        // 数组拼接
        document.write(arr2.concat("mytest")+"<br/>");
        // join方法，返回新数组对象,arr元素相隔穿插return(1returntest1return2return3returnloginreturnautotest)
        var new_arr = arr.join("return");
        document.write(new_arr+"<br/>");
        // 关联数组(字典映射)
        var t_arr = new Array();
        t_arr["name"] = "小明";
        t_arr["age"] = "18";
        document.write(t_arr["name"]+t_arr["age"]);
    </script>
    </body>
</html>

12.常用操作对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复习</title>
    </head>
    <body>
        <div class="show_time">
            <div id="showTime">显示时间的位置</div>
        </div>
    <script type="text/javascript">
        // Math对象,开算术平方根
        // var a = 4;
        // var b = Math.sqrt(a);
        // // 圆周率平方根
        // document.write(Math.sqrt(Math.PI)+"<br/>");
        // document.write(b+"<br/>");
        // Date对象
        // function printTime(arg){
        //     var date = new Date();
        //     var h = date.getHours();
        //     var m = date.getMinutes();
        //     var s = date.getSeconds();
        //     document.write("现在是"+h+"时"+m+"分"+s+"秒");
        //     switch(arg){
        //         case "h":return h;
        //         case "m":return m;
        //         case "s":return s;
        //     }
        // }
        // 按时打印时间
        // setInterval("printTime()",1000);
        function printDate(){
            var date = new Date();
            var Y = date.getFullYear();
            var M = date.getMonth()+1;   //js 获取月份从0开始
            var D = date.getDate();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            document.getElementById("showTime").innerHTML=""+Y+"年"+M+"月"+D+"日"+h+"时"+m+"分"+s+"秒";
        }
        // 按秒打印
        setInterval("printDate()",1000);
        
    </script>
    </body>
</html>

13.操作表单元素

  • 获取表单控件数量
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复习</title>
    </head>
    <body>
        <!--表单居中显示-->
        <center>
            <form>
            Username：<input type = "text" name = "username"/><br/><br/>
            Password：<input type = "password" name = "password"/><br/><br/>
            <input type = "submit" value="submit"/>
            </form>
        </center>
    <script type="text/javascript">
        // 获取form表单里的控件数量3个(姓名输入框，密码输入框和提交按钮)
        var a = document.forms[0].length;
        document.write(a);
        // 获取第1个form的第1个元素的name值
        var b = document.forms[0].elements[0].name;
        document.write(b);
    </script>
    </body>
</html>
  • 简单表单验证正确
<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Document</title>
 </head>
 <body>
   <script type="text/javascript">
     function check() {
    if(document.getElementById("username").value=="") {
        alert("没有输入用户名！");
         return false;
      } else if(document.getElementById("password").value=="") {
        alert("没有输入密码！");
        return false;
      } else {
        alert("提交成功！")
        return true;
       }
    }
   </script>
  <form name="form1">
   <input type="text" id="username">
  <input type="password" id="password" >
  <input type="submit" onclick="check()">
  </form> 
 </body>
 </html>
  • 错误的
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复习</title>
        <script type="text/javascript">
            function test(){
                if(document.getElementsById("username").value == "")
                    {alert("未输入用户名或密码");return false;}
                else if(document.getElementsById("password").value == "")
                    {alert("未输入用户名或密码");return false;}
                else{
                    alert("提交成功");return true;
                }
                }
        </script>
    </head>
    <body>
        <!--表单居中显示-->
        <center>
            <form name = "f">
            Username：<input type = "text" id = "username" /><br/><br/>
            Password：<input type = "password" id = "password"/><br/><br/>
            <input type = "submit" onclick="test()"/>
            </form>
        </center>
        
    </body>
</html>

14.JavaScript+Selenium自动化（不推荐，推荐python+selenium）

  • nodejs环境
  • npm安装selenium-webdriver
var webdriver = require('selenium-webdriver'), By = webdriver.By, until = webdriver.until;
    
var driver = new webdriver.Builder().forBrowser('chrome').build();
    
driver.get('https://www.baidu.com');
driver.findElement(By.id('kw')).sendKeys('selenium');
driver.findElement(By.id('su')).click();
driver.wait(until.titleIs('selenium_百度搜索'));
driver.quit();
花间无久
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript系列之事件
天雨的博客
11-18 647
事件是可以被JavaScript侦测到的行为，在网页中每个元素都可以产生可以触发JavaScript函数或程序的事件。
【js】如何点击按钮通过onclick打开新页面 和 在本页面打开
热门推荐
firstbird的博客
07-27 1万+
window.location.href =""; window.open();
JavaScript 测试入门指南（三）
最新发布
龙哥盟
07-13 721
try, catch和finally语句是 JavaScript 的异常处理机制，如前所述，它帮助你控制程序流程，同时捕获你的错误。try, catch和finallytry {finally {请注意try后面跟着catch，然后可选地使用finally。通常，catch语句捕获try语句中发生的异常。异常是一个错误。只要try或catch语句终止，finally语句就会执行。既然我们已经介绍了故意抛出 JavaScript 错误的基本命令和保留字，那么让我们来看一个try, catch和。
关于onclick="open([Object obj],[Object obj])"的问题
weixin_43735267的博客
11-15 800
这里写自定义目录标题欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 最近做项目的时候，需要在一个js里面进行字符拼接，并给onclick的方法传值，碰到浏览器报Unexpected end of input 这个错误，试了很多方法，在网上也查了一下。 代码如下： ```javascript var prizeMap = giftList.slice(8); giftStr += ...
JS的最佳实践 - 在href或onclick中的window.open（）？
weixin_45932157的博客
06-13 378
本文介绍了JS的最佳实践 -在href或onclick中的window.open（）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着来一起学习吧！
JavaScript中的测试
tyxjolin的专栏
05-04 1029
JavaScript是一门功能强大的语言，不仅可以用于构建动态和交互性的Web应用程序，还可以用于编写高效的数据结构和算法，并实现全面的测试覆盖。
Javascript基础程序测试题
qq1024884152的博客
04-21 1368
1、找出元素 item 在给定数组 arr 中的位置  如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1 function indexOf(arr, item) { return arr.indexOf(item); } 2、计算给定数组 arr 中所有元素的总和  function sum(arr) { var len = arr.length;
JavaScript阶段测试
weixin_45105458的博客
07-23 331
JavaScript阶段测试 一.基础简答题 eval是做什么的？ 什么是window对象? 什么是document对象? null，undefined 的区别？ javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？ Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ js延迟加载的方式有哪些？ ...
js-testing-fundamentals：TestingJavaScript.com上JavaScript测试基础
02-06
JavaScript测试基础 通过构建自己的框架来了解自动JavaScript测试的工作原理！ 材料顺序： simple.js assertion-library.js testing-framework.js async-await.js globals.js jest.test.js 这些文件旨在测试math模块...
软件测试 基础班 JavaScript JS基础.ppt
10-03
软件测试基础班 JavaScript JS基础是软件测试的一门重要课程，本节课将对 JavaScript 的基础知识进行详细的介绍。 一、JavaScript 简介 JavaScript 是一种高级的、动态的、基于原型的编程语言，主要用于客户端的...
JavaScript单元测试ABC
10-28
然而，本文将引导读者一起从零开始，理解单元测试的原理，并逐步实现一个简单的JavaScript测试框架。 标签“JavaScript单元测试”强调了本文的核心主题，即JavaScript环境下单元测试的实现和应用。JavaScript作为一...
javaScript测试题
06-29
这份"JavaScript测试题"针对在校大学生的复习和考试，涵盖了JavaScript的基础知识，旨在帮助学习者巩固和提升JavaScript编程技能。 首先，JavaScript是一种解释型的、基于原型的、动态类型的脚本语言。它的主要应用...
Test:测试 jAVASCRIPT
06-12
1. **基础语法**：JavaScript的基础包括变量声明（var, let, const）、数据类型（如字符串、数字、布尔值、null、undefined、对象、数组）、操作符（算术、比较、逻辑、三元）、流程控制（条件语句、循环语句）和...
$("").click与onclick的区别示例介绍
06-28 686
Html代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> $(function(){ $("#btn4").click(function(){ $("#
onclick如何跳转到其他页面，Javascript跳转页面和打开新窗口等方法
weixin_52475977的博客
09-18 1万+
如果是本页显示可以直接用location,方法如下： ①οnclick=“javascript:window.location.href=‘URL’” 　　②οnclick=“location=‘URL’” 　　③οnclick="window.location.href=‘URL?id=100’" ☆如果页面中有frame可以将在location前面添加top.mainframe.frames[‘right_frame’].location 1.在原来的窗体中直接跳转用 onClick="window.l
26 Python 2.x 字符编码终极指南
忧桑的小兔子
01-06 453
详细介绍了Python中的编码,解码问题，str与unicode之间的关系，Python隐式编码解码等问题。
JavaScript与单元测试与调试
吃不胖.
09-05 93
JavaScript是一种非常流行的编程语言，它主要用于网页开发和客户端应用程序开发。在JavaScript开发过程中，单元测试和调试是必不可少的环节。本文将详细介绍JavaScript的单元测试和调试技术，以帮助读者更好地理解和掌握这一方面的知识。 一、单元测试 单元测试是软件开发过程中非常重要的一步。它可以确保代码的正确性，减少错误和bug出现的概率，提高代码的质量和可维护性。在JavaScript中，单元测试可以使用多个框架和工具来实现。下面是介绍一些常用的单元测试框架和工具。 Mocha Mo
JS基础测试（上）
qq_48962360的博客
07-19 578
js基础测试，面经
JavaScript测试和调试工具：学习使用测试框架（如Jasmine、Mocha）对JavaScript代码进行单元测试
hitpter的专栏
08-13 593
通过学习使用Jasmine和Mocha等测试框架，开发者可以更加高效和准确地进行JavaScript代码的单元测试。同时，掌握异步测试、模拟对象和测试覆盖率等进阶技巧，能够提升测试的深度和广度，确保代码的质量和稳定性。无论是初学者还是有经验的开发者，都应该尽早掌握这些测试和调试工具，以提升JavaScript应用程序的质量和可靠性。本文将介绍几种常用的JavaScript测试框架，如Jasmine和Mocha，并提供学习使用这些测试框架进行单元测试的指南。四、进阶使用和测试覆盖率。
JavaScript基础知识测试
"Js基础试题汇编文档包含了JavaScript的基础知识，包括数据类型、变量声明、字符串、模板字符串、逻辑真假值、类型转换、内置对象、数组特性、JSON操作、正则表达式、DOM操作、事件处理以及元素位置和事件传播等核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值