JavaScript基础学习

发布于:2024-05-22 ⋅ 阅读:(163) ⋅ 点赞:(0)

目录

正则表达式

语法

正则表达式修饰符

正则表达式模式

使用字符串方法

错误 - throw、try 和 catch

调试 

console.log() 方法

设置断点

debugger 关键字 

表单

JavaScript 表单验证

数据验证

JavaScript 保留关键字

JavaScript 对象、属性和方法

Java 保留关键字

Windows 保留关键字

关键字this

let 和 const

let关键字

const 关键字

JavaScript JSON

JSON 语法规则

JSON 数据

JSON 对象


正则表达式

正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

语法

/正则表达式主体/修饰符(可选)

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符:

表达式 描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符:

元字符 描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。

使用字符串方法

在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符串替换另一些字符串,或替换一个与正则表达式匹配的子串。

错误 - throw、try 和 catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。

 例如:

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try {                                //允许出现错误的地方
        if(x == "")  throw "值为空";       //若有错误,抛出异常
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {                         //捕获异常
        message.innerHTML = "错误: " + err;
    }
}

调试 

console.log() 方法

a = 5;
b = 6;
c = a + b;
console.log(c);

运行结果

设置断点

在调试窗口中,你可以设置 JavaScript 代码的断点。

在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。

在检查完毕后,可以重新执行代码(如播放按钮)。

debugger 关键字 

debugger 关键字用于停止执行 JavaScript,并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的

表单

JavaScript 表单验证

HTML 表单验证可以通过 JavaScript 来完成。

判断name字段有没有值。若有则提交数据,如没有,则弹窗提示需要输入名字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateForm() {
    var x = document.forms["myForm"]["name"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
    </script>
</head>
<body>
    <form name="myForm" onsubmit="return validateForm()" method="post">
        名字: <input type="text" name="name">
        <input type="submit" value="提交">
    </form>

</body>
</html>

运行结果: 

数据验证

数据验证用于确保用户输入的数据是有效的。

典型的数据验证有:

  • 必需字段是否有输入?
  • 用户是否输入了合法的数据?
  • 在数字字段是否输入了文本?

大多数情况下,数据验证用于确保用户正确输入数据。

数据验证可以使用不同方法来定义,并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前,在浏览器上完成验证。

JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield

* 标记的关键字是 ECMAScript5 中新添加的。

JavaScript 对象、属性和方法

您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名:

Array Date eval function hasOwnProperty
Infinity isFinite isNaN isPrototypeOf length
Math NaN name Number Object
prototype String toString undefined valueOf

Java 保留关键字

JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符:

getClass java JavaArray javaClass JavaObject JavaPackage

Windows 保留关键字

JavaScript 可以在 HTML 外部使用。它可在许多其他应用程序中作为编程语言使用。

在 HTML 中,您必须(为了可移植性,您也应该这么做)避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名:

alert all anchor anchors area
assign blur button checkbox clearInterval
clearTimeout clientInformation close closed confirm
constructor crypto decodeURI decodeURIComponent defaultStatus
document element elements embed embeds
encodeURI encodeURIComponent escape event fileUpload
focus form forms frame innerHeight
innerWidth layer layers link location
mimeTypes navigate navigator frames frameRate
hidden history image images offscreenBuffering
open opener option outerHeight outerWidth
packages pageXOffset pageYOffset parent parseFloat
parseInt password pkcs11 plugin prompt
propertyIsEnum radio reset screenX screenY
scroll secure select self setInterval
setTimeout status submit taint text
textarea top unescape untaint window

关键字this

  • 在方法中,this 表示该方法所属的对象。
  • 如果单独使用,this 表示全局对象。
  • 在函数中,this 表示全局对象。
  • 在函数中,在严格模式下,this 是未定义的(undefined)。
  • 在事件中,this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

let 和 const

let关键字

在块中重新声明变量也会重新声明块外的变量:如

var x = 5;
// 这里输出 x 为 5
{ 
    var x = 9;
    // 这里输出 x 为 9
}
// 这里输出 x 为 9

let 关键字就可以解决这个问题,let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。

var x = 5;
// 这里输出 x 为 5
{ 
    let x = 9;
    // 这里输出 x 为 9
}
// 这里输出 x 为 5

const 关键字

const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:

const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

JavaScript JSON

JSON 是用于存储和传输数据的格式,通常用于服务端向网页传递数据 。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

  • 数据在键/值对
  • 数据由逗号 , 分隔
  • 使用斜杆 \ 来转义字符
  • 大括号 {} 保存对象
  • 中括号 [] 保存数组,数组可以包含多个对象

JSON 数据

JSON 数据格式为 键/值 对,类似于python中的字典。

键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:例如

"usrername":"admin"

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对:

{"name":"baidu", "url":"www.baidu.com"}

网站公告

今日签到

点亮在社区的每一天
去签到