[HTML]Web前端开发技术27（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

JavaScript程序控制结构

顺序结构

分支结构

循环结构-for

循环结构-while语句

循环结构-do-while语句

循环结构-for-in循环

循环结构-循环的嵌套

循环中断与继续

JavaScript函数

常用系统函数-全局函数

常用系统函数-常用的对象函数

自定义函数

函数变量的作用域

课后练习

编程实现“手机批发业务-产品选购”页面，主要功能有查看购物车、收银台结算、初始化参数等

总结

前言

Web 前端开发工程师应掌握以下内容

理解 JavaScript 程序的概念与作用；
掌握 JavaScript 标识符和变量的概念及使用方法；
掌握 JavaScript 常用运算符和表达式概念；
掌握 JavaScript 中顺序、分支、循环等 3 种程序控制结构语法；
掌握 JavaScript 函数的定义方法，并学会使用；
学会综合运用 JavaScript 设计具有动态、交互功能的网页。

JavaScript程序控制结构

    在网页设计中JavaScript的主要作用是实现内容与行为的分离，而要实现交互式的页面必须编写相应的脚本程序。程序是专门解决某一问题的特定代码。

JavaScript 程序设计分为两种 :

  面向过程和面向对象的程序设计。

程序控制结构：

  顺序结构、分支结构和循环结构。

顺序结构

       顺序结构是最常用的一种程序结构，是按照语句出现的顺序，从第一条语句开始一步一步逐条执行，直至最后一条语句。

分支结构

     在 JavaScript 中，可以使用下面几种条件语句：

if 语句（ 单条件单分支 ）：在一个指定的条件成立时执行代码。
if...else 语句（ 单条件双分支 ）：在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
if...else if....else 语句（ 多条件多分支 ）：使用这个语句可以选择执行若干块代码中的一个。
switch 语句（ 单条件多分支 ）：使用这个语句可以选择执行 若干块代码 中的一个。

循环结构-for

for (初始化表达式;判断表达式;循环表达式){   

需循环执行的代码

 }

循环结构-while语句

while(表达式) {

   需执行的代码;

}

循环结构-do-while语句

do… while循环

do{

    需执行的代码;

  }while(表达式)

循环结构-for-in循环

该循环用来对数组或对象的属性进行操作的。基本语法：

    for (变量 in 对象){  执行代码； }

循环结构-循环的嵌套

循环的嵌套：一个循环内又包含着另一个完整的循环结构，称为循环的嵌套。

循环中断与继续

break作用:立即结束循环并转到循环后续语句执行。

continue作用:结束本次循环，其后的语句本次不再执行，开始下一次的循环。

JavaScript函数

 JavaScript 函数分为系统内部函数和系统对象定义的函数及用户自定义函数。
函数需要先定义后使用， JavaScript 函数一般定义在 HTML 文件的头部 head 标记或外部 JS 文件中 ，而函数的调用可以在 HTML 文件的主体 body 标记中任何位置。
  常用 系统函数 分 全局函数 和 对象定义的函数 。全局函数它不属于任何一个内置对象，使用不需要加任何对象名称，直接使用。

常用系统函数-全局函数

1. 计算表达式的结果函数：eval（字符串表达式）

     返回值：表达式的值或“undefined”。

     2.编码函数escape()：escape(字符串)

       escape() 函数将参数字符串中的特定字符(ISO-Latin-1 字符集)进行编码，并返回一个编码后的字符串。它可以对空格、标点符号及其他非ASCII字母表的字符进行编码，除了以下字符：“*  @  -  _  +  .  / ”。

    3.解码函数:unescape(string)

    unescape 函数返回的字符串是 ISO-Latin-1 字符集的字符。参数string包含形如“%xx”的字符的字符串，此处xx为两位十六进制数值。

   4.字符型转换成数值型函数:parseFloat(string)

   5.字符型转换成数值型函数:parseInt(numbestring , radix);

   6.判断是否是NaN()函数:isNaN(testValue);

         NaN:not a Number  （注意大小写）

常用系统函数-常用的对象函数

（1）toString(radix)。将Number型数据转换为字符型数据，并返回指定的基数的结果。其中radix范围2～36，若省略该参数，则使用基数10。

    var a = 12;alert(a.toString(2)); //告警框输出结果为1100（二进制）

     alert(a.toString()); //告警框输出结果为12(默认的十进制)

      （2）toFixed(n)。将浮点数转换为固定小数点位数的数字。n是整数，设置小数的位数，如果省略了该参数，将用0代替。

例如：

    var a = 2016.1567;alert(a.toFixed(2)); //保留2位小数，结果为2016.16

    alert(a.toFixed (5)); //保留5位小数，告警框输出结果为2016.15670

（3）字符串查找和提取常用函数

var str="Welcome to you!";

var substr=str.substring(3,6); //从第0个字符起，第3个-6个之间字符为"com"

var somestr=str.charAt(4);    //从第0个字符开始数，取第4个字符结果是"o"

   其它参照案例edu_14_6_7.html

自定义函数

基本语法：

    function functionname(argument1,argument2,..., argumentn){函数体；}

语法说明：

函数就是包裹在花括号中的代码块，使用关键词 function 来定义。当调用该函数时，会执行函数内的代码。
在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，参数之间用由逗号分隔。也可以没有参数，但括号不能省略，参数类型不需要给定。
函数体必须写在“ { ”和“ } ”内，“ { ”、“ } ”定义了函数的开始和结束。
JavaScript 中区分字母大小写，因此“ function ”这个词必须是全部字母小写的，否则程序就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。 例 如 :

   function sum(x,y){return x*y;}

 function showMessage(mess){

     alert(mess);

}

函数变量的作用域

变量分为局部变量和全局变量。

局部变量 是指在函数内部声明的变量，只在一段程序中起作用的变量； 全局变量 是指在函数之外声明的变量，在整个 JavaScript 代码中都可起作用的变量，全局变量的生命周期从声明开始，在页面关闭时结束。
局部变量和全局变量可以重名。即在函数体外声明了一个变量，在函数体内再声明一个同名的变量。在函数体内部，局部变量的优先级高于全局变量，即在函数体内，同名的全局变量被隐藏了。
需要注意到是：专用于函数体内部的变量一定要用 var 关键字声明 ，否则该变量将被定义成全局变量，如果函数体外部有同名的变量，可能导致该全局变量被修改。

课后练习

编程实现“手机批发业务-产品选购”页面，主要功能有查看购物车、收银台结算、初始化参数等

<!-- edu_14_7_1.html -->
<!doctype html>
<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>图书选购</title>
	<style type="text/css">
	table{width: 580px;height: 200px;}			
	td{text-align: center;	vertical-align: middle;}			
	.myBtn {margin: 20px;width: 120px;	height: 45px;border: 1px ridge #44FFEE;}
	</style>
	<script type="text/javascript">
		var result = ""; //存放选购信息			
		var price = new Array(2576.00, 2999.00, 3898.00, 699.00, 599.00, 699.00);
		var product = new Array("iPhone 6 32GB 金色 移动联通电信4G", "OPPO R11 全网通 黑色版", "Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机", "小米 红米手机4X 全网通版 2GB内存 16GB 香槟金", "小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金", "小米 红米4X 全网通版 2GB内存 16GB 樱花粉");
		var isSelected = new Array(0, 0, 0, 0, 0, 0);
   function clearAll() {
		isSelected = [0, 0, 0, 0, 0, 0]; //选择状态全部置0		
//所有复选框状态变为未选中状态
myForm.sp0.checked = false;
myForm.sp1.checked = false;
myForm.sp2.checked = false;
myForm.sp3.checked = false;
myForm.sp4.checked = false;
myForm.sp5.checked = false;
}
function checkOut() {
	var total = 0;//存放小计金额
	var count = 0;//存放选购产品件数
	for(var i = 0; i < isSelected.length; i++) {
		count += isSelected[i];
	}
	for(var i = 0; i < price.length; i++) {
	   total = total + price[i] * isSelected[i]//累计金额
	}
	alert("您所选购的" + count + "件,产品总价=" + total+"\n"+"请去支付！");
}
function shoppingCart() {
	//判断有多少个复选框被选中
var selectList = ""; //保存所选产品清单
	for(var j = 0; j < product.length; j++) {
	if(isSelected[j]) {//分行显示
	selectList += (j + 1) + "-" + product[j] + ",价值=" + price[j] + "\n";
              }
}
var info = (selectList == "") ? "您的购物车为空，请选购！" : selectList;
alert(info);//生成一个结算清单，显示输出				
}
function checkSelect(number) {
	var temp;//暂存复选框状态
	switch(number) {
	case 0:
	temp = myForm.sp0.checked;break;
	case 1:
	temp = myForm.sp1.checked;	break;
	case 2:
	temp = myForm.sp2.checked;	break;
	case 3:
	temp = myForm.sp3.checked;	break;
	case 4:
temp = myForm.sp4.checked;	break;
default:
       temp = myForm.sp5.checked;	break;
}
isSelected[number] = (temp) ? 1 : 0; //记录下选中产品，1-选中，0-未选		
}
</script>
</head>
<body>
<form name="myForm" method="post" action="">
<table align="center" border="1">
<caption>手机批发业务-商品备选区</caption>
<tr>
<td><img src="mobile_1.jpg" /><br />
<h4 name="h41">iPhone 6 32GB 金色 移动联通电信4G</h4><input type="checkbox" name="sp0" value="2576" onclick="checkSelect(0);">¥ 2576.00<br /></td>
<td><img src="moblie_2.jpg" /><br />
<h4 name="h421">OPPO R11 全网通 黑色版</h4>
<input type="checkbox" name="sp1" value="2999" onclick="checkSelect(1);">¥ 2999.00<br /></td>
<td><img src="moblie_3.jpg" /><br />

<h4 name="h43">Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机</h4>
<input type="checkbox" name="sp2" onclick="checkSelect(2);"> ¥ 3898.00<br /></td>
</tr>
<tr>
<td><img src="moblie_4.jpg" /><br />
<h4 name="h44">小米 红米手机4X 全网通版 2GB内存 16GB 香槟金</h4><input type="checkbox" name="sp3" value="699" onclick="checkSelect(3);"> ¥ 699.00
<br /></td>
<td><img src="moblie_5.jpg" /><br />
<h4 name="h45"> 小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金</h4>
<input type="checkbox" name="sp4" value="599" onclick="checkSelect(4);">¥ 599.00<br /></td>
<td><img src="moblie_6.jpg" /><br />
<h4 name="h46">小米 红米4X 全网通版 2GB内存 16GB 樱花粉</h4>
<input type="checkbox" name="sp5" value="699" onclick="checkSelect(5);">¥ 699.00<br /></td>
</tr>
<tr>
<td colspan="3">
<input class="myBtn" type="button" value="查看购物车" onclick="shoppingCart();">
<input class="myBtn" type="button" value="收银台结算" onclick="checkOut();">
<input class="myBtn" type="button" value="初始化参数" onclick="clearAll();">
</td>
</tr>
</table>
</form>
</body>
</html>

总结

  JavaScript是一种功能强大、使用简便的、具有安全性的客户端脚本语言。

    本章简要地介绍了JavaScript语言的历史和特点，详细讲解了JavaScript的标识符、变量、运算符和表达式、三种程序控制结构（包括顺序结构、分支结构和循环结构）及函数等相关知识。通过在HTML文档中嵌入JavaScript脚本语言，可以增强用户与网页之间的交互性，并在页面中实现各种特效，提高页面的观赏性。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++力扣题目 647--回文子串 516--最长回文子序列

C++力扣题目 647--回文子串 516--最长回文子序列

647. 回文子串 力扣题目链接(opens new window) 给定一个字符串&#xff0c;你的任务是计算这个字符串中有多少个回文子串。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 示例 1&#xff1a; 输入&#xff1a…
阅读更多...
Velocity

Velocity

引入 <dependency><groupId>org.apache.velocity</groupId><artifactId>velocity-engine-core</artifactId><version>2.3</version> </dependency> 加载 Test public void velo01() throws IOException {// 设置velocity资…
阅读更多...
Flutter插件开发指南01: 通道Channel的编写与实现

Flutter插件开发指南01: 通道Channel的编写与实现

Flutter插件开发指南01: 通道Channel的编写与实现 视频 https://www.bilibili.com/video/BV1ih4y1E7E3/ 前言 本文将会通过一个加法计算&#xff0c;来实现 Channel 的双向通讯&#xff0c;让大家有个一个体会。 Flutter插件 Flutter插件是Flutter应用程序与原生平台之间的桥…
阅读更多...
测试环境搭建整套大数据系统（六：搭建sqoop）

测试环境搭建整套大数据系统（六：搭建sqoop）

一&#xff1a;下载安装包 https://archive.apache.org/dist/sqoop/ 二&#xff1a;解压修改配置。 tar -zxvf sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz -C /opt cd /opt mv sqoop-1.4.7.bin__hadoop-2.6.0/ sqoop-1.4.7修改环境变量 vi /etc/profile#SQOOP_HOME export SQOOP_…
阅读更多...
远程连接 vscode 出错 “远程主机可能不符合 glibc 和 libstdc++ VS Code 服务器的先决条件”

远程连接 vscode 出错 “远程主机可能不符合 glibc 和 libstdc++ VS Code 服务器的先决条件”

原因&#xff1a; vscode 版本是 1.86&#xff0c;服务器上的 glibc 和 libstdc 版本不满足 要求(2.28 和 3.4.25)。 解决&#xff1a; 1、下载 1.85.2&#xff0c;解压直接运行 Code.exe。 2、回退 Remote-ssh 到 0.107.1。 参考&#xff1a; vscode 1.86版本远程ssh不兼容旧…
阅读更多...
关于运行flutter app 运行到模拟器出现异常提示

关于运行flutter app 运行到模拟器出现异常提示

Exception: Gradle task assembleDebug failed with exit code 1 解决方案&#xff1a; 1.讲当前文件的distributionUrl值改为 https://mirrors.cloud.tencent.com/gradle/gradle-7.4-all.zip
阅读更多...
【论文解读】Uncertainty Quantification of Collaborative Detection for Self-Driving

【论文解读】Uncertainty Quantification of Collaborative Detection for Self-Driving

Uncertainty Quantification of Collaborative Detection for Self-Driving 摘要引言方法问题定义方法概览Double-M 实验结论 摘要 在联网和自动驾驶汽车(CAVs)之间共享信息从根本上提高了自动驾驶协同目标检测的性能。然而&#xff0c;由于实际挑战&#xff0c;CAV 在目标检测…
阅读更多...
$attrs

$attrs

一、概念 vue官网定义如下： 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建…
阅读更多...
C语言翻译环境：预编译+编译+汇编+链接详解

C语言翻译环境：预编译+编译+汇编+链接详解

目录 翻译环境和运行环境 翻译环境 预处理&#xff08;预编译&#xff09; 编译 词法分析 语法分析 语义分析 汇编 链接 运行环境 ⭐翻译环境和运行环境 在ANSI C的任何⼀种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被…
阅读更多...
Java并发基础：原子类之AtomicIntegerFieldUpdater全面解析

Java并发基础：原子类之AtomicIntegerFieldUpdater全面解析

本文概要 AtomicIntegerFieldUpdater类提供了一种高效、简洁的方式来原子性地更新对象的volatile字段&#xff0c;无需使用重量级的锁机制&#xff0c;它通过基于反射的API实现了细粒度的并发控制&#xff0c;提升了多线程环境下的性能表现。 AtomicIntegerFieldUpdater核心概…
阅读更多...
选择VR全景行业，需要了解哪些内容？

选择VR全景行业，需要了解哪些内容？

近年来&#xff0c;随着虚拟现实、增强现实等技术的持续发展&#xff0c;VR全景消费市场得以稳步扩张。其次&#xff0c;元宇宙行业的高速发展&#xff0c;也在进一步拉动VR全景技术的持续进步&#xff0c;带动VR产业的高质量发展。作为一种战略性的新兴产业&#xff0c;国家和…
阅读更多...
【vue vue-seamless-scroll】解决vue-seamless-scroll鼠标悬浮才滚动或者只滚动一次就失效的问题

【vue vue-seamless-scroll】解决vue-seamless-scroll鼠标悬浮才滚动或者只滚动一次就失效的问题

解决问题&#xff1a;使用vue-seamless-scroll发现只有鼠标悬浮上去才滚动&#xff0c;而且滚动一次停止了 目标效果&#xff1a; 解决方案&#xff1a; 最后发现是因为数据需要在页面挂载好就赋值&#xff0c;否则页面在加载完成后&#xff0c;数据无法自动滚动。但因为数据…
阅读更多...
防火墙内容安全笔记

防火墙内容安全笔记

目录 DFI和DPI IDS和IPS 签名 AV URL过滤 HTTPS过滤 内容过滤 文件类型过滤 文件内容过滤 邮件过滤 VPN概述 DFI和DPI DFI和DPI技术 --- 深度检测技术 DPI DPI --- 深度包检测技术 --- 主要针对完整的数据包&#xff08;数据包分片&#xff0c;分段需要重组&#…
阅读更多...
百亿美金的设计，深度剖析 GitLab 的 Postgres 数据库 schema

百亿美金的设计，深度剖析 GitLab 的 Postgres 数据库 schema

原文链接 这篇文章写于 2022 年&#xff0c;前一年 GitLab 刚好完成 IPO。目前 GitLab 市值超过 100 亿美金&#xff0c;它的所有收入都来源于同名产品 GitLab&#xff0c;而这篇文章就是全面分析 GitLab 这个产品的数据库 schema。 我花了一些时间研究 GitLab 的 Postgres sch…
阅读更多...
【ArcGIS Pro二次开发】(82)：玩个花活_控规指标块生成

【ArcGIS Pro二次开发】(82)：玩个花活_控规指标块生成

一、要实现的效果 废话不多说&#xff0c;这次要实现的是类似控规指标块的标注&#xff1a; 这里只是示例&#xff0c;用了5个格子&#xff0c;做成9个格子也是可以的。 实现这个效果最关键的是要用到Pro中的复合标注。 关于复合标注的用法可以搜一下帮助里的【使用复合注释…
阅读更多...
网站常见的攻击类型有什么，如何针对性防护

网站常见的攻击类型有什么，如何针对性防护

在互联网时代&#xff0c;几乎每个网站都存在着潜在的安全威胁。这些威胁可能来自人为失误&#xff0c;也可能源自网络犯罪团伙所发起的复杂攻击。无论攻击的本质如何&#xff0c;网络攻击者的主要动机通常是谋求经济利益。这意味着不管是什么网站类型潜在的威胁一直都存在。 在…
阅读更多...
关于2025年的AMC8竞赛，你可能感兴趣的一些问题和信息

关于2025年的AMC8竞赛，你可能感兴趣的一些问题和信息

最近几天&#xff0c;我分享了一些历年的AMC8数学竞赛真题和解析&#xff0c;有一些家长和孩子第一次接触&#xff0c;产生了浓厚的兴趣&#xff0c;并且问了许多关于AMC8的问题。为了帮助更多家长和孩子了解这个比赛&#xff0c;我把常见的问题&#xff0c;以及大家可能感兴趣…
阅读更多...
[java基础揉碎]封装

[java基础揉碎]封装

封装介绍 封装(encapsulation)就是把抽象出的数据[属性]和对数据的操作[方法]封装在一起,数据被保护在内部&#xff0c;程序的其它部分只有通过被授权的操作[方法],才能对数据进行操作。 比如说我们用遥控器对电视的操作, 我们按电视机的开关键, 其实开关背后是一个复杂的过程,…
阅读更多...
Codeforces Round 927 (Div. 3)

Codeforces Round 927 (Div. 3)

F. Feed Cats 题目大意 给一长度为的数轴&#xff0c;个区间在数轴上选取一些点作为特殊点在满足个区间中&#xff0c;每个区间内只能有一个特殊点问最多能选多少个特殊点 解题思路 对于每个点有放或不放两种状态考虑表示位置可能放或不放的最优结果若不放&#xff0c;若放…
阅读更多...
unity hub初学配置

unity hub初学配置

1、安装Unity Hub 2、设置中文 3、安装编辑器 4、新建项目 5、新建完成后进入编辑器 6、 编辑器设置中文 editPreferencesLanguages选择中文
阅读更多...
最新文章

Copyright @ 2022~2023