JavaWeb——JavaScript部分对象

最新推荐文章于 2024-05-19 11:01:15 发布
最新推荐文章于 2024-05-19 11:01:15 发布
阅读量149 收藏
点赞数
分类专栏： Java Web 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun_shine_szc/article/details/105603192
版权

一、js的String对象

1、创建String对象

var str = "abc";

2、方法和属性（文档）

  • 属性 length：字符串的长度

方法：

(1)、与html相关的方法
  • bold()：加粗
  • fontcolor(): 设置字符串的颜色
  • fontsize(): 设置字体的大小
  • link(): 将字符串显示成超链接
str4.link("hello.html")
  • sub() sup(): 下标和上标
(2)、与java相似的方法
  1. concat(): 连接字符串
	//concat方法
	var str1 = "Hello";
	var str2 = "World";
	document.write(str1.concat(str2));
  1. charAt():返回指定指定位置的字符串
	var str3 = "abcdefg";
	document.write(str3.charAt(20)); //字符位置不存在，返回空字符串
  1. indexOf()： 返回字符串位置
	var str4 = "poiuyt";
	document.write(str4.indexOf("w")); //字符不存在，返回-1
  1. split()：切分字符串，成数组
  • 参数表示：以参数作为切分的标志。
	var str5 = "a-b-c-d";
	var arr1 = str5.split("-");
	document.write("length: "+arr1.length);
  1. replace() ： 替换字符串
  • 传递两个参数：
    • 第一个参数是原始字符
    • 要替换成的字符
	var str6 = "abcd";
	document.write(str6);
	document.write("<br/>");
	document.write(str6.replace("a","Q"));
  1. substr()和substring()
  • substr(m, n)表示从第m位开始，向后截取n位(包括第m位)。
  • substring(m,n)表示从第m位开始，到第n位结束，但不包含最后一位。
	var str7 = "abcdefghuiop";
	document.write(str7.substr(5,5));  //fghui  从第五位开始，向后截取五个字符
	document.write("<br/>");
	document.write(str7.substring(3,5)); //de  从第几位开始到第几位结束  [3,5)

二、js的Array对象

1、创建数组（三种）

  • var arr1 = [1,2,3];
  • var arr2 = new Array(3); //长度是3
  • var arr3 = new Array(1,2,3); //数组中的元素是1 2 3
  • var arr = []; //创建一个空数组

属性：length：查看数组的长度

方法：

1、concat方法： 数组的连接
	var arr11 = [1,2,3];
	var arr12 = [4,5,6];
	document.write(arr11.concat(arr12));
2、join()：根据指定的字符分割数组
	var arr13 = new Array(3);
	arr13[0] = "a";
	arr13[1] = "b";
	arr13[2] = "c";

	document.write(arr13);
	document.write("<br/>");
	document.write(arr13.join("-"));
3、push():向数组末尾添加元素，返回数组的新的长度
  • 如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去
	//push方法
	document.write("<hr/>");
	var arr14 = new Array(3);
	arr14[0] = "Rose";
	arr14[1] = "Lily";
	arr14[2] = "Brown";
	document.write("old arr：" + arr14);
	document.write("<br />");
	document.write("old length：" + arr14.length);

	document.write("<br />");
	document.write("new length：" + arr14.push("Lucas"));
	document.write("<br />");
	document.write("new arr：" + arr14);

	document.write("<hr/>");
	var arr15 = ["aaa",'bbb',"ccc"];
	var arr16 = ["ddd","ppp"];
	document.write("old arr：" + arr15);
	document.write("<br />");
	document.write("old length：" + arr15.length);

	document.write("<br />");
	document.write("new length：" + arr15.push(arr16));
	document.write("<br />");
	document.write("new arr：" + arr15);
	document.write("<br />");
	for(var i = 0; i < arr15.length; i++){
		document.write(arr15[i] + "&emsp;");
	}
4、pop()：表示 删除最后一个元素，返回删除的那个元素
	var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
	document.write("old array: "+arr17);
	document.write("<br/>");

	document.write("return: "+arr17.pop());
	document.write("<br/>");
	document.write("new array: "+arr17);
5、reverse():颠倒数组中的元素的顺序
	//reverse方法
	document.write("<hr/>");
	var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];
	document.write("old array: "+arr18);
	document.write("<br/>");
	document.write("new array:"+arr18.reverse());

三、js的Date对象

1、在java里面获取当前时间
	Date date = new Date();
	//格式化 
	//toLocaleString()   //2015年4月17日 11:17:12
  • java中，toLocalString()已经被SimpleDateFormat取代。
2、js里面获取当前时间
  • var date = new Date();
	//获取当前时间
	var date = new Date();
	document.write(date);  // Fri Apr 17 10:47:46 UTC+0800 2015 
	
	//转换成习惯的格式
	document.write("<hr/>");
	document.write(date.toLocaleString());
3、获取当前的年方法
  • getFullYear()：得到当前的年
	document.write("year: "+date.getFullYear());
4、获取当前的月方法
  • getMonth()：获取当前的月
    • 返回的是 0-11月，如果想要得到准确的值，要加1
		var date1 = date.getMonth()+1;
		document.write("month: "+date1);
5、获取当前的星期
  • getDay()：星期,返回的是 (0 ~ 6)
    • 把星期日作为一周的第一天，星期日返回的是 0， 而星期一到星期六 返回的是 1-6
		document.write("week: "+date.getDay());
6、获取当前的日
  • getDate()：得到当前的天 1-31
	document.write("day: "+date.getDate());
7、获取当前的小时
  • getHours()：获取小时
	document.write("hour: "+date.getHours());
8、获取当前的分钟
  • getMinutes()：分钟
	document.write("minute: "+date.getMinutes());
9、获取当前的秒
  • getSeconds()：秒
	document.write("second: "+date.getSeconds());
10、获取毫秒数

  • getTime()：返回的是1970年 1月 1日 至今的毫秒数。

  • 应用场景：使用毫秒数处理缓存的效果

    • http://www.baidu.com?毫秒数

四、js的Math对象

  • 数学的运算
    • 里面的都是静态方法，使用可以直接使用 Math.方法()
    • ceil(x)：向上舍人
    • floor(x)：向下舍人
    • round(x)：四舍五入
    • random()：得到随机数（伪随机数）
	Math.random();
  • 得到0-9的随机数
	Math.floor(Math.random()*10));

五、js的全局函数

  • 由于不属于任何一个对象，直接写名称使用
1、eval()：执行js代码（如果字符串是一个js代码，使用方法直接执行）
	var str = "alert('1234');";
	//alert(str);
	eval(str);
2、encodeURI() ：对字符进行编码
  • %E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa1234
  • decodeURI() ：对字符进行解码
  • encodeURIComponent()、decodeURIComponent()和encodeURI()、decodeURI()的区别在于不需要编码的字符个数不同。
3、isNaN():判断当前字符串是否是数字
  • 如果是数字，返回false
  • 如果不是数字，返回true
	var str2 = "aaaa";
	alert(isNaN(str2));
4、parseInt()：类型转换
	var str3 = "-1";
	document.write(parseInt(str3)+1);

六、js的函数的重载

  • 什么是重载？方法名相同，参数不同

  • js的重载是否存在？ 不存在

    • 调用最后一个方法
    • 把传递的参数保存到 arguments数组里面

  • js里面是否存在重载？(面试题目)

    1. js里面不存在重载。
    2. 但是可以通过其他方式模拟重载的效果 （通过aruguments数组来实现）
	function add() {
		if (arguments.length == 2) {
			return arguments[0] + arguments[1];
		} else if (arguments.length == 3) {
			return arguments[0] + arguments[1] + arguments[2];
		} else if (arguments.length == 4) {
			return arguments[0] + arguments[1] + arguments[2] + arguments[3];
		} else {
			return 0;
		}
	}

七、js的bom对象

  • bom：broswer object model: 浏览器对象模型

  • 有哪些对象？

1、navigator： 获取客户机的信息（浏览器的信息）
	navigator.appName
	document.write(navigator.appName);
2、screen: 获取屏幕的信息
	document.write(screen.width);
	document.write("<br/>");
	document.write(screen.height);
3、location: 请求url地址
  • href属性：
1、获取到请求的url地址
document.write(location.href);
2、设置url地址
  • 页面上放置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个页面
	function href1(){
			location.href = "hello.html";
	}
	<input type="button" value="tiaozhuan" onclick="href1();"/>
  • 鼠标点击事件 οnclick=“js的方法”
4、history：请求的url的历史记录

  • 创建三个页面
    1、创建第一个页面 a.html 写一个超链接 到 b.html
    2、创建b.html 超链接 到 c.html
    3、创建c.html

  • 到访问的上一个页面

	function back1(){
		// history.back();
		history.go(-1);
	}
  • 到访问的下一个页面
	function next1(){
		// history.forward();
		history.go(1);
	}
5、window
  • 窗口对象
  • 顶层对象（所用的bom对象都是在window里面操作的）
方法：

  • window.alert()： 页面弹出一个框，显示内容

    • 简写alert()

  • confirm()： 确认框

var flag = window.confirm("显示的内容");
  • prompt()： 输入的对话框
	window.prompt("please input : ","0");
	window.prompt("在对话框上显示的内容","输入框里面的默认值");
  • open()：打开一个新的窗口
    • open(“打开的新窗口的地址url”,“空”,“窗口特征，比如窗口宽度和高度”)
    • 创建一个按钮，点击这个按钮，打开一个新的窗口
window.open("hello.html","","width=600,height=100");
  • close()：关闭窗口(浏览器兼容性比较差)
	window.close();
做定时器：
  • setInterval(“js代码”,毫秒数)，1秒=1000毫秒
    • 下面代码表示每三秒，执行一次alert方法
	window.setInterval("alert('123');",3000);
  • setTimeout(“js代码”,毫秒数)
    • 表示在毫秒数之后执行，但是只会执行一次
    • 下面代码表示四秒之后执行js代码，只会执行一次
	window.setTimeout("alert('abc');",5000);
  • clearInterval(): 清除setInterval设置的定时器
	var id1 = setInterval("alert('123');",3000);//通过setInterval会有一个返回值
	clearInterval(id1);
  • clearTimeout() : 清除setTimeout设置的定时器
	var id2 = setTimeout("alert('abc');",4000);
	clearTimeout(id2);

八、js的dom对象

1、dom：document object model: 文档对象模型

  • 文档：超文本文档（超文本标记文档），如html 、xml
  • 对象：提供了属性和方法
  • 模型：使用属性和方法操作超文本标记型文档

2、dom对象的封装与解析

  • 可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

  • 想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象，即需要把html里面的标签、属性、文本内容都封装成对象。

  • 要想对标记型文档进行操作，解析标记型文档

  • 解析过程
    根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象：

    • document对象：整个文档
    • element对象：标签对象
    • 属性对象
    • 文本对象
    • Node节点对象：这个对象是以上这些对象的父对象，如果在对象里面找不到想要的方法，这个时候到Node对象里面去找。

3、DOM模型有三种：

  • DOM level 1：将html文档封装成对象。
  • DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
  • DOM level 3：支持xml1.0的一些新特性。

DHTML：是很多技术的简称

  • html：封装数据
  • css：使用属性和属性值设置样式
  • dom：操作html文档（标记型文档）
  • javascript：专门指的是js的语法语句（ECMAScript）

九、document对象

表示整个的文档

常用方法
1、write()方法：
  • 向页面输出变量（值）
  • 向页面输出html代码
	var str = "abc";
	document.write(str);
	document.write("<hr/>");
2、getElementById();
  • 通过id得到元素（标签）
  • 传递的参数是标签里面的id的值
	// 使用getElementById得到input标签
	var input1 = document.getElementById("nameid");  
	// 得到input里面的value值
	alert(input1.name);   //标签对象.属性名称
	// 向input里面设置一个值value
	input1.value = "bbbbb";
3、getElementsByName();
  • 通过标签的name的属性值得到标签
  • 返回的是一个集合（数组）
  • 传递的参数是标签里面的name的值
	//使用getElementsByName得到input标签
	var inputs = document.getElementsByName("name1");  
	//alert(inputs.length);
	//遍历数组
	for(var i=0;i<inputs.length;i++) {   //通过遍历数组，得到每个标签里面的具体的值
		var input1 = inputs[i];  //每次循环得到input对象，赋值到input1里面
		alert(input1.value);    //得到每个input标签里面的value值
	}
4、getElementsByTagName(“标签名称”);
  • 通过标签名称得到元素
	//演示getElementsByTagName
	var inputs1 = document.getElementsByTagName("input");  //传递的参数，是标签名称
	//alert(inputs1.length);
	//遍历数组，得到每个input标签
	for(var m=0;m<inputs1.length;m++) {
		//得到每个input标签
		var input1 = inputs1[m];
		//得到value值
		alert(input1.value);
	}
注意
  • 只有一个标签，这个标签只能使用name获取到，这个时候，使用getElementsByName返回的是一个数组，但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值。
	//通过name得到input标签
	var inputs2 = document.getElementsByName("name11")[0];
	alert(inputs2.value);

	var inputss = document.getElementsByTagName("input")[0];
	alert(inputss.value);

十、案例：window弹窗案例

实现过程

1、创建一个页面
  • 有两个输入项和一个按钮
  • 按钮上面有一个事件：弹出一个新窗口 open方法
2、创建弹出页面
  • 表格
  • 每一行有一个按钮和编号和姓名
  • 按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置
	//实现s1方法
	function s1(num1,name1) {
		//需要把num1和name1赋值到window页面
		//跨页面的操作  opener：得到创建这个窗口的窗口 得到window页面
		var pwin = window.opener; //得到window页面
		pwin.document.getElementById("numid").value = num1;
		pwin.document.getElementById("nameid").value = name1;
		//关闭窗口
		window.close();
	}

  • opener:属性，获取创建当前窗口的窗口

  • 做这个案例时候会有一个问题
    由于我们现在访问的是本地文件，js安全性，谷歌浏览器、火狐浏览器安全级别很高，不允许访问本地文件。在实际开发中，没有这样的问题，实际中不可能访问本地的文件。

静水流深i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java中var是什么意思_Java 10中的var是什么？
weixin_35934226的博客
02-13 7246
小编典典var 两种语言在概念上都有某种相似的目的，但有一些重要的区别。JavaScript是一种动态类型化的语言。变量没有类型信息。它对其包含的内容没有任何限制。它只是一个值的持有人，该值可以是任何类型。Java是一种静态类型的语言，而对于所有这些语句而言，情况恰恰相反。程序员必须预先说出他们的变量可以容纳什么类型。它们可能像Object(每个类都Object隐式地扩展)一样宽容，或者像一样具体...
JavaWeb——JavaScript
qq_45821255的博客
06-25 4438
本文介绍了前端相关的基础知识，适合主要学习后端而想快速把前端知识过一遍。
Java中var类型的用法和使用var的注意事项和使用var的优缺点
热门推荐
lzh_99999的博客
10-03 5万+
Java中var是Java10版本新出的特性，用它来定义局部变量。 使用var 定义变量的语法： var 变量名 = 初始值； 如果代码： var a = 20； var a =8.9； 这样的代码会报错 显示int到double的转换； Java是强类型语言，每个变量都有固定的变量类型。 var是什么： var不是关键字，它相当于是一种动态类型； var动态类型是编译器根据变量所赋的值来推断类...
JavaWeb——JavaScript学习笔记
liuhao19991213的博客
05-16 357
JavaScript 一、JavaScript快速入门 1.简介 跨平台、面向对象的脚本语言 学习文档：(https://www.w3school.com.cn/js/js_htmldom.asp) 2.引入方式 01.内部脚本 将 JS代码定义在HTML页面中 <script> alert("hello js"); </script> 在 HTML 文档中可以在任意地方，放置任意数量的02.外部脚本 将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中 ale
JavaWeb——JavaScript（JS）
HL031125的博客
05-19 830
Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
JavaWeb——JavaScript基础知识
ZhangJiawen的博客
12-09 298
一、JavaScript简述 HTML：用来写网页； CSS：美化页面； JavaScript：控制页面特效； JavaScript：脚本语言；要嵌入到其他语言，结合使用；直接被浏览器解析执行；没有访问系统文件权限（安全）；无需编译，直接由上到下解释执行； Java：编程语言；独立运行；先编译再执行； Java 和 JavaScript 没有任何直接关系； 二、JavaScript组成 ECMAScript：（核心）规定了 JS 的语法和基本对象； DOM：文档对象模型：处理网页内容的方法和接口；
javaweb——JavaScript
MY_NEW_LIFE的博客
06-23 1108
目录一、JavaScript 介绍二、JavaScript 和 html 代码的结合方式1、第一种方式2、第二种方式三、变量四、运算1、关系（比较）运算2、逻辑运算五、数组（*****重点）六、函数(*****重点)1、函数的二种定义方式2、函数的 arguments 隐形参数（只在 function 函数内）七、JS 中的自定义对象1、Object 形式的自定义对象2、{}花括号形式的自定义对象八、js 中的事件1、onload 加载完成事件2、onclick 单击事件3、onblur 失去焦点事件4、o
JavaWeb——JavaScript常用操作
i_am_handsome_的博客
11-11 319
JavaScript基本介绍与HTML的结合变量关系运算逻辑运算数组函数局部变量与全局变量定义函数隐形参数自定义对象事件事件的注册静态注册动态注册DOM模型Document 对象中的方法节点 基本介绍 Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript 代码。 JS 是Netscape 网景公司的产品，最早取名为LiveScript;为了吸引更多java 程序员。更名为JavaScript。JS 是弱类型，Java 是强类型。 特点：
JavaWeb——JavaScript的常用部分知识点
sun_shine_szc的博客
04-16 151
对于我而言，学习JavaScript显得比css更加重要。 Java和JavaScript的关系就相当于是雷锋和雷峰塔的关系，他们之间的关联性很小。因此，JavaScript的笔记都是重点内容。
javaweb——serlvet简单登录案例.rar
11-28
本案例"javaweb——serlvet简单登录案例"是用于演示如何使用Servlet实现一个基本的用户登录功能。 首先，Servlet生命周期包括加载、初始化、服务、销毁四个阶段。在这个登录案例中，我们关注的是初始化和服务阶段。...
javaweb大作业——简单的学生成绩管理系统
10-21
`StuSystem`可能是一个包含源代码的目录，包括以下部分： 1. **前端页面**：使用HTML、CSS和JavaScript编写，负责展示用户界面，处理用户交互，与后端通过AJAX通信。 2. **Servlet**：JavaWeb中的服务器端程序，...
javaweb课程设计——服装商城
07-14
【JavaWeb课程设计——服装商城】是一个基于SSH（Spring、Struts、Hibernate）框架和MySQL数据库的电商项目实例。这个项目旨在帮助学习者理解和实践如何构建一个完整的网上购物平台。SSH框架是JavaWeb开发中常用的...
javaweb项目——岁月联盟留言本
09-08
【标题】"javaweb项目——岁月联盟留言本"是一个基于JavaWeb技术开发的实际应用项目，主要用于实现在线的用户互动和信息交流。这个项目对于学习和提升JavaWeb编程技能的开发者来说，是一个非常有价值的学习资源。 ...
独门架构——JavaWeb开发应用详解（电子版）
07-18
《独门架构——JavaWeb开发应用详解》是一本深度探讨JavaWeb开发技术的专业书籍，旨在帮助已经具备Java基础知识的学习者和开发者进一步提升在Web领域的专业技能。本书详细讲解了JavaWeb开发中的各种核心概念、技术和...
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值