JS 学习笔记

最新推荐文章于 2025-04-05 20:55:33 发布

FeBr2

最新推荐文章于 2025-04-05 20:55:33 发布

阅读量306

点赞数

分类专栏： Web开发：文章标签： javascript

本文链接：https://blog.youkuaiyun.com/FeBr2/article/details/50957148

版权

Web开发：专栏收录该内容

8 篇文章

订阅专栏

一，基础

1，插入JS

<script type="text/javascript">表示在<script></script>之间的是文本类型(text), javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

2，引用JS

JS文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。

<script src="script.js"></script>

3，JS在页面中的位置

我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。

注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

二，进阶

1，事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表:

2，JS内置对象

1），Date日期对象

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

定义一个时间对象 :

var Udate=new Date();

注意:使用关键字new，Date()的首字母必须大写。

使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。

如果要自定义初始值，可以用以下方法：

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

我们最好使用下面介绍的“方法”来严格定义时间。

访问方法语法：“<日期对象>.<方法>”

Date对象中处理时间和日期的常用方法：

注意：返回星期的方法：

getDay() 返回星期，返回的是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>

2），string字符串对象

定义mystr字符串后，我们就可以访问它的属性和方法。

访问字符串对象的属性length:

1，stringObject.length; 返回该字符串的长度。

访问字符串对象的方法：

2，toUpperCase() 方法将字符串小写字母转换为大写。

3，charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 。

stringObject.charAt(index)

注意：

字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。

如果参数 index 不在 0 与 string.length-1。

一个空格也算一个字符。

4，indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

stringObject.indexOf(substring, startpos)

说明：

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。

可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。

如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的

注意：

indexOf() 方法区分大小写。

如果要检索的字符串值没有出现，则该方法返回 -1。

5，split() 方法将字符串分割为字符串数组，并返回此数组。

stringObject.split(separator,limit)

注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

6，substring() 方法用于提取字符串中介于两个指定下标之间的字符。

注意：

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

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

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

7，substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。

stringObject.substr(startPos,length)

注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

4），Math对象

Math 对象属性

Math 对象方法

5）Array数组对象

数组属性：

length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。

数组方法：

3，浏览器对象

1），window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

语法：

window.open([URL], [窗口名称], [参数字符串])

JavaScript计时器

计时器类型：

一次性计时器：仅在指定的延迟时间之后触发一次。

间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法：

setInterval(代码,交互时间)

clearInterval(id_of_setInterval) (id_of_setInterval：由setInterval()返回的ID值。)

setTimeout(代码,延迟时间)

clearTimeout(id_of_setTimeout)   (id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。)

2），history对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意：从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：window.history.[属性|方法] (window可以省略)

History 对象属性

History 对象方法

3），Location对象

location用于获取或设置窗口的URL，并且可以用于解析URL。

语法：location.[属性|方法]

location对象属性图示：

location对象属性：

location对象方法：

4）Navigation对象

navigation对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性：

查看浏览器的名称和版本代码：

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

5）screen对象

screen对象用于获取用户的屏幕信息。

语法： window.screen.属性

对象属性：