【网络安全必备 | 前端开发基础】一篇文章速学 JavaScript

简介: 【网络安全必备 | 前端开发基础】一篇文章速学 JavaScript


代码位置

HTML 中的 Javascript 脚本代码必须位于 <script></script> 标签之间,同时含有 Javascript 代码的<script></script>可被放置在 HTML 页面的 <body><head> 部分中。

显示数据

JavaScript 没有任何打印或者输出的函数,但可以通过不同的方式来输出数据:

1)使用 window.alert() 弹出警告框。

window.alert() 是 JavaScript 中用于在浏览器中显示警告框的方法。

2)使用 document.write() 方法将内容写到 HTML 文档中。

document.write() 是 JavaScript 中用于将内容直接写入 HTML 文档的方法。

3)使用 innerHTML 写入到 HTML 元素。

innerHTML 是 JavaScript 中用于获取或设置 HTML 元素内容的属性。

点击按钮后页面发生变化:

当然,初始值可以为空,即:可删去qiushuo,这在下面的实例会显示。

4)使用 console.log() 写入到浏览器的控制台。

console.log() 是 JavaScript 中用于将信息输出到浏览器的控制台中的方法。

如图,使用该方式输出cookie:

字面量

在编程语言中,一般固定值称为字面量,如数字、字符串等。

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

字符串(String)字面量 可以使用单引号或双引号。

表达式字面量 用于计算。

数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:{firstName:“A”, lastName:“B”, age:1}

函数(Function)字面量 定义一个函数:function Func(a) { return a + a;}

变量

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值。

可以一个语句一个变量:

var a=1;
var b="ice";

也可以一个语句多个变量:

var a=1,b="ice";

操作符

JavaScript中的操作符与C语言中的相差不大,本文不再详述。这里介绍 + 运算符的其它用法:

+ 运算符用于把文本值或字符串变量加起来(连接起来)

txt1="What a very"; txt2="nice day"; txt3=txt1+txt2;

要想在两个字符串之间增加空格,需要把空格插入一个字符串之中:

txt1="What a very "; txt2="nice day"; txt3=txt1+txt2;

也可以把空格插入表达式中:

txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2;

对字符串和数字进行加法运算,得到的是字符串:

在JavaScript中,逻辑比较与PHP是相似的:

== 表示弱等于,10 == "10"

=== 表示绝对等于(值和类型均相等)

!== 表示不绝对等于(有一个不相等或者两个都不相等)

关键字

在命名变量时,不可与规定的关键字冲突。如下表:

注释

JavaScript使用//进行单行注释,使用/**/进行多行注释。

大小写及空格

JavaScript 对大小写是敏感的。

函数 getElementByIdgetElementbyID 是不同的。

同样,变量 myVariableMyVariable 也是不同的。

JavaScript 会忽略多余的空格。

var a=“ice”

var a = “ice”

两者是相同的

语句

和C语言一样,分号用于分隔 JavaScript 语句,我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句,但不推荐。

语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。

注意:语句标识符是保留关键字不能作为变量名使用。

如下表:

语句 描述
break 用于跳出循环。
catch 语句块,在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do … while 执行一个语句块,在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时,可以将代码块执行指定的次数。
for … in 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function 定义一个函数
if … else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出(生成)错误 。
try 实现错误处理,与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时,执行语句块。

折行

语句过长时,可以在文本字符串中使用反斜杠对代码行进行换行。

document.write("ice\
 qiushuo");

但这么拆行是违法的:

数据类型

在C语言中,int a = 1 之后,此后对a的赋值只能为整数,而JavaScript不然。

var a;      //此时a为undefined
var a=1;    //此时a为数字
var a="ice" //此时a为字符串

可以使用typeof来查看数据类型:

数组

创建数组主要有两种方法,第一种:

var 变量名=new Array();
 变量名[0]="123";
 变量名[1]="ice";

第二种 (condensed array):

var 变量名=new Array("123","ice");

注意:定义数组元素时,最后不能添加逗号;虽然添加后语法没有问题,但是在不同的浏览器可能得到不同的结果。

a = [1, 2, 3,]; //这样数组的长度可能为3 也可能为4。

正确的定义方式:

a = [1, 2, 3, 4, 5, 6];

输出数组的代码同C语言仅有很小的区别:

for (i=0;i<变量名.length;i++)
{
document.write(变量名[i] + " ");
}

对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔,对象的创建有两种形式,第一种:

var 变量名={firstname:"A", lastname:"B", age:1};

上面例子中的对象有三个属性:firstname、lastname 以及 age。

第二种:

var 变量名={
 firstname : "A",
 lastname : "B",
 age : 1
 };

注意:定义对象时,最后不能加逗号,以下定义是非法的:

var 变量名={firstname:"A", lastname:"B", age:1,};

对象的访问有两种形式,第一种:

document.write(变量名.firstname);

第二种:

document.write(变量名["firstname"])

函数

形式如下:

function *functionname*()
 {
  // 执行代码
  }

当调用该函数时,会执行函数内的代码。

注意:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

与C语言相同,有些函数可含参,有些函数可返回值。

举个例子:

作用域

在 JavaScript 中,对象、函数均为变量,作用域为可访问变量,对象,函数的集合。

当变量在函数内声明时,称为局部变量,只能在函数内部访问:

function add()
{
    var a=1;
}
document.write(a)
//报错

当变量在函数外声明时,称为全局变量,可以在整个文件中访问:

var a=1;
function add()
{
    a=a+5;
    return a;
}
console.log(a)
console.log(add())

如果没有声明变量,也称为全局变量,可以在整个文件中访问:

var a=1;
function add()
{
    a=a+5;
    return a;
}
console.log(a)
console.log(add())

事件

当浏览器或用户做出行为时,则称发生了一个事件。

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。格式如下:

<some-HTML-element some-event='JavaScript 代码'>

<some-HTML-element some-event="JavaScript 代码">

举个例子:

<button onclick="getElementById('ice').innerHTML=Date()">现在的时间是?</button>
<!DOCTYPE html>
<html>
<body>
    <p id="ice"></p>
    <button onclick="getElementById('ice').innerHTML=Date()">Time NOW IS</button>
</body>
</html>

字符串

在字符串的元素索引上,JavaScript与Python略有相同,并不像C语言似地把字符串赋值给数组。第一个字符索引值为 [0],第二个为 [1],以此类推。

实例如下:

在字符串长度的计算上,使用内置属性length即可:

在一些情况下,我们需要用到特殊字符。

举个例子,当我们想输出他被称为"班长"了时,如果使用下面的语句:

string = "他被称为"班长"了";
console.log(string);

会出现语法错误,因为string中的内容被识别为"他被称为"、“了”、班长:

此时可以使用反斜杠来进行转义:

在该例中,反斜杠就是转义字符,它可以用于转义撇号,换行,引号,等其他特殊字符。

代码 输出
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

有时我们需要进行一些行为,如搜索特定的值等,JavaScript提供了字符串方法。

方法 描述
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串,返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

举个例子,如果匹配到 John ,则输出True:

条件语句

JavaScript在条件判断的语法上与C语言类似,有以下四种类型:

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

具体用法参考文首链接,这里不再叙述。

循环语句

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性(既有C语言特点又有Python特点)
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块
<!DOCTYPE html>
<html>
<body>
    <p id="ice"></p>
    <script>
    function Func(){
        x = "",i = 0;
        while (i < 5){
            x = x + i + "<br>";
            i++;
        }
        return x;
    }
    document.getElementById("ice").innerHTML = Func();
    </script>
</body>
</html>

类型转换

有时我们需要将 JavaScript 变量转换为新变量或其他数据类型,可以用两种方法实现:

  • 通过使用 JavaScript 函数
  • 通过 JavaScript 自身自动转换

1)全局方法 Number() 可以将布尔值、字符串转换为数字。

2)全局方法 String() 可以将布尔值、数字转换为字符串。

3)一元运算符 + 可将变量转换为数字

如果变量不能转换,它仍然会是一个数字,但值不是一个数字:

y = “ice”; // y 是一个字符串

x = + “ice”; // x 是一个数字

正则表达式

语法结构:

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

修饰符用于对匹配进行描述:

修饰符 描述
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() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。

str = "lookattheflag"; 
s = str.search(/flag/g);

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

str = "lookattheflag"; 
s = str.replace(/Flag/i,"moon");
//这里使用i 不区分大小写

throw、try与catch

程序发生错误时会自动 throw(抛出)错误,try 语句测试代码块的错误,catch 语句处理错误。我们也可以自定义错误。

try…catch语法如下:

try {
    ...    //该语句正常,继续
    ...    //该语句异常,抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理,不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
}

举个例子:

<!DOCTYPE html>
<html>
<script>
var txt="";
function message() 
{ 
    try { 
        allert("ice");
        //此处编写出错
    } catch(err) { 
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述:" + err.message + "\n\n";  
        alert(txt); 
    } 
}
</script>
<body>
<input type="button" value="点此查看" onclick="message()" />
</body>
</html>

throw 语句允许我们创建自定义错误,这里就不多叙述了。

表单

HTML 表单验证可以通过 JavaScript 来完成,例如检查注册时输入的用户名是否为空、检查是否输入的是数字、必填(或必选)项目、电子邮件地址是否合法等。

JSON

JSON 是用于存储和传输数据的格式,它通常用于服务端向网页传递数据 ,是一种独立的语言。

有时我们需要与JSON打交道,而JSON与JavaScript存在联系。JSON 格式在语法上与创建 JavaScript 对象代码是相同的, JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 语法规则

  • 数据为 键/值 对。键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:“name”:“ice”
  • 数据由逗号分隔。“name”:“ice”, “age”:“1”
  • 大括号保存对象{“name”:“ice”, “age”:“1”}
  • 方括号保存数组"ice": [“a”,“1”,“b”,“2”]
    也可以保存对象:
"sites":[
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

JSON 字符串转换为 JavaScript 对象:

保证JavaScript字符串为 JSON 格式的数据:

URL = '{ "sites"  :  [{ "name":"ice","url":"keepipice.github.io"}  , {"name":"Google","url":"www.google.com"}  ,  {"name":"Taobao","url":"www.taobao.com" }]}'

注意这里使用单引号,不能直接使用双引号以免导致解析错误。

然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

obj = JSON.parse(URL);

如果使用的是双引号,则需要将字符进行转义:

javascript:void(0)

void操作符指定要计算一个表达式但是不返回值。

语法格式如下:

void func()
javascript:void func()

或者

void(func())
javascript:void(func())

举例如下:

读者可进入教程网站进行JavaScript的深度学习:菜鸟教程 | JavaScript教程

目录
相关文章
|
17天前
|
JavaScript 前端开发 API
|
2月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
999 24
|
3月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
86 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
6月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
107 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
6月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
170 5
|
6月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
210 1
|
6月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
121 4
|
6月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
576 2
|
6月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
149 4
|
7月前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
70 3