首页 > 编程语言 >二级web基础操作题练习(6)——嵌入Javascript代码

二级web基础操作题练习(6)——嵌入Javascript代码

时间:2024-06-12 18:31:40浏览次数:25  
标签:web const 操作题 Javascript ----- split str obj result

-----要求----- 

用JavaScript编写如图1所示页面,当在第一个文本框中输入URL http://test.cn/index.jsp?key0=0&key1=1&key2=2,点击按钮“解析参数“后,在下面的三个文本框中分别显示解析出来的参数,如图2所示。

图1

图2 


-----代码示例-----

<html>
<head>
<!-- 设置字符编码为 gb2312 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<!-- http-equiv 属性相当于 HTTP 头部中的一个字段,它设置了文档的内容类型Content-Type,告诉浏览器如何解释文档的字节流 -->
<script> 
function parseQueryString(url) {
  // 定义了一个名为 parseQueryString 的函数,该函数接受一个参数 url。
  var obj = {};
  // 初始化一个空对象 obj,用于存储解析后的查询参数。
  // 将URL按照'?'分割为两个部分
  var a = url.split('?');
  // 如果没有查询参数,直接返回
  // 即检查分割后的数组长度。如果长度为1,说明URL中没有查询参数,直接返回。
  if(a === 1) return;
  // 将查询参数部分按照'&'分割为多个键值对
  var b = a[1].split('&');
  for(var i = 0, length = b.length; i < length; i++) {
    // 将每个键值对按照'='分割,并将结果存入对象
    var c = b[i].split('=');
    // 使用 split('=') 方法将每个键值对分割成键和值,并将它们存入对象 obj 中(键作为属性名,值作为属性值)
    obj[c[0]] = c[1];
  }
  // 将解析的参数值填充到页面表单中
  document.test.key0.value=obj.key0;
  document.test.key1.value=obj.key1;
  document.test.key2.value=obj.key2;  
}
</script>
</head>
<body>
<!-- 创建一个名为 "test" 的表单 -->
<form name="test">
<!-- 输入要解析的 URL -->
输入URL:<input type="text" name="t1" size="50" ></input>
<!-- 点击按钮触发解析函数 -->
<input type="button" value="解析参数" onclick="parseQueryString(document.test.t1.value)"></input><BR>
<BR>
key0:    <input type="text" name="key0" size="20" ><BR>
key1:    <input type="text" name="key1" size="20" ><BR>
key2:    <input type="text" name="key2" size="20" ><BR>
</form>
</body>
</html>

-----HTML中嵌入JavaScript代码时常用函数和命令----- 

http://t.csdnimg.cn/jqcC4icon-default.png?t=N7T8http://t.csdnimg.cn/jqcC4


----- JavaScript 中的split 字符串操作-----

split() 方法被用来将一个字符串按照指定的分隔符分割成子字符串数组,是字符串操作中非常常见且实用的一个方法:

// 按逗号分
const str = "apple,banana,cherry";
const result = str.split(",");
console.log(result); // 输出 ["apple", "banana", "cherry"]
// 同理,还可以按空格分

// 结合正则表达,按多个分隔符分割(空格、逗号和点号)。“ + ”确保了即使有多个连续的空格、逗号或点,也会被视为一个分隔符来进行分割操作
const str = "apple banana, cherry.apple";
const result = str.split(/[ ,.]+/);
console.log(result); // 输出 ["apple", "banana", "cherry", "apple"]

// 限制分割次数
const str = "one,two,three,four";
const result = str.split(",", 2);
console.log(result); // 输出 ["one", "two"]

// 注意比较以下两种情况
const str = "hello";
const result = str.split("");
console.log(result); // 输出 ["h", "e", "l", "l", "o"]

const str = "hello";
const result = str.split(",");
console.log(result); // 输出 ["hello"]

 

标签:web,const,操作题,Javascript,-----,split,str,obj,result
From: https://blog.csdn.net/weixin_68085527/article/details/139599344

相关文章

  • Webphser Applcation Server Dmgr无法正常启动
    好久不来园子,也好久没处理过WAS问题了,今天客户想部署应用,发现Dmgr无法访问,去重启,无法正常启动。直接上日志:[24-6-123:00:55:025CST]00000009MultiScopeRecA  CWRLS0008E:正在将恢复日志标记为“失败”。[1transaction][24-6-123:00:55:026CST]00000009MultiScope......
  • JavaScript常用的流程控制语句
    在JavaScript中,有以下几种常用的流程控制语句:if...else:当if条件为假时,可以使用else语句执行另一段代码。if(condition){//条件为真时执行的代码}else{//条件为假时执行的代码}if...elseif...else:可以链式使用多个if和elseif来根据多个条件执行不......
  • Java (WebDataBinder 枚举转换)
    前沿webDataBinder枚举类型转换 前端和后端数据请求的时候枚举类型 webDataBinder依赖于Converter实现类型转换,若Controller方法声明的@RequestParam参数的类型不是stringwebDataBinder就会自动进行数据类型转换。SpringMVC提供了常用类型的转换器,例如string到Integer、......
  • 飞书Webhook触发操作指南,实现事件驱动型工作流自动化
    本文提供了利用数据触发FeishuWebhook的具体操作指南,包括Webhook的设置以及编写触发代码的方法,为读者提供了实践参考,希望能帮助解决你目前遇到的问题。描述用于使用数据触发FeishuWebhook。例如,如果来自上游的数据是[age:12,name:tyrantlucifer],则请求的body内容将是......
  • Web应用课 第二讲 CSS定义方式、选择器、颜色
    定义方式行内样式表:只作用在单个元素<!--CSS定义方式1:行内样式表--><imgsrc="/static/images/mountain.jpg"alt="山1"width="300"><imgsrc="/static/images/mountain.jpg"alt="山2"style="width:30%;&quo......
  • JavaWeb开发基础 (5) :后端框架进阶(事务管理、AOP、Spring原理、Maven高级)
    JavaWeb开发基础:后端框架进阶——事务管理、AOP、Spring原理、Maven高级文章目录1事务管理1.1Spring事务管理1.2rollbackFor和propagation2AOP2.1AOP快速入门2.2核心概念2.3通知类型2.4通知顺序2.5切入点表达式[email protected]连接点案......
  • JavaScript判断数据为对象(转载)
    1.javaScript判断数据为对象1.1. Object.prototype.toString.call()2.JavaScript如何判断数据类型2.1. typeof2.2. Array.isArray()2.3. instanceof2.4. Object.prototype.toString.call()2.5. constructor2.6. 使用ES6的Symbol.toStringTa......
  • 计算机毕业设计项目推荐,29042 基于Web的医院护理管理系统的设计(开题答辩+程序定制+全
    摘 要随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,医院当然也不例外。医院预约管理系统是以实际运用为开发背景,运用软件工程原理和开发方法,采用Java技术构建的一个管理系统。整个开发过程首先对软件系统进......
  • VS2022 WinFrom調用WebService
    調用方法: 引用方法在.net6.0中调用远程服务器web服务,Webservices(xxx.asmx),RESTful风格,2种解决方案。_.net_Tanjia_kiki-上海城市开发者社区(csdn.net).NET6VS2022连接WebService生成代理客户端代码_vs2022中wcf-CSDN博客......
  • 基本数据类型 String,null 和 undefined,运算符,流程控制,JavaScript之数组,数组常用
    Ⅰ基本数据类型String【一】String类型String类型就是字符串类型【二】定义变量【1】常规变量var变量名="变量值";//一般用这种var变量名='变量值';不支持三引号【2】可以先声明不赋值先用varb;再对变量b赋值varb='6';【三】字符串的格式化输出语法......