JavaScript基础_javascriptcsdn-CSDN博客

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script src="index.js"></script>
</head>
<body>
    <!--2、在body中引入-->
    <script src="index.js"></script>
</body>
</html>

（5）与CSS的区别：

①对于CSS来说，外部CSS文件只能在head中引入。

但对于JavaScript来说，外部JavaScript文件不仅可以在head中引入，还可以在body中引入。

②对于CSS来说，外部CSS文件只能在head中引入。

但对于JavaScript来说，外部JavaScript文件不仅可以在head中引入，还可以在body中引入。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--引入外部CSS-->
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <!--引入外部JavaScript-->
    <script src="js/index.js"></script>
</head>
<body>
</body>
</html>

2、内部JavaScript

（1）指的是把HTML代码和JavaScript代码放在同一个文件中.

（2）JavaScript代码写在标签对内

（3）同样分为页头引入（head标签内）和页中引入（body标签内）。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script>
        ……
    </script>
</head>
<body>
    <!--2、在body中引入-->
    <script>
        ……
    </script>
</body>
</html>

一般在head中引入.

（4）<script></script>是一种简写形式（简写形式用的更多），等价于：

<script type="text/javascript">
    ……
</script>

3、元素事件JavaScript

指在元素的“事件属性”中直接编写JavaScript或调用函数。

二、JavaScript 基础

1、语句的分号“；”可省略，但加上是良好代码编写习惯。

2、typeof运算符用于返回操作数的数据类型。

例如：typeof(1)返回值是number，typeof(“javascript”)返回值是string。

3、类型转换：

字符串型–>整型：parseInt()

字符串型–>浮点型：parseFloat()

数值型–>字符串型：toString()

4、用function关键字来定义函数

function [函数名]([参数1,参数2,….,参数n])
{
    //函数体语句
    return 表达式;
}

5、字符串名.length可用于获取字符串的长度。

6、声明变量时使用var关键字，不需要指定变量的类型。

7、输出：

①alert()弹出警告框。

②console.log()输出到浏览器的控制台。

③document.write()输出到页面。

输入：
prompt()弹出输入框，获取用户输入的数据。

三、字符串对象

表3-1 检索指定子串的方法

| 方法 |说明 |
|–|–|–|
|match() |存在，返回此字符串；否则返回null。 |
| search() 、indexOf() | 存在，返回子串的起始位置；否则返回-1。 |

表3-2 其他方法

方法	用法	说明
替换字符replace()	字符串名.replace(原字符,替换字符)
获取字符charAt()	字符串名.charAt(n)	获取字符串第（n-1）个字符（因为字符串中第一个字符的下标是0）
转小写toLowerCase()	字符串名. toLowerCase()	将大写字符串转换为小写字符
转大写toUpperCase()	字符串名. toUpperCase()	将小写字符串转换为大写字符串
字符串连接concat()	字符串1.concat(字符串2,字符串3,…,字符串n);	将“字符串2,字符串3,…,字符串n”按照顺序连接到字符串1的尾部，并返回连接后的字符串。
字符串分割split()	字符串.split(分割符)
提取子串substring()	字符串.substring(开始位置,结束位置)

示例：

检索指定字串match()

举例：

    <script type="text/javascript">
        var str="Hello World!";
        document.write(str.match("world")+"<br/>");
        document.write(str.match("World")+"<br/>");
        document.write(str.match("world!"));
    </script>

效果图：
在这里插入图片描述

检索指定字串search()

举例：

        var str = "Life is wonderful!";
        document.write(str.search("wonderful")+"<br/>");

结果：8

字符串分割split()

举例：

		var str = "HTML,CSS,JavaScript";
		var arr = str.split(",");
		for (var i = 0; i < arr.length; i++)
		{
 		   document.write("数组第" + (i + 1) + "个元素是：" 			+ arr[i] + "<br/>");
		}

str.split(“，”)表示使用英文逗号作为分割符，然后来分割str这个字符串，最后会得到一个数组：[“HTML”,“CSS”,“JavaScript”]，再把这个数组赋值给变量arr保存起来。

效果图：
在这里插入图片描述
举例：
上述代码第二句换成：var arr = str.split(“”);(可以用来分割字符串每一个字符)

注意：“” ≠" "(表示字符串以空格作为分割符)

效果图：

提取子串substring()

举例：

		var str = "HTML,CSS,JavaScript";
        var str2=str.substring(5,13);
        document.write(str2);

结果：CSS,Java

四、日期对象Date

1、创建日期对象

		var 日期对象名 = new Date();

上述写法用于获取当前系统时间

		var 日期对象名 = new Date(日期字符串);

2、日期对象的方法

表4-2-1 获得日期时间

方法	说明
getFullYear()	返回一个表示年份的4位数字
getMonth()	返回值是0（一月）到11（十二月）之间的一个整数
getDate()	返回值是1~31之间的一个整数
getHours()	返回值是0~23之间的一个整数，来表示小时数
getMinutes()	返回值是0~59之间的一个整数，来表示分钟数
getSeconds()	返回值是0~59之间的一个整数，来表示秒数

表4-2-2 设置日期时间

方法	说明
setFullYear()	可以设置年、月、日
setMonth()	可以设置月、日
setDate()	可以设置日数
setHours()	可以设置时、分、秒、毫秒
setMinutes()	可以设置分、秒、毫秒
setSeconds()	可以设置秒、毫秒

表4-2-3 转换日期时间

方法	说明
toString()	将日期时间转换为普通字符串
toUTCString()	将日期时间转换为世界时间（UTC）格式的字符串
toLocaleString()	将日期时间转换为本地时间格式的字符串

五、数组对象Array

表5 Array对象常用方法

方法	说明
slice()	获取数组中的某段数组元素
unshift()	在数组开头添加元素
push()	在数组末尾添加元素
shift()	删除数组中第一个元素
pop()	删除数组最后一个元素
toString()	将数组转换为字符串
join()	将数组元素连接成字符串
concat()	多个数组连接为字符串
sort()	数组元素正向排序
reverse()	数组元素反向排序

六、数值(数学)对象Math

表6 Math对象常用方法

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

七、window对象（窗口对象）

1、window对象简介

①在JavaScript中，一个浏览器窗口就是一个window对象

②window对象主要用来控制由窗口弹出的对话框、打开窗口或关闭窗口、控制窗口的大小和位置等。

③我们每次打开一个页面时，浏览器都会自动为这个页面创建一个window对象，window对象存放了这个页面的所有信息。
为了更好分类处理这些信息，window对象下面又分为很多对象：
在这里插入图片描述

表7-1 window对象下的子对象

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息
history	历史对象，用于操作浏览历史
screen	屏幕对象，用于操作屏幕宽度高度
一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象。

window对象及下面这些location、navigator等子对象，由于都是操作浏览器窗口的，又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）。(BOM这个术语很常见)

BOM和DOM都是“某某对象模型”，所谓的对象模型，可以简单理解为把它们看成一个对象来处理。

此外，也可以把window下的子对象看成是它的属性，只不过这个属性也是一个对象，所以才称之为“子对象”。

2、window对象方法

表6 window对象常用方法

方法	说明
alert()	弹出对话框，没有返回值
confirm()	判断对话框，返回布尔值。如果用户点击【确定】按钮，返回true。如果用户点击【取消】按钮，返回false。
prompt()	输入对话框，返回字符串
open()	打开窗口
close()	关闭窗口
setTimeout()	开启“一次性”定时器
clearTimeout()	关闭“一次性”定时器
setInterval()	开启“重复性”定时器
clearInterval()	关闭“重复性”定时器
对于window对象来说，无论是它的属性，还是方法，都可以省略window前缀。

例如window.alert()可以简写为alert()，window.open()可以简写为open()，甚至window.document.getElementById()可以简写为document.getElementById()，以此类推。

（1）open()打开窗口

		window.open(URL, 窗口名称, 参数);

①URL：指的是打开窗口的地址，

如果URL为空字符串，则浏览器打开一个空白窗口，并且可以使用document.write()方法动态输出HTML文档。

②窗口名称：指的是window对象的名称，可以是a标签或form标签中target属性值。

如果指定的名称是一个已经存在的窗口名称，则返回对该窗口的引用，而不会再新打开一个窗口。

③参数：对打开的窗口进行属性设置。

表7-1 参数设置

方法	说明
top	窗口顶部距离屏幕顶部的距离，默认单位为px
left	窗口左边距离屏幕左边的距离，默认单位为px
width	窗口的宽度，默认单位为px
height	窗口的高度，默认单位为px
scrollbars	是否显示滚动条
resizable	窗口大小是否固定
toolbar	浏览器工具条，包括前进或后退按钮
menubar	菜单条，一般包括文件、编辑及其它一些条目
location	地址栏，是可以输入URL的浏览器文本区
location	地址栏，是可以输入URL的浏览器文本区

动态创建的窗口一般以变量的形式保存，如：

var newWindow = window.open("http://www.baidu.com ", "", "width=200,height=200,resizable");

（2）close()关闭窗口

①关闭当前窗口

有如下三种方法：

		window.close();
		close();
		this.close();

②关闭子窗口

即关闭之前使用window.open()方法动态创建的子窗口。

		窗口名.close();

（3）resizeTo()、resizeBy()改变窗口大小

		window.resizeTo(x, y)
	
		window.resizeBy(x, y)

当x、y的值大于0时为扩大，小于0时为缩小。

x和y的单位都是px，使用时只使用数值即可。

x表示窗口水平方向每次扩大或缩小的数值，y表示垂直方向窗口每次扩大或缩小的数值。

resizeTo(x,y)中的x、y是“改变后”的数值（表结果）

resizeBy(x,y)中的x、y是“增加或减少”的数值。（表过程）

（4）定时器实现方法（⭐）

参数code可以是一段代码，也可以是一个调用的函数名；

参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。

clearTimeout()可以用来取消执行setTimeout()方法。

clearInterval()可以用来取消执行setTimeout()方法

setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行，除非你使用clearInterval()方法来取消执行。

①setTimeout()与clearTimeout()

		var 变量名 = setTimeout(code , time);

举例：参数code是一段代码

    <script type="text/javascript">
        window.onload = function () {
            setTimeout("alert('欢迎光临！');", 2000);

        }

    </script>

参数code是一个调用的函数名

    <script type="text/javascript">
        window.onload = function () {
            setTimeout("welcome()", 2000);
        }
        function welcome() {
            alert("欢迎光临！");
        }
    </script>

上面两段代码的效果：2s后弹出欢迎语

setTimeout()方法只会执行一次，所以只会弹出一次对话框。

②setInterval()和clearInterval()

		var 变量名 = setInterval (code , time);

举例：倒计时效果

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //定义全局变量，用于记录秒数
        var n = 5;
        window.onload = function ()
        {
            //设置定时器，重复执行函数countDown
            setInterval(countDown, 1000);
        }
        //定义函数
        function countDown()
        {
            //判断n是否大于0，因为倒计时不可能有负数
            if (n > 0) {
                n--;
                document.getElementById("num").innerHTML = n;
            }
        }
    </script>
</head>
<body>
    <p>倒计时：<span id="num">5</span></p>
</body>
</html>

3、document对象（文档对象）

表7-3-1 document对象属性

属性	说明
title	文档标题，即title标签内容
URL	文档地址
fileCreateDate	文档创建日期
fileModifiedDate	文档修改时间（精确到天）
lastModified	文档修改时间（精确到秒）
fileSize	文档大小
fgColor	定义文档的前景色
bgColor	定义文档的背景色
linkColor	定义“未访问”的超链接颜色
alinkColor	定义“被激活”的超链接颜色
vlinkColor	定义“访问过”的超链接颜色