Python武器库开发-前端篇之JavaScript基础语法(三十四)

前端篇之JavaScript基础语法(三十四)

JavaScript的三种引用方式

JavaScript的三种引用方式分别是：

  1. 内部引用（内联式）：将JavaScript代码嵌入到HTML页面中的<script>标签内部。例如：
<script type="text/javascript">// JavaScript代码
</script>
  1. 外部引用（链接式）：使用<script>标签的src属性引入外部的JavaScript文件。例如：
<script type="text/javascript" src="js/script.js"></script>
  1. 模块化引用（ES6模块化）：使用import和export关键字将JavaScript代码模块化，然后通过<script>标签的type属性设置为module来引入。例如：
<script type="module">import { func1, func2 } from './modules.js';// 使用 func1 和 func2 函数
</script>

JavaScript 的变量与类型

JavaScript是一种动态类型语言，变量的类型不需要显式地声明，而是在运行时根据赋值来推断其类型。JavaScript中有以下基本的数据类型：

  1. 数字(Number)：整数或浮点数。

  2. 字符串(String)：一串文本，用单引号(')或双引号(")括起来表示。

  3. 布尔(Boolean)：true或false。

  4. 空值(Null)：表示一个空对象指针，即该变量不指向任何对象。

  5. 未定义(Undefined)：表示变量未定义或未赋值。

  6. 对象(Object)：一种复合数据类型，由多个键值对组成。

  7. 数组(Array)：一种特殊的对象，由多个元素组成。

  8. 函数(Function)：一种可执行的对象，包含一段可重复使用的代码。

在JavaScript中，变量的类型可以通过typeof操作符来判断变量的类型。例如：

var a = 10;
console.log(typeof a); // 输出：numbervar b = "hello";
console.log(typeof b); // 输出：stringvar c = true;
console.log(typeof c); // 输出：booleanvar d = null;
console.log(typeof d); // 输出：objectvar e;
console.log(typeof e); // 输出：undefined

另外，注意const关键字声明的变量是不可变的（immutable），一旦被赋值之后就无法修改。对于复杂类型（如对象和数组），虽然const声明的变量不可变，但是对象和数组中的成员可以修改。

JavaScript是一种弱类型语言，它的变量可以保存不同类型的数据。JavaScript的变量定义可以使用var、let和const等关键字。

var关键字定义的变量是全局变量，可以在函数内部、函数外部以及全局上下文中使用。但是，var定义的变量存在变量提升现象，即变量在声明之前就可以使用，这可能会导致一些意想不到的问题。

let和const关键字定义的变量是块级作用域变量，只能在定义它的块中使用。let定义的变量可以被重新赋值，而const定义的变量则不能被重新赋值。

  1. var：声明的变量作用域是函数作用域或全局作用域。

  2. let：声明的变量作用域是块作用域。

  3. const：声明的变量是一个常量，一旦被赋值就不能再被修改，作用域也是块作用域。

JavaScript还支持自定义类型，可以使用构造函数来创建对象类型。例如：

function Person(name, age) {this.name = name;this.age = age;
}let person = new Person("Tom", 20);
console.log(person.name); // Tom
console.log(person.age); // 20

JavaScript的输出方式

JavaScript可以通过多种方式输出结果，包括：

  1. 使用console.log()方法输出到控制台：
console.log('Hello, world!');
  1. 使用alert()方法弹出对话框输出：
alert('Hello, world!');
  1. 使用 document.write()：输出结果在浏览器窗口中显示。
<script>document.write('Hello, world!');
</script>

4.在浏览器开发工具的console面板中输入JavaScript代码并回车，直接输出结果：

'Hello, world!'

5.使用innerHTML属性将输出插入到HTML元素中，例如：

<p id="output"></p>
<script>document.getElementById('output').innerHTML = 'Hello, world!';
</script>

6.使用window.open()函数打开一个新窗口并输出信息：

window.open().document.write('Hello, world!');

注意：使用window.open()函数会被大多数浏览器拦截，应谨慎使用。

7.使用 prompt()：弹出一个对话框，让用户输入内容，并输出在对话框中：

var name = window.prompt("What's your name?");
console.log("Hello, " + name + "!");

JavaScript函数

JavaScript函数是一段可重复使用的代码块，用于完成指定任务。函数由一组语句组成，以关键字function开始，后接函数名称和一组括号。函数可以接受参数，也可以返回值。以下是一个简单的JavaScript函数示例：

function add(a, b) {return a + b;
}console.log(add(2, 3)); // 输出 5

在上面的示例中，add是一个函数名称，它接受两个参数a和b，返回它们的和。console.log用于输出函数调用结果5。

JavaScript函数是一组执行特定任务的语句。它们是用于执行特定任务的独立代码块，可以在代码中重复使用。函数通常包括输入参数和返回值，但不一定都要有。定义函数时，必须给函数一个名称，并在需要时调用它。例如，以下是一个简单的JavaScript函数，它将两个数字相加并返回结果：

function addNumbers(a, b) {return a + b;
}

在上面的函数中，addNumbers是函数的名称，a和b是输入参数，return a + b是函数的返回值。要调用此函数，请使用以下代码：

var sum = addNumbers(2, 3);

在上面的代码中，将数字2和3作为输入参数传递给addNumbers函数，并将返回值赋值给变量sum。在这种情况下，sum将是5。

JavaScrip的分支

JavaScript中的分支是用于根据条件执行不同的代码路径的结构。JavaScript中有两种类型的分支 - if/else语句和switch语句。

  1. if/else语句根据一个条件来判断是否执行某段代码。如果条件为真，则执行if语句块中的代码；如果条件为假，则跳过if语句块中的代码。if语句还可以与else语句一起使用，以处理条件为假的情况：

语法：

if (condition) {// 执行条件为真时的代码
} else {// 执行条件为假时的代码
}

示例：

let age = 18;if (age >= 18) {console.log("你已经成年了！");
} else {console.log("你还未成年！");
}
  1. switch语句，switch语句基于一个表达式的值来执行不同的代码块。如果表达式与某个特定值匹配，则执行与该值关联的代码块。如果没有匹配的值，则执行default代码块：

语法：

switch (expression) {case value1:// 执行值为value1时的代码break;case value2:// 执行值为value2时的代码break;default:// 执行所有其他情况下的代码break;
}

示例：

let day = "Wednesday";switch (day) {case "Monday":console.log("今天是星期一！");break;case "Tuesday":console.log("今天是星期二！");break;case "Wednesday":console.log("今天是星期三！");break;default:console.log("今天是其他天！");break;
}

使用分支语句可以编写更具灵活性和可读性的代码，以根据不同的条件执行不同的操作。

JavaScrip的循环

JavaScript提供了多种循环方式，包括for循环、while循环、do…while循环和for…in循环。

  1. for循环

for循环是JavaScript中最常见的循环结构，它的一般形式如下：

for (initialization; condition; increment/decrement) {// code to be executed
}

其中，initialization是循环变量的初始化，condition是循环条件，当条件为true时执行循环体，increment/decrement是循环变量的增量或减量。

例如，计算1到10的和：

var sum = 0;
for (var i = 1; i <= 10; i++) {sum += i;
}
console.log(sum); // 输出55

2.while循环

while循环先判断循环条件是否为true，如果为true，则执行循环体。它的一般形式如下：

while (condition) {// code to be executed
}

例如，计算1到10的和：

var sum = 0;
var i = 1;
while (i <= 10) {sum += i;i++;
}
console.log(sum); // 输出55
  1. do…while循环

do…while循环先执行一次循环体，然后判断循环条件是否为true，如果为true，则继续执行循环体。它的一般形式如下：

do {// code to be executed
} while (condition);

例如，计算1到10的和：

var sum = 0;
var i = 1;
do {sum += i;i++;
} while (i <= 10)
console.log(sum); // 输出55
  1. for…in循环

for…in循环用于循环遍历对象的属性。它的一般形式如下：

for (variable in object) {// code to be executed
}

其中，variable是对象的属性名，object是要遍历的对象。

例如，遍历对象的属性：

var person = {name: "John", age: 30, city: "New York"};
for (var x in person) {console.log(x + ": " + person[x]);
}
/*
输出：
name: John
age: 30
city: New York
*/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/185798.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

通过lua脚本在redis中处理json数据

通过lua脚本在redis中处理json数据

在日常开发中&#xff0c;系统都会使用redis作为缓存来加快服务的响应&#xff0c;我们通常会将一个对象数据存储在redis中&#xff0c;对象存储通常有两种方案&#xff1a;一种是存储为hash结构&#xff0c;对象的键是属性名&#xff0c;值为属性值&#xff1b;另一种是序列化…
阅读更多...
【自动化测试】pytest 用例执行中print日志实时输出

【自动化测试】pytest 用例执行中print日志实时输出

author: jwensh date: 20231130 pycharm 中 pytest 用例执行中 print 日志 standout 实时命令行输出 使用场景 在进行 websocket 接口进行测试的时候&#xff0c;希望有一个 case 是一直执行并接受接口返回的数据 def on_message(ws, message):message json.loads(message)…
阅读更多...
NAT网络地址转换

NAT网络地址转换

目录 什么是nat nat 实验如何使用SNAT 和 DNAT 实验环境 内网连接外网 1.给网关服务器添加网卡&#xff08;两张网卡&#xff09; 2.查看新添加的网卡名 编辑网卡配置 3.开启路由转发 4.打开内网服务器 5.切换到外网服务器&#xff08;192.168.17.30&#xff0…
阅读更多...
JavaScript添加快捷键、取消浏览器默认的快捷操作、js查看键盘按钮keycode值

JavaScript添加快捷键、取消浏览器默认的快捷操作、js查看键盘按钮keycode值

document.addEventListener("keydown",function (event) {// 如果不知道按键对应的数字&#xff08;keyCode&#xff09;是多少可以弹出查看一下// alert(event.keyCode)if (event.ctrlKey && event.altKey && event.view["0"] null){if(…
阅读更多...
[PTP][1588v2] Follow_Up消息

[PTP][1588v2] Follow_Up消息

一、报文格式 0------3--------7--------11--------15--------------------------------31 |TranSpec|MsgType|Reserved1| VerPTP | MsgLength | ----------------|------------------|---------------------------------| | DomainNumber | Res…
阅读更多...
ZZULIOJ 2521: 文本修正

ZZULIOJ 2521: 文本修正

2521: 文本修正 题目描述 Chika接到了去检查河南省算法竞赛题面的任务&#xff0c;她发现所有单词"Henan"的首字母都没有大写。她需要去修正文本中的所有错误。换句话说&#xff0c;她需要把所有单词"henan"的首字母从"h"替换为"H"&…
阅读更多...
LiteOS学习笔记一

LiteOS学习笔记一

LiteOS笔记一 LiteOS简介(转自官方仓库)学习LiteOS的意义LiteOS代码目录IDE建议 LiteOS简介(转自官方仓库) Huawei LiteOS是华为面向物联网领域开发的一个基于实时内核的轻量级操作系统。本项目属于华为物联网操作系统[Huawei LiteOS]源码&#xff0c;现有基础内核包括不可裁剪…
阅读更多...
MedicalTransformer论文解读

MedicalTransformer论文解读

论文是一个分割任务&#xff0c;但这里的方法不局限于分割&#xff0c;运用到检测、分类都可以。 论文下载 https://www.yuque.com/yuqueyonghupjh9oc/ovceh4/onilw42ux6e9n1ne?singleDoc# 《轴注意力机制》 一个问题 为什么transformer一开始都有CNN&#xff1a;降低H、W…
阅读更多...
Python list列表添加元素的3种方法及删除元素的3种方法

Python list列表添加元素的3种方法及删除元素的3种方法

Python list列表添加元素的3种方法 Python list 列表增加元素可调用列表的 append() 方法&#xff0c;该方法会把传入的参数追加到列表的最后面。 append() 方法既可接收单个值&#xff0c;也可接收元组、列表等&#xff0c;但该方法只是把元组、列表当成单个元素&#xff0c;这…
阅读更多...
【综述+自动流量分析A】New Directions in Automated Traffic Analysis

【综述+自动流量分析A】New Directions in Automated Traffic Analysis

文章目录 论文简介摘要存在的问题论文贡献1. 整体架构2. nPrint3. nPrintML4. 任务 总结论文内容工具数据集可读的引用文献笔记参考文献 论文简介 原文题目&#xff1a;New Directions in Automated Traffic Analysis 中文题目&#xff1a;自动流量分析的新方向 发表会议&#…
阅读更多...
85基于Matlab的交通设施识别

85基于Matlab的交通设施识别

基于Matlab的交通设施识别。 GUI设计图像处理, 基于数字图像处理&#xff0c;设计实现一个自然场景下公路交通限速标志分割和识别的程序。要求系统具有界面&#xff0c;并实现以下功能&#xff1a; 1&#xff09;读入自然场景下包含交通标志的图像&#xff1b; 2&#xff09;对…
阅读更多...
【网络BSP开发经验】网络流量应用识别技术

【网络BSP开发经验】网络流量应用识别技术

文章目录 网络流量应用识别技术背景应用识别基本原理应用识别主流技术方向特征识别技术单报文解析流特征解析 关联识别技术DNS关联识别 行为识别技术 应用识别框架介绍应用特征提取经验tcpdump 抓包方式默认启动监视指定网络接口的数据包监视指定主机的数据包 禁用特征提取加速…
阅读更多...
波奇学C++：C++11的可变参数模板和emplace

波奇学C++：C++11的可变参数模板和emplace

可变参数模板 // args是参数包 template<class T,class ...Args> void _ShowList(T value, Args... args) {cout << sizeof...(args) << endl; // 2cout << value << " ";/*_ShowList(args...);*/} int main() {_ShowList(1,2,3); re…
阅读更多...
前端笔试遇到的坑-100题

前端笔试遇到的坑-100题

1.闭包 let 形成闭包 var全局变量 function test() {for (var i 0; i < 6; i) {console.log(i); //1 2 3 4 5 6// setTimeout(() > {// console.log(i);// }, 0); 6 6 6 6 6 6 6} } test();var array []; for (var i 0; i < 3; i) {array.push(() > i);…
阅读更多...
Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案

Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案

引言 在前文中&#xff0c;我们曾深入探讨了在修改数据后跨页时提醒用户可能丢失数据的问题。虽然这种方式对于一些场景是足够的&#xff0c;但当涉及选择框时&#xff0c;我们需要更为智能和高效的解决方案。在本文中&#xff0c;我们将分享一种基于 Element UI 的实际案例&am…
阅读更多...
内模原理与控制

内模原理与控制

基于模型的控制方法&#xff1a; 把外部作用信号的动力学模型植入控制器来构成高精度反馈控制系统的设计原理。 内模原理&#xff08;IMP&#xff09;指的是&#xff0c;想要实现对R(s)的无差跟踪&#xff0c;系统的反馈回路中需要包含一个与外部输入R(s)相同的动力学模型。通…
阅读更多...
数据增广【以图像增广为例】

数据增广【以图像增广为例】

数据增广/增强&#xff1a; 对一个已有数据集中的数据进行变换&#xff0c;使其有更多的多样性。 数据增广通过通过变形数据来获得多样性从而使得模型的泛化性能更好 例如&#xff1a; 在语言里面加入各种不同的背景噪音改变图片的颜色和形状 增强数据一般在线随机生成&#…
阅读更多...
2023-11-30 LeetCode每日一题（确定两个字符串是否接近）

2023-11-30 LeetCode每日一题（确定两个字符串是否接近）

2023-11-30每日一题 一、题目编号 1657. 确定两个字符串是否接近二、题目链接 点击跳转到题目位置 三、题目描述 如果可以使用以下操作从一个字符串得到另一个字符串&#xff0c;则认为两个字符串 接近 &#xff1a; 操作 1&#xff1a;交换任意两个 现有 字符。 例如&…
阅读更多...
高并发架构——网页爬虫设计：如何下载千亿级网页？

高并发架构——网页爬虫设计：如何下载千亿级网页？

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 在互联网早期&#xff0c;网络爬虫仅仅应用在搜索引擎中。随着大数据时代的到来&#xff0c;数据存储和计算越来越廉价和高效&#xff0c;越来越多的企业开始利用网络爬虫来获取外部数据。例如&#xff1a;获取政府公…
阅读更多...
力扣刷题-122买卖股票的最佳时机

力扣刷题-122买卖股票的最佳时机

题目要求如上&#xff0c;这里可以有两种解题思路&#xff0c;一种是利用动态规划去求解&#xff0c;一种是用贪心去求解。 首先看下动态规划的方法。 用动归去解决 动态规划最重要的就是要想出来递推公式&#xff08;这个真的很难&#xff09;&#xff0c;但是一旦想清楚递推…
阅读更多...
最新文章

Copyright @ 2022~2023