投稿
  1. 首页
  2. java

Java前端学习（一）JavaScript脚本语言基础

code • 2022-5-15 • java • 阅读 18

Java前端学习（一）JavaScript脚本语言基础,第1张

JavaScript脚本语言基础
  • 前言
  • 一、JavaScript简介
    • 1.应用
    • 2.特点
    • 3.示例
    • 4.补充
  • 二、语法基础
    • 1.数据类型
    • 2.表达式和运算符
    • 3.流程控制语句
    • 4.函数
  • 三、对话框
    • 1.对话框
  • 四、事件驱动
    • 1.常见事件
    • 2.事件的处理方法
  • 五、内置对象
    • 1.Array数组对象
    • 2.String字符串对象
    • 3.Date日期对象
    • 4.Math数学对象
    • 5.RegExp正则表达式对象
    • 6.自定义对象
  • 六、浏览器对象
    • 1.浏览对象（BOM）
    • 2.文档对象（DOM）

前言

本章主要介绍了JavaScript相关的知识和应用，篇幅较长但干货满满，内容较为基础，适合初学者以及想要复习的家人们，希望本篇能帮助到你，我们的未来前程似锦。

一、JavaScript简介 1.应用

客户端应用
可以将客户端的JavaScript脚本程序嵌入或链接到HTML文件。
服务器端应用
JavaScript可以用来开发服务器端的Web应用程序。当用户通过浏览器请求URL时，服务器执行JavaScript脚本程序，将生成的数据以HTML格式返回浏览器。

2.特点

（1）脚本编程语言：与HTML代码结合在一起，通常由浏览器解释执行。
（2）嵌套在HTML中：通常位于标签之间。
（3）弱数据类型：JS定义变量时无需指定该变量类型，在使用时随其值的改变而改变。
（4）基于对象的语言： JavaScript的许多功能来自于脚本环境中对象的方法与脚本的相互作用。
（5）安全性：在HTML页面中JavaScript不能访问本地硬盘，也不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。
（6）跨平台：在HTML页面中JavaScript的执行环境依赖于浏览器本身，只要安装了支持JavaScript的浏览器， JavaScript程序就可以执行。
（7）基于事件：事件驱动是指在页面中执行某种 *** 作时所产生的动作。

3.示例

在HTML中嵌入JavaScript：
在HTML中通过引入JavaScript代码。当浏览器读取到

<html>
       <head>
	<title>处理事件-HTML标记方式title>
	<script language=javascript>
		function alts() {
	   		 alert("你要小心了!");
		}
	script>
        head>
        <body>
	<form name="form1">
  		<input type="button" value="问侯" onclick="alert('您好!');"/><br/><br/>
 		<input type="button" value="警告" onclick="alts();"/><br/><br/>
 		<input type="button" value="百度" onclick="window.open('http://www.baidu.com')"/>
	form>
        body>
html>
五、内置对象

可以使用四种对象，即内置对象、浏览器对象、自定义对象和ActiveX对象。
内置对象和浏览器对象经常使用，而自定义对象不常用到，典型的如jQuery（即一个JavaScript 类库，简化了JavaScript 编程），ActiveX对象用于在浏览器中实现某些特殊功能，如安装插件等。

1.Array数组对象
  1. 数组对象的创建

与Java语言不同的是：在JavaScript中，定义数组时不需要指定数组的数据类型，而且可以将不同类型的数据存放到一个数组中。
语法：
new Array();
new Array(size);
new Array(element0,element1…elementn);
（1）使用无参构造函数创建数组时，返回一个空数组，数组长度为0；
（2）使用一个参数的构造函数Array(size)创建数组时，返回一个长度为size的数组，且数组中的元素均为undefined；
（3）使用多个参数的构造函数创建数组时，使用参数指定的值来初始化数组，数组的长度等于参数的个数。

var num=new Array();
num[0]="a";
num[1]="b";
var food=new Array("川菜","鲁菜","粤菜");
var movie=new Array(8);
var foods=["兰州拉面","宫保鸡丁","西湖醋鱼"];
  1. 数组对象的属性

constructor：返回对创建此对象的构造函数的引用
length：数组的长度
prototype：为对象添加属性和方法

constructor属性：当获取constructor属性时，会返回其所指向的构造函数。
arrayConstructor.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
   <script type="text/javascript">
       var words=new Array("a","b","c");
       if(words.constructor==String)
       {
        alert("words是个字符串！");
       }
       else if(words.constructor==Array)
       {
        alert("words是个数组对象，数组中元素的个数是："+words.length+"\n------------------\n"+words.constructor);
       }
       else if(words.constructor==Date)
       {
        alert("words是个日期对象！");
       }
   script> 
body>
html>

运行结果：

  1. 数组对象的常用方法

    （1）contact()方法：该方法用于连接两个或多个数组，返回合并后的新数组，而原数组保持不变。

语法格式：
arrayObject.concat(param1,param2,…,paramN)
注意：
concat()方法至少需要提供一个param参数；
参数param可以是具体的值，也可以是数组对象；
多个参数之间使用逗号隔开；
concat()方法返回的是合并后的新数组，原数组保持不变。
例：words.concat(newMovie);

（2）join()方法：用于把数组中的所有元素放入一个字符串中，并通过分隔符隔开。

语法格式：
arrayObject.join(separator)
注意：
参数separator可选，作为数组元素之间的分隔符，默认为逗号；
join()方法的返回形式是字符串，使用separator分隔符将数组中的元素进行连接。
例：words.join(“_”) //元素间使用下划线进行分割。

（3）push()方法：push()方法用于向数组末尾添加一个或多个元素，返回数组的新长度。

语法格式：
arrayObject.push(newElement0,newElement1,…newElementN)
注意：
newElement参数至少有一个；
push()方法将返回数组的新长度；
根据参数的顺序将参数依次追加到数组的尾部，无须创建新的数组。

（4）slice()方法：slice()方法用于从数组中返回选定的元素。

语法格式：
arrayObject.slice(start,[end])
注意：
参数start是必须的，表示元素选取的开始位置；
参数end可选，表示元素选取的结束位置（不包括end）,当参数end省略时，将选取从start开始到数组末尾的所有元素；
start和end允许取负数，-1表示字符串的最后一个字符，-2表示倒数第二个字符，以此类推。

（5）sort()方法：sort()方法用于对数组的元素进行排序。

语法格式：
arrayObject.sort([sortby])
注意：
参数sortby是函数，可选，用于规定排序的方式；
当参数sortby省略时，会按照字符编码的顺序进行排序；
数组在原始数组基础上进行排序，不会生成新的副本；

（6）splice()方法：splice()方法用于向数组中添加1~n个元素或从数组中删除元素。

语法格式：
arrayObject.splice(index,howmany,[item1,…,itemN])
注意：
参数index必须，规定添加或删除元素的指定位置，index为负数时，从数组末尾向前计数，例如-1表示字符串的最后一个字符，-2表示倒数第二个字符，其他以此类推。
参数howmany必须，表示要删除元素的数量，0代表不删除数据；
参数列表item1，…，itemN可选，表示向数组中添加或替换的新元素；
该方法在原数组基础上实现，不会生成新的副本。

  1. 二维数组

在JS中，没有二维数组或多维数组，不能通过new Array()方式来创建二维数组，可以通过在一维数组中存放另一个数组来模拟实现二维数组。数组中存放的数据可以是数值型、字符型、布尔型、对象和数组等类型。
示例1：
var array=new Array();
array[0]=new Array(1,2,3);
array[1]=[4,5,6];
array[2]='情不知所起，一往而深。’;
array[3]=88;
示例2：
var movies=[[1,2,3],[4,5,6],[7,8,9]];

2.String字符串对象

String对象：该对象提供了对字符串进行处理的属性（只有一个：length）和方法。例如：toLowerCase()、toUpperCase()、substr()。

  1. 字符串对象的创建
    （1）字面量方式创建一个字符串

var name=“如鱼得水”; //类型为string类型
var address="中国 云南 昆明 "; //类型为string类型
PS:使用单引号或双引号均可生成一个字符串。

（2）new方式
new方式创建字符串对象是通过调用String()构造函数来完成的，并返回一个String对象。

var movieName=new String(“想见你”); //类型为String对象
var bestFriend=String(“酱酱”); //类型为string类型

在JavaScript中，string 和 String 的区别如下：

在JavaScript中，允许使用“对象.属性”的形式对属性进行 *** 作。
2. 字符串对象的常用方法

字符串中常用的方法有indexOf()、lastIndexOf()、slice()、subString()和split()。
（1）indexOf()：indexOf()方法用于检索子串在字符串中首次出现的位置。

语法格式：
stringObject.indexOf(searchValue,[fromIndex])


（2）lastIndexOf()：lastIndexOf()方法用于从后向前对字符串进行检索，并返回子串在字符串中首次出现的位置。

语法格式：
stringObject.lastIndexOf(searchValue,[fromIdex])


（3）slice()：slice()方法用于从字符串中抽取一部分内容。

语法格式：
stringObject.slice(start,[end])

（4）subString()：substring()方法与slice()方法相似，也是从字符串中抽取一部分。

语法格式：
stringObject.substring(start,[stop])

（5）split()：split()方法用于把一个字符串分割成一个字符串数组。

语法格式：
stringObject.split(separator,[howmany])


（6）转义字符

3.Date日期对象

Date对象：该对象没有提供直接访问的属性，主要提供获取和设置日期和时间的方法。例如，getFullYear() 、getMonth() 、getDate () 、getDay () 。

  1. Date对象的创建
    JavaScript通过日期对象（Date）来 *** 作日期和时间。通过日期对象的构造函数创建一个系统当前时间或指定时间的日期对象。

语法格式：
new Date();
new Date(millisenconds);
new Date(yyyy,MM,dd);
new Date(yyyy,MM,dd,hh,mm,ss);
new Date(MM/dd/yyyy hh:mm:ss);
new Date(“month dd,yyyy”);
new Date(“month dd,yyyy hh:mm:ss”);

  1. Date对象的常用方法


    （1）setFullYear()方法：setFullYear()方法用于设置年份（包括月份和日期）。

语法格式：
dataObject.setFullYear(year,month,day)


（2）setHours()方法：用于设置指定时间的小时（包括分钟、秒、毫秒）

语法格式：
dataObject.setHours(hour,min,sec,millisec)

4.Math数学对象

Math对象：该对象的作用是执行常见的算数任务。例如：abs()、max()、min()等。

  1. Math对象的创建
    与String、Date不同，Math对象没有提供构造方法，可以直接使用Math对象。

  2. Math对象的常用方法
    Math对象还提供一些用作算术运算的方法，例如取绝对值、正弦、余弦、反正弦和反余弦。

5.RegExp正则表达式对象

正则表达式是一种字符串匹配的模式，通过单个字符串来描述和匹配一系列符合某个句法的规则。

  1. RegExp对象的创建
    创建一个RegExp对象有两种方式：直接量方式和构造函数方式。

语法格式：
var reg=/pattern/attributes;//直接量方式
var regExp=new RegExp(pattern,attributes);//构造函数方式
注意：
参数pattern是一个字符串或表达式，表示正则表达式的模式；
参数attributes是一个可选的字符串，取值包括“g”、"i"和“m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。


示例：

当使用 RegExp()来创建一个正则表达式对象时，需要对元字符中的斜线（\）进行转义。相对而言，直接量方式比构造函数方式更加简洁。

正则表达式中的pattern部分可以包括元字符、括号表达式以及量词等。
常见的元字符如下：

常见的括号表达式如下：

常见的量词如下：

不仅能单独使用元字符、括号表达式或量词来创建一个RegExp对象，还可以将以上三者混合使用来创建RegExp对象。
2. RegExp对象的常用方法
正则表达对象常用的方法：

（1）exec()方法：exec()方法用于检索字符串中正则表达式的匹配情况，当匹配成功时返回匹配内容及其所在位置.

语法格式：
var result=RegExpObject.exec(string)


（2）test()方法：test()方法用于检索字符串中正则表达式的匹配情况，当匹配成功时返回true，否则返回false。

语法格式：
RegExpObject.test(string)
注意：
参数string是必须的，表示被检索的字符串；
当参数string与正则表达式匹配时，返回true;
当参数string与正则表达式不匹配时，返回false。


（3）compile方法

  1. String和RegExp
    在String对象中，有以下三种方法可以使用RegExp对象作为方法的参数：search(regExp)用于检索与正则表达式相匹配的子串，replace(regExp,replaceText)用于替换字符串中与指定正则表达式匹配的内容，match(regExp)用于检索与正则表达式相匹配的信息。
6.自定义对象
  1. 原始方式
    使用原始方式创建一个JavaScript对象，步骤为：首先创建一个Object对象，然后为对象添加所需的属性和方法。

语法格式：
var object=new Object();
object.propertyName=value;
object.methodName=functionName|function(){};
注意：
使用Object类创建一个对象object；
propertyName表示为object对象所添加的属性名；
methodName表示为object对象所添加的方法名，其值可以是事先定义的函数名或匿名函数。

  1. 构造函数方式

语法格式：
function ClassName([param1][,param2]…)
{
this.propertyName=value;
this.methodName=functionName|function(){…};
//其他方法
}

<script>
function Goods(name,type,price,color)
{
	this.name = name;
	this.type = type;
	this.price = price;
	this.color = color;
	this.showinfo = function(){
	alert("-商品名称:"+this.name + "\n 商品类型：" + this.type + "\n 商品价格："+ this.price + "\n 商品颜色:"+ this.color);
	}；
	this.showColor = showColor;
	function showColor(){
	alert(M商品颜色："+this.color);
	}
}
//创建对象实例
var goodsl = new Goods("M男士衬衣","男装",200,"白色")；
var goods2 = new Goods("女士花裙","女装",700,"红色")；
//方法的调用
goodsl.showinfo();
goods2.showColor();
script>

通过构造函数创建对象时，会重复生成对象所引用的函数，为每个对象都创建一个独立的函数版本。
3. 原型方式
原型方式通过prototype属性为对象添加新的属性或方法。

语法格式：
object.prototype.name=value;


4. 混合方式

<script>
fuction Goods(){}
Goods.prototype.name="红心火龙果";
Goods.prototype.type="水果类";
Goods.prototype.price="10";
Goods.prototype.color="粉红色";
Goods.prototype.showInfo=function(){
	alert("-商品名称:"+this.name + "\n 商品类型：" + this.type + "\n 商品价格："+ this.price + "\n 商品颜色:"+ this.color);
};
var goods=new Goods();
goods.showInfo();
script>

原型方式不仅能为自定义对象添加属性和方法，还能对内置对象进行扩展。
5. JSON方式



（1）eval()方式
eval方法通常将字符串当作一个语句块来处理，使用括号的方式将JSON字符串强制转换成JSON对象。

//Json字符串
<script>
var movieStr='{'
	+'name:"小时代",'
	+'type:"爱情",'
	+'price:80,'
	+'showInfo:function():{'
		+'document.write("影片名称："+this.name+",影片类型："+this.type+"票价："+this.price);'
	+'}'
+'}';
var movie=eval("("+movieStr+")");
movie.showInfo();
script>

上述代码中，将JSON字符串转成JSON对象前，需在JSON字符串两侧添加一对括号“()”,然后用eval()方法将该字符串强制转换成JSON对象。


（2）Funtion对象方式

JSON方式也可以与原型方式、构造函数方式混合使用。

六、浏览器对象

BOM：Browser Object Model，浏览器对象模型，提供了与浏览器窗口交互的功能。其中window对象是BOM模型中的顶层对象，其他对象都是该对象的子对象。BOM模型如下图所示。

DOM： Document Object Model，属于BOM的一部分，用于对BOM中的核心对象document进行 *** 作。DOM模型如下图所示。

1.浏览对象（BOM）

  1. window对象：表示浏览器中打开的窗口
    属性：name、status等
    方法：open()、close()等
<html>
    <head>
        <title>浏览器对象title>
        <script language="javascript">
	function f(){
 		window.open
("demo1.html","test","toolbar=no,left=200,top=100,menubar=no,width=100,height=100,resizable=no")
	}
        script>
    head>
    <body>
        <script language="javascript">
	window.status="请看这里！";
        script>
        <form>
	<input name="button" type="button" value="open" onclick=f()>
	<input name="button" type="button" value="close" onclick=window.close()>
        <form>
    body>
html>
  1. location对象：location既是对象，也是window对象的属性。
    （1）window对象的 location 属性包含了当前页面的地址 (URL) 信息，获取或设置现有文档的url。
    （2）location作为对象，有reload()重新加载等方法。
<html>
        <head>
	<title>浏览器对象title>
       head>
        <body>
  	<script language="javascript">
  		alert(window.location);
  	script>
        body>
html>

结果返回当前页面的地址信息。

<html>
        <head>
	<title>historytitle>
        head>
        <body>
  	<script language="javascript">
  		function goto()
  		{
		 	 window.location="js3.html";
		 }
  	script>
  	<input name="" type="button" onClick="goto()" value="转向" />
        body>
html>

实现单击按钮直接跳转js3.html。

  1. history对象
    属性：
    length 存储在记录清单中的网页数目。
    current 当前网页的地址。
    next 下一个历史记录的网页地址。
    previous 上一个历史记录的网页地址。
    方法：
    back 回到客户端查看过的上一页。
    forward 回到客户端查看过的下一页。
    go（整数或URL字符串） 前往历史记录中的某个网页。
<html>
        <head>
	<title>historytitle>
        head>
       <body>
  	<script language="javascript">
  		function goback()
  		{
			  history.back();
	 	 }
 	 script>
	  <input name="" type="button" onClick="goback()" value="返回" />
       body>
html>
  1. frame对象
    每一个框架对象相当于窗口(window)对象，因此框架对象可以使用窗口对象的所有属性和方法。
  2. document对象：指当前的文档对象。
    属性：image、form等
    方法：document.write()：向客户端浏览器输出内容
  3. navigator对象：包含有关浏览器的信息，如浏览器的版本号、名称等。
2.文档对象（DOM）

什么是DOM？

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
D：document，指HTML或XML这类标记文档。
O：object，指HTML元素转成的JS对象。
M：model，将文档想成一个倒树，每一个部分（元素、内容、属性、注释）都是一个节点。

DOM 是这样规定的：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
除此之外，还有注释节点等
只要知道一个节点，就可按关系找到其它节点。

定位某一对象的方法：

1、基于DOM（基于name）：
window.document.form1.userName.value.length //太复杂，且每个元素必须有name!
2、基于ID：
var v = document.getElementById(“id”)//推荐
3、基于标签名：
var x = document.getElementsByTagName (“p”)
4、基于名字：
var x = document.getElementsByName (“name”)

<html>
        <head>
	<script language="javascript">
		function getValue()
	  	{
 			 var x=document.getElementById("myHeader")
 	 		alert(x.innerHTML)
 	 	}
	script>
        head>
        <body>
	<h1 id="myHeader" onclick="getValue()">This is a headerh1>
	<p>Click on the header to alert its valuep>
        body>
html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/905664.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-15
下一篇 2022-05-15

发表评论

登录后才能评论

评论列表（0条）

保存