zoukankan      html  css  js  c++  java
  • w3school之JavaScript学习笔记

       在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为。

       学习网址:http://www.w3school.com.cn/js/js_intro.asp

    目录
     

    1.JS概述

    点击返回目录

    通过<script></script>标签可以向HTML插入JS脚本。

    具体可详见笔者另外一篇博文:关于HTML的JS代码,外部JS的说明:w3school之HTML学习笔记-脚本标签

    2.JS对象

    点击返回目录

    JavaScript 中的所有事物都是对象:数字、字符串、数组、函数。

    JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

    对象只是带有属性和方法的特殊数据类型。

    访问对象属性的语法是:objectName.propertyName。

    访问对象方法的语法是:objectName.methodName()。

    2.1 JS数字

    JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。

    所有 JavaScript 数字均为 64 位。

    如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。

    创建 Number 对象的语法:

    var myNum=new Number(value);
    var myNum=Number(value);

    方法:

    toString():转成字符型

    valueOf():返回一个 Number 对象的基本数字值。

    2.2JS字符串

    可以是引号中的任意文本。您可以使用单引号或双引号。

    创建 String 对象的语法:

    new String(s);
    String(s);

    var txt="Hello World!"

    属性:

    txt.length

    方法:

    txt.indexOf("需检索的字符串值"):可返回某个指定的字符串值在字符串(如txt)中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。

    txt.lastIndexOf("需检索的字符串值"):可返回某个指定的字符串值在字符串(如txt)中最后出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。

    txt.match():检索一个字符串(txt.match(searchvalue))或检索一个正则表达式的匹配(txt.match(/pattern/[g或者i)]),返回指定匹配的值g表示多次匹配,i表示不区分大小写。如果无g,表示只匹配一次,返回第一次匹配到的数据。

    txt.replace():将字符串的一些字符替换成另一个字符串。可以按照字符串匹配,也可以按照正则表达式匹配。入参同match。

    txt.split(分隔符):将字符串分隔成数组。String.split() 执行的操作与Array.join执行的操作是相反的。

    txt.big():字体变大

    txt.small():字体变小

    txt.bold():字体加粗

    txt.italics():字体变斜体

    txt.fontcolor("Red") :设置字体颜色

    txt.fontsize(16):设置字体大小

    txt.toLowerCase():设置字体小写

    txt.toUpperCase():设置字体大写

    txt.sub():字体上标

    txt.sup():字体下标

    txt.link("http://www.w3school.com.cn"):设置链接

    2.3 JS数组

    数组:通过new Array()创建数组或用[]创建。通过[索引]访问。JS的数组和Python的列表类似。字

    创建Array对象的语法:

    var arr =new Array()

    arr [0]="Saab"

    var arr =new Array("Saab","Volvo","BMW")

    var arr =["Saab","Volvo","BMW"]

    属性:

    arr.length:返回数组长度。

    方法:

    arr.contat(另一个数组):合并另个数组。

    arr.contat(连接符号):使用 join() 方法将数组的所有元素组成一个字符串。

    arr.sort():数组排序,从小到大排。

    arr.reverse():颠倒数组中元素的顺序。

    2.4JS对象

    对象:通过{}创建。通过[key]或句点访问。JS的数组和Python的字典类似。

    创建对象的语法:

    var obj =new Object()

    obj.fisrtname="Saab"

    var obj={firstname:"Saab",secondname:"Volvo"}

    2.5 JS日期

    创建日期对象的语法:

    var d=new Date() 

    方法:

    Date():获取当前时间。

    d.getTime():返回从 1970 年 1 月 1 日至今的毫秒数。

    d.setFullYear(年,月(从0开始),日) :设置具体的日期。

    d.getDay():获取星期,如今天是星期日,那么就返回0,星期一,那么返回1,依次类推。

    2.6JS正则表达式

    创建RegExp对象的语法:

    var patt1=new RegExp("e");

    方法:

    patt1.test(被匹配的字符串):test() 方法检索字符串中的指定值。返回值是 true 或 false。

    patt1.exec(被匹配的字符串):exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

    patt1.compile("d"):用于改变 RegExp,改变检索模式,如检索模式由e改为d。

    3.JS对象实例

    点击返回目录

    对象拥有属性和方法的数据。在面向对象的语言中,属性和方法被称为对象的成员。

    属性是与对象相关的值。方法是能够在对象执行的动作。

    3.1document对象属性
    属性:
    document.title:设置文档标题等价于HTML的title标签 
    方法:
    document.write("HTML元素") :通过这个方法动态地向html文档写入值,同时显示它。在js的脚本中,通过document.write,可以显示js中写的代码。
    如下:下面效果一样。
    <html>
    <body>
    <script type="text/javascript">
    document.write("<p>第一种实现方式:Hello World!</p>")
    </script>
    <p>第二种实现方式:Hello World!</p>
    </body>
    </html>
    定位方法:
    其实跟selenium定位元素如出一辙。通过定位到某个元素对象,动态地对其进行样式内容状态等进行改变。
    document.getElementById("ID值") :通过这个获取指定ID的元素对象
    document.getElementByName("Name值"):通过这个获取指定Name的元素对象
    document.getElementsByTagName("Tag标签名"):通过这个获取指定Tag的元素对象
    document.getElementsByClassName("类名"):通过这个获取指定类的元素对象
    document.querySelectorAll("selector选择器"):通过这个获取指定CSS的元素对象
     
    3.2元素对象
    element=document.getElementById("ID名")的属性有:
    变量:
    element.innerHTML:元素的内容(跟selenium的text一样)
    element.value:输入框的值
    element.className:元素的类名
    element.style.具体属性:元素的样式,颜色,背景颜色,字体大小等
    element.style.displey:是否显示:不显示:element.style.displey="none"。显示:element.style.displey="block"
    element.checked=true; //勾选
    element.checked=false; //不勾选
    方法:
    element.getAttribute(name):name是标签的属性名,该对象是获取属性值。

    4.JS编程

    点击返回目录

    编写JS脚本注意点:

    数据类型:字符串、数字、布尔、数组、对象、Null、Undefined

    布尔:只能有两个值:true 或 false。

    Undefined :这个值表示变量不含有值。

    null:可以通过将变量的值设置为 null 来清空变量。

    ;号在每条可执行的语句结尾添加。

    浏览器会按照编写顺序来执行每条语句。

    代码块由{}包围。

    JavaScript 对大小写敏感

    JavaScript会忽略多余的空格。

    在文本字符串中使用反斜杠对代码行进行换行。

    注释:单行注释以 // 开头。多行注释以 /* 开始,以 */ 结尾。

    变量用var声明。一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。

    变量必须以字母开头。变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)。

    当您向变量分配文本值时,应该用双引号或单引号包围这个值。

    当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

    JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

    使用function来定义函数。

    字符串能够用+号连接。

    可用条件运算符:variablename=(condition)?value1:value2 

    break和continue可以用于循环语句中。break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。

    4.1JS函数

    语法如下:

    function functionname(argument1,argument2...,argumentN)
    {
    这里是要执行的代码;

    [return 返回值;]
    }

    调用:

    可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

    4.2if语句

    语法如下:

    if (条件 1)
    {
    当条件 1 为 true 时执行的代码;
    }
    else if (条件 2)
    {
    当条件 2 为 true 时执行的代码;
    }
    else
    {
    当条件 1 和 条件 2 都不为 true 时执行的代码;
    }

    4.3switch语句

    语法如下:

    switch(n)
    {
    case 1:
    执行代码块 1;
    break;
    case 2:
    执行代码块 2;
    break;
    default:
    n 与 case 1 和 case 2 不同时执行的代码;
    }

    说明:

    首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

    4.4for语句

    4.4.1for 

    循环代码块一定的次数。

    语法如下:

    for (语句 1; 语句 2; 语句 3)
    {
    被执行的代码块;
    }

    说明:

    语句 1 在循环(代码块)开始前执行

    语句 2 定义运行循环(代码块)的条件

    语句 3 在循环(代码块)已被执行之后执行

    4.4.2for/in

    循环遍历对象的属性。

    语法如下:

    for (x in 数组或对象)
    {
    被执行的代码块;
    }

    4.5while语句

    4.5.1while 

    当指定的条件为 true 时循环指定的代码块。

    语法如下:

    while (条件)
    {
    需要执行的代码;
    }

    4.5.2do/while

    同样当指定的条件为 true 时循环指定的代码块。

    语法如下:

    do
    {
    需要执行的代码;
    }
    while (条件);

    说明:

    该循环至少会执行一次。

    4.6JS标签

    语法如下:

    label 标签名:
    语句

    说明:

    continue [标签名](带有或不带标签引用)只能用在循环中。

    break 语句(不带标签引用),只能用在循环或 switch 中。

    通过标签引用,break [标签名]可用于跳出任何 JavaScript 代码块。

    4.7try语句

    语法如下:

    try
    {
    在这里运行代码;

    也可以自己throw exception;
    }
    catch(err)
    {
    在这里处理错误;
    }

    说明:

    try 语句允许我们定义在执行时进行错误测试的代码块。

    catch(err) 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。类似Python中的except。

    JavaScript 语句 try 和 catch 是成对出现的。

    throw 语句允许我们创建自定义错误。放在try中。类似Python中的raise。

  • 相关阅读:
    待整理
    字符编码 【ZZ】
    python中的数据类型,存储,实现
    python中的浅拷贝和深拷贝
    算法比较-SVM和logistic回归
    机器学习中的范数规则化之(一)L0、L1与L2范数
    全排列的编码和解码----康托编码
    C++的const类成员函数
    Trie树的简单描述(需后续总结)
    UWP 手绘视频创作工具技术分享系列
  • 原文地址:https://www.cnblogs.com/yufeihlf/p/5811423.html
Copyright © 2011-2022 走看看