自动化测试第六节课JS

什么是JS

JS是一门广泛应用于浏览器的客户端的脚本语言
Netscape公司开发，与SUN公司合作
JS称JavaScript，用于浏览器的交互

JS的常见用途

HTML DOM操作(节点操作，比如添加，修改，删除节点)
给HTML网页增加动态功能，比如动画
事件处理:比如监听鼠标点击，鼠标滑动，键盘输入

JS的的书写方法

内联样式，在元素的标签内容写
内联样式二，在当前网页的script标签中编写
将js写在js文件中，并且在网页中引用

定义变量

var 变量名 = 变量 （分号结尾）

JS的数据类型

number：所有数字，比如整数/小数
biglnt：数字数据类型表示的范围值比number大，精度值搞。
string：字符串类型，单双引号都行
boolean：布尔值，只能说True或者False
Null：空值，表示尚未存在的对象或地址的引用
undefined：申明变量还未被初始化，或者默认值为undefined。
symbol：符号类型
object：对象类型（引用数据类型）
JS语法可以参照文档。

以下是一些JS代码，看过之后应该就清楚JS一些特点了，可以看到当第一个为字符串时，后面不管是什么，都会变成字符串的相加

        var str1 = 10 + 10 +'10';  //2010
        var str2 = '10' + 10 + 10; //101010
        var str3 = '10'+(10+10); //1020
        console.log(str1);
        console.log(str2);
        console.log(str3);

JS语言比较松散。

        // var age = 18;
        // var name = 'leo'
        // var result='我是' + name +','+'今年'+ age+ '岁'
        // console.log(result)

JS语言同时更灵活,传入多个参数也可以运行。

   <script>
       function login(username, pwd){
           console.log(username)
           console.log(pwd)
       }
       // 调用
       login(10,'pig',10)
   </script>

函数

    <script>
    // 加法运算函数
        function sum(){
            // return num1 + num2 + num3;
            count = arguments.length;
            
            var num = 0;
            for (var i=0; i<count; i++){
                var temp = arguments[i]*1  // 字符串乘1变成数字类型
                if(typeof(type) == 'number'&& !isNaN(temp)){
                    num += temp;
                }
                
            }
            return num
        }
        // sum中设定参数时
        console.log(sum(10,10,10)); // 30
        console.log(sum(10,10));   // NaN 不行 
        // 无设定参数时
        console.log(sum(10,10,10, 'hahaha')); // 30hahaha
        console.log(sum('leo',10,10,10,'hahaha')); // 0leo101010hahaha  加个if判断，判断是否为number类型
    </script>

JS对象

简单的对象

    <script>
        // 最简单的对象
        var dog = {
            age:10,
            name:'xhuang'
            }
        };

        console.log(dog);   //对象
        console.log(dog.age);
        console.log(dog['age']);
    </script>

匿名函数，第二个对象的创建，对象的值修改，方法的修改

    <script>
        // hanshu
        function run_func(){
            console.log('dog在跑步')
        }

        // 最简单的对象
        var dog = {
            age:10,
            name:'xhuang',
            run:function () {        // 匿名函数
                console.log(this.age + '岁的dog在跑步')     // this相当于python 中的self
            }
        };

        // 调用函数 
        // run_func();
        dog.age = 20;               //改值
        dog.run = function(){       // 改函数
            console.log(this.age + '岁的dog在开车')
        }
        dog.run();

        // 创建第二个对象
        var dog2 = {
            age:40
        }
        dog2.run = dog.run
        dog2.run()

        // console.log(dog);   //对象
        // console.log(dog.age);
        // console.log(dog['age']);
    </script>

多个对象的创建方法

    <script>
        function Dog() {
            this.age = 10,
            
            this.run = function () {        // 匿名函数
                console.log('run' + this.age);     // this相当于python 中的self
            };
            this.eat = function(){
                console.log('eat' + this.age)
            }
        };
        // 调用
        Dog()
        var d1 = new Dog();       // Dog 充当与构造函数
        d1.run();

        var d2 = new Dog();
        d2.age = 20;
        d2.eat();
        console.log('eat' + this.age)
    </script>

定义数组

    <script>
        var array = [10, '15', 'pig', 'cat', 100, {
            name:'Leo'
        },[10,'6666'], function(){
            console.log(100);
        }];
        result = array[array.length -1]();
        console.log(result);
    </script>

数组的遍历

var array = [10, 20, 'haha'];
遍历方式一: 正常遍历
for (var i = 0; i < array.length; i++) {
      console.log(array[i]);
}
遍历方式二: 对象遍历
for (var i in array) {
      console.log(array[i]);
}

• 全局对象
• window 程序的窗口. 里面有常见的属性, 如:location. location中的href可以做网页跳转
• document 可以拿到整个网页
• document.getElementsByTagName(); 通过标签名
• document.getElementById(); 通过id属性
• document.getElementsByName(); 通过name

onload(加载)
• 可以将js代码写在body体前面