JavaScript学习

最新推荐文章于 2024-04-28 11:43:36 发布

Gxbalunn

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量94

点赞数 1

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45636230/article/details/113007098

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

概述

javaScript是一种脚本语言，其整个语法以java为基础，但比java简单。由于它是一种脚本语言，所以不需要编译，可有浏览器直接解释运行。

作用：为网页添加各式各样的动态功能。

例如： 1.响应客户端鼠标和键盘事件
2.客户端页面表单数据验证
3.使用JavaScript动态的改变页面标签的样式

JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。

基本语法

javaScript脚本写在一组

变量

声明变量用var关键字，同时对其赋值

var test=“THIS IS A BOOK”

数据类型

1.数值型 number (包含整型和浮点型)

2.布尔型 boolean

3.字符串型由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）

4.undefined型

5.Object型

算术运算符

“+”也可以连接字符串

赋值运算

在这里插入图片描述

比较运算符

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y46MijqA-1611327413962)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20210122224731229.png)]$

逻辑运算符

在这里插入图片描述

条件运算符

 var  result = (条件表达式)?结果1:结果2

控制语句

第一种是选择结构
1.单一选择结构（if）
2.二路选择结构（if/else）
3.多路选择结构（switch）
第二种类型的程序控制结构是循环结构。
1.由计数器控制的循环（for）
2.在循环的开头测试表达式（while）
3.在循环的末尾测试表达式（do/while）

条件语句

if（表述式）
	语句段１；
else
    语句段２；

多路选择

switch (e) {
    case r1: （注意：冒号）
        ...
        break;
    case r2:
        ...
        break;
     [default:...]
}

循环语句

 for(初始化；条件；增量){
      语句集；
 }

 while(条件){
       语句
 }

do{
  …… 
}while(条件);

函数

一段完成某种特定功能的JS代码。

函数中的语句不会在外部脚本执行时执行，只有调用它时才执行（通过函数名调用，可重复调用）。

基本语法

function functionName([arguments]){
    javascript statements
	[return expression]
} 
	
/*function: 表示函数定义的关键字;
functionName:表示函数名;
arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;
statements: 表示实现函数功能的函数体;
return expression:表示函数将返回expression的值，同样是可选的的语句。*/

调用

function fun(){
   alert(“test”);
}
fun();//通过函数名调用
function fun2(){
    fun();//在其他函数中调用
}

//事件驱动
function fun(){
     alert(“test”);
}
<body>
  <input onclick=“fun()“  value=“驱动函数”/>
//</body>

变量的作用域

全局变量：在函数外部定义的变量，它在声明后，任何程序段都可用。
局部变量：在函数内部定义的变量，作用范围为函数内部。

var name=“全局变量”;
function test(){
	var name ="局部变量";
	document.write(name);
}

全局函数

parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。
parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
typeof(arg) 返回arg值的数据类型。
eval(arg) 可运算某个字符串。

事件

一些常用的事件：
在这里插入图片描述

Event对象

Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。
在这里插入图片描述

内置对象

String字符串

属性

length用法：返回字符串的长度。

一些方法：

charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.
toLowerCase() ：返回把原字符串所有大写字母都变成小写的字符串.
toUpperCase() ：返回把原字符串所有小写字母都变成大写的字符串.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。

Array数组

//数组的定义方式：
var <数组名> = new Array();
var <数组名> = new Array(<元素1>, <元素2>, <元素3>);
var <数组名> = [<元素1>, <元素2>, <元素3>];
//添加数组元素：
<数组名>[下标] = 值;

属性

length：返回数组的长度（数组中的元素个数）

一些方法：

concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,...,arrayX)
pop() 用于删除并返回数组的最后一个元素。
push() 可向数组的末尾添加一个或多个元素，并返回新的长度。
shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值。
slice() 可从已有的数组中返回选定的元素。arrayObject.slice(start(必须),end(可选)),该方法并不会修改数组
splice() 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
splice(index(删除的位置),howmany(数量,为0不删除),item1,...,itemX(插入的元素))
join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。
sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。
对数字排序需要调用排序函数。
function sortNumber(a,b){
       return a - b;
}

Date

一些方法：

获取日期	
new Date()	返回当日的日期和时间 
getFullYear()	返回四位数字年份
getDate()	返回一个月中的某一天 (1 ~ 31) 
getMonth()	返回月份 (0 ~ 11) 
getDay()	返回一周中的某一天 (0 ~ 6) 
getHours()	返回 Date 对象的小时 (0 ~ 23) 
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59))

设定日期
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)) 
setMonth()	设置 Date 对象中月份 (0 ~ 11)) 
setYear()	设置 Date 对象中的年份（两位或四位数字）

Math

用于提供对数据的科学计算。

属性

PI （圆周率π 3.1415926535…)

一些方法：

Math.abs(x)  绝对值计算；
Math.pow(x,y)  数的幂；x的y次幂
Math.sqrt(x)  计算平方根；
Math.ceil(x)  对一个数进行上舍入
Math.floor(x)  对一个数进行下舍入。
Math.round(x)  把一个数四舍五入为最接近的整数
Math.random()  返回 0 ~ 1 之间的随机数
Math.max(x,y)  返回 x 和 y 中的最大值
Math.min(x,y)  返回 x 和 y 中的最小值

HTML DOM

HTML DOM:文档对象模型。

DOM:在js对网页进行操作时，认为网页中的每一个标签就是一个对象，使用面向对象的思想来操作。

内置对象:js语法定义好的。

DOM对象:指的是一类对象的总称。

js中提供了一个document对象，表示整个html文档对象，网页加载完毕会自动生成此文档的document对象。

通过document对象中提供的方法精准获得网页中要操作的标签。

查找元素

通过JavaScript操作html标签前必须先找到需要操作的标签。（要操作，先得到）

查找标签的四种方法：

1.通过id查找

document.getElementById("id");

2.通过标签名查找

document.getElementsByTagName("p");

3.通过类名查找

document.getElementsByClassName("p");

4.通过name查找

document.getElementsByName("name");

改变html

html dom允许JavaScript改变html标签的内容。

改变html标签的属性

document.getElementById("username").value="new value";
document.getElementById("image").src="new.jpg";
document.getElementById("div").innerHTML=new HTML;

改变css

html dom允许JavaScript改变html标签的样式。

document.getElementById("id").style.property=new style;
//例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";

事件

html dom使JavaScript有能力对html事件做出反应。

document.getElementById("bid").onclick=function(event){//匿名函数
	//函数体
}
//此段脚本要么写在onload中，要么写在此dom标签之后。

表单验证

JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。

比如：

用户是否已填写表单中的必填项目，内容长度？
用户输入的内容格式是否合法？例如邮箱，手机号，邮编格式等。

正则表达式对象

正则表达式简称：RegExp

作用：对字符串执行模式匹配的强大工具。是一种对文字进行模糊匹配的语言。

基本语法：

var reg = new RegExp("表达式");
var reg = /表达式/;

在这里插入图片描述

浏览器对象

window

即浏览器窗口。

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。

全局变量是window对象的属性，全局函数是window对象的方法。html dom的document也是window对象的属性。

window对象常用的属性：

window.innerHeight  //浏览器窗口的内部高度 
window.innerWidth  //浏览器窗口的内部宽度 
window.parent  //获得父级窗口对象(父子级之间调用)

Window对象常用的方法：

window.open('url', 'name','features')//打开新窗口 
//features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。
width=100,height=100,top=100,left=100;

Location

location对象用于获取当前页面的地址（url），并把浏览器重定向到新的页面。

属性：

href设置或返回完整url

方法：

assign(url)  //加载一个新的文档
reload()  //重新加载当前文档
replace(url)  //可用一个新文档取代当前文档。

history

history对象包含浏览器的历史。

属性：

length返回浏览器历史列表中的 URL 数量

方法：

back()  //与在浏览器点击后退按钮相同 
forward()  //与在浏览器中点击按钮向前相同

计时

通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

方法：

setTimeout(“函数”,”时间”)  //未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)  //每隔指定时间重复调用
clearInterval()取消setInterval()

Gxbalunn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

预习概述javaScript是一种脚本语言，其整个语法以java为基础，但比java简单。由于它是一种脚本语言，所以不需要编译，可有浏览器直接解释运行。作用：为网页添加各式各样的动态功能。例如： 1.响应客户端鼠标和键盘事件 2.客户端页面表单数据验证 3.使用JavaScript动态的改变页面标签的样式JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。基本语法javaScript脚本写在一组变
复制链接

扫一扫