JS进阶学习（1）

Emilia*

已于 2022-05-28 21:51:10 修改

阅读量721

点赞数

分类专栏：笔记文章标签：学习 javascript 前端

于 2022-05-23 20:01:46 首次发布

本文链接：https://blog.csdn.net/m0_62461358/article/details/124932928

版权

笔记专栏收录该内容

8 篇文章 3 订阅

订阅专栏

*需要有一定的编程语言基础哦

2.鼠标经过事件（onmouseover）

一、基本规则

1.变量命名

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。
变量名区分大小写，如:A与a是两个不同变量。
不允许使用JavaScript关键字和保留字做变量名。

2.变量声明

可以不声明而使用

3.变量赋值

变量存储字符串的时候要用双引号

4.操作符优先级

从高到低：算术运算符->比较操作符->逻辑运算符->“=”运算符

三、数组

1.创建数组

var myarray =new Array(8);//创建数组，存储8个数据

*但指定数组长度后仍可以将元素存储在规定长度之外

2.数组属性length

myarr.length;//获得数组myarr的长度

*length属性是可变的，如可以用来增大数组长度

四、函数

1.定义函数

function 函数名（）
{
    
    函数体；
}

2.调用函数

在<script>标签内调用
在HTML文件内调用，如通过点击按钮后调用定义好的函数

<html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>

五、事件

事件是可以被JavaScript侦测到的行为

主要事件表
事件	说明
onclick	鼠标单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚集
onblur	光标离开
onload	网页导入
onunload	关闭网页

1.鼠标单击事件（onclick）

通常于button一起用，οnclick="函数名（参数）"

2.鼠标经过事件（onmouseover）

οnmοuseοver="函数名（参数）"

3.鼠标移开事件（onmouseout）

οnmοuseοut="函数名（参数）"

4.光标聚集事件（onfocus）

当网页中的对象获得聚点时，执行调用的程序

5.失焦事件（onblur）

当光标离开当前获得的聚焦对象时，触发onblur事件，同时执行被调用的程序

6.内容选中事件（onselect)

7.文本框内容改变事件（change）

8.加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。

2. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

9.卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onunload事件，同时执行被调用的程序。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">   
     window.onunload = onunload_message;   
     function onunload_message(){   
        alert("您确定离开该网页吗？");   
    }   
</script>   
</head>
<body>
  欢迎学习JavaScript。
</body>
</html>

六.内置对象

1.什么是对象

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

2.Date日期对象

可以储存任意一个日期，并且可以精确到毫秒数（1/1000秒）

var Udate=new Date();//Date首字母必须大写；使Udate成为日期对象，并且已有初始值：当前时间（当前电脑系统时间）

也可以自定义时间：

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

访问方法语法：

方法名称	功能描述
get/setDate()	返回/设置日期
get/setFullYear()	返回/设置年份，用四位数表示
get/setYear()	返回/设置年份
get/setMonth（）	返回/设置月份。 0：一月·····11：十二月。所以加一
get/setHours()	返回/设置小时，24小时制
get/setMinutes()	返回/设置分钟数
get/setSecond()	返回/设置秒钟数
get/setTime()	返回/设置时间（毫秒为单位）

返回星期方法

返回0-6数字，0代表星期天。若要返回相对应“星期”，通过数组完成。

<script type="text/javascript">
  var mydate=new Date();//定义日期对象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
  var mynum=mydate.getDay();//返回值存储在变量mynum中
  document.write(mydate.getDay());//输出getDay()获取值
  document.write("今天是："+ weekday[mynum]);//输出星期几
</script>

3.String对象

String转换大小写：toUpperCase()、toLowerCase()
返回指定位置的字符：charAt(index)

index:必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

如果参数index不在0与string.length-1之间该方法将返回一个空字符串

返回指定字符串首次出现的位置：indexOf()

语法：

stringObject.indexOf(substring,startpos);
//substring:必需。规定需检索的字符串值
//startpos:可选的整数参数。规定在字符串开始检索的位置。从0到stringObject.length-1。如省略该参数，则将从字符串的首字符开始检索

注意：如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。如果要检索的字符串值没有出现，则该方法返回 -1。

字符串分割split()

stringObject.split(separator,limit);
//separator:必需。从该参数指定的地方分割stringObject
//limit：可选参数。分割的次数，如设置该参数，返回的子串不会多于这个参数指定的数组，如果无参数为不限制次数

*把空字符用做separator，那么stringObject中的每个字符之间都会被分割。

提取字符串substring（）

语法：

stringObject.substring(startPos,stopPos);
//startPos:必需。一个非负的整数，开始位置
//stopPos:可选。若省略，则返回的子串会一直到字符串对象的结尾。

返回的内容是从start开始（包含start位置的字符）到stop-1处的所有字符，其长度为stop减start；

如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

提取指定数目的字符substr（）

语法：

stringObject.substr(startPos,length)；
//staraPos:必需。需提取的子串的起始位置。必须是数值
//length:可选。提取字符串的长度。如果省略，一直到结尾

*如果startPos是负数，则从字符串尾部开始算。即-1为最后一个字符；为负数且绝对值大于字符串长度则startPos为0

4.Math对象

Math是一个固有对象，无需创建。

abs、ceil、floor、round、random

5.Array数组对象

concat、join、reverse、slice、sort

sort方法：

语法：

arrayObject.sort(方法函数)；
//方法函数：可选。规定排序顺序。必须是函数
//1.如果不指定<方法函数>，则按unicode码顺序排列。
//2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

七.window对象

1.JavaScript计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：

计时器setInterval

语法：setInterval(代码，交互时间）示例如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>
</html>