JavaScript

最新推荐文章于 2022-10-13 19:27:34 发布

原创最新推荐文章于 2022-10-13 19:27:34 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

10 篇文章

订阅专栏

JavaScript是一种解释型的脚本语言，C,C++等语言都是先编译后执行，JavaScript是在程序的运行过程中逐行进行解释的，同时JavaScript也是一种基于对象的脚本语言，
对JavaScript基本了解

1注释，
在HTML中的注释是

<!--        内容 -->

在JavaScript中就是//和/*

2JavaScript程序本身不能单独存在，它依附于HTML页面在浏览器中运行，本身JavaScript作为一种脚本语言可以放在HTML页面的任何位置，当浏览器在解释HTML时是按先后顺序的，所以放在前面的程序会优先执行。
3调用外部的JavaScript文件内容。后缀名为.js

<script src="某个文件"></script>

4添加到事件中
一些简单的脚本可以直接放在事件处理部分的代码中，如下所示直接将JavaScript代码加入到onclick事件中。

	 <input type="button" name="FullScreen" value="全屏显示" onclick="window.open(document.location, 'big', 'fullscreen=yes')" />

5信息输出—window对象的alert方法

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
		
	</head>
	
	<body>
		<script language="javascript">
			alert("欢迎进入我的网页")
		</script>
	</body>
	</html>

在这里插入图片描述

出现这样的提示。

6在script中展示HTML—document.write（）

	<body>
		<script language="javascript">
			document.write("<h1> good moring </>")
		</script>
	</body>

在这里插入图片描述

JavaScript基础知识：

var
在JavaScript中所有的数据类型都是var。
可以表示整型，浮点型，布尔类型，字符串。
空值 ---- null

	<body>
		<script language="javascript">
			var x1 = 6;
			var x2 = 6.6;
			var x3 = "515dadsf";
			var x4 = true;
			document.write(x1 + "<br/>");
			document.write(x2 + "<br/>");
			document.write(x3 + "<br/>");
			document.write(x4 + "<br/>");
		</script>
	</body>

在这里插入图片描述

复合数据类型
常用的内置对象
JavaScript 中的每个对象都包含一个 toString 和 valueOf 方法，

window对象
document
document对象概述
document对象是文档的根节点，window.document属性就指向这个对象。也就是说，只要浏览器开始载入HTML文档，这个对象就开始存在了，可以直接调用。

document.childNodes属性返回该对象的所有子节点。对于HTML文档来说，document对象一般有两个子节点。

第一个子节点是document.doctype，表示文档类型节点（DocumentType）。对于HTML5文档来说，该节点就代表。

在这里插入图片描述

Number
是一个数值包装器，与new关键词结合使用，
```
 var a = new Number(12);
```

常用属性：
MAX_VALUE：MAX_VALUE 属性返回 1.7976931348623157e+308 值，它是 JavaScript 能够处理的最大数字：
MIN_VALUE：使用 MIN_VALUE 返回 5e-324 值，这是 JavaScript 中最小的数字：
NEGATIVE_INFINITY：是 JavaScript 能够处理的最大负数，表示为 -Infinity：
POSITIVE_INFINITY：属性是大于 MAX_VALUE 的任意数，表示为 Infinity：

	<body>
		<script language="javascript">
			var a = new Number(12);
			
			document.write(a + "<br/>");
			document.write(a.toString() + "<br/>");
			document.write(a.valueOf() + "<br/>");
			document.write(Number.MAX_VALUE+ "<br/>");
			document.write(Number.MIN_VALUE + "<br/>");
			document.write(Number.NEGATIVE_INFINITY + "<br/>");
			document.write(Number.POSITIVE_INFINITY + "<br/>");
			document.write(Number.NaN + "<br/>");
			document.write(Number.prototype + "<br/>");
			
		</script>
	</body>

在这里插入图片描述

Boolean
Boolean 对象是 JavaScript 一个极其重要的组成部分。如果没有 Boolean 对象，在条件语句内便无法进行判断。

 var myBoolean = true;
 if(myBoolean == true) {
    // If the condition evaluates to true
 }
 else {
    // If the condition evaluates to false
 }

String

String 对象只有一个属性，即 length，它是只读的。length 属性可用于只返回字符串的长度：您不能在外部修改它。随后的代码提供了使用 length 属性确定一个字符串中的字符数的示例：

在 String 对象中有相当多的方法可用于操作和收集有关文本的信息。以下是可用的方法列表：

charAt
charCodeAt
concat
fromCharCode
indexOf
lastIndexOf
match
replace
search
slice
split
substr
substring
toLowerCase
toUpperCase

Date

基本语法：

var = new Date（）

会自动把当前的日期时间存进对象中去。

或传递 milliseconds 作为一个参数：milliseconds是同1970年1月1日相差的毫秒数。

var myDate = new Date(milliseconds);

您可以将一个日期字符串作为一个参数传递：

var myDate = new Date(dateString);

或者您可以传递多个参数来创建一个完整的日期：

var myDate = new Date(year, month, day, hours, minutes, seconds);

以下方法是可用于 Date 对象的 getter 方法：
getDate
getDay
getFullYear
getHours
getMilliseconds
getMinutes
getMonth
getSeconds
getTime
getTimezoneOffset

每个方法所返回的值都相当简单。区别在于所返回的值范围。例如， getDate 方法返回一个月份的天数，范围从 1 到 31；getDay 方法返回每周的天数，范围从 0 到 6； getHours 方法返回小时数值，范围从 0 到 23；getMilliseconds 函数返回毫秒数值，范围从 0 到 999。 getMinutes 和 getSeconds 方法返回一个范围从 0 到 59 的值，getMonth 方法返回一个从 0 到 11 之间的月份数值。本列表中惟一独特的方法是 getTime 和 getTimezoneOffset。 getTime 方法返回自 1/1/1970 中午 12 点的毫秒数，而 getTimezoneOffset 方法返回格林尼治标准时间和本地时间之间的时间差，以分钟为单位。

大多数 getter 方法，还有一个 setter 方法，接受相应的值范围内的数值参数。setter 方法如下所示：

setDate
setFullYear
setHours
setMilliseconds
setMinutes
setMonth
setSeconds
setTime
对于上述所有 getter 方法，有一些匹配的方法返回相同的值范围，只是这些值以国际标准时间设置。这些方法包括：

getUTCDate
getUTCDay
getUTCFullYear
getUTCHours
getUTCMilliseconds
getUTCMinutes
getUTCMonth
getUTCSeconds
当然，由于对于所有原始 getter 方法都有 setter 方法，对于国际标准时间也一样。这些方法包括：

setUTCDate
setUTCFullYear
setUTCHours
setUTCMilliseconds
setUTCMinutes
setUTCMonth
setUTCSeconds
正如在本文开头提到的，我不提供许多关于 toString 方法的信息，但是在 Date 对象中有一些方法可将日期转换为一个字符串，值得一提。在某些情况下，需要将日期或日期的一部分转换为一个字符串。例如，如果您将其追加到一个字符串或在比较语句中使用它。有几个方法可用于 Date 对象，提供略微不同的方法将其转换成字符串，包括：

toDateString
toLocaleDateString
toLocaleTimeString
toLocaleString
toTimeString
toUTCString

toDateString 方法将日期转换为字符串：

var myDate = new Date();
document.write(myDate.toDateString());

toDateString 返回当前日期，格式为 Tue Jul 19 2011。

toTimeString 方法将时间从 Date 对象转换为字符串：

var myDate = new Date();
document.write(myDate.toTimeString());

toTimeString 将时间作为字符串返回，格式为 23:00:00 GMT-0700 (MST)。

最后一种将日期转换为字符串的方法是 toUTCString，它将日期转换为国际标准时间的字符串。

Math数学对象

其中常用的常量；

E：自然对数底数
LN2：属性返回值为 2 的自然对数
LN10：属性返回值为 10 的自然对数。
LOG2E：
LOG10E:LOG2E 和 LOG10E 属性可用于返回 E 以 2 或 10 为底的对数。
PI：圆周率
SQRT1_2:返回 0.5 的平方根，
SQRT2:返回 2 的平方根。
常用的方法；
abs:
acos;
asin:
atan:
atan2:
cos:
log:
exp:
pow:
sin
sqrt:
tan
数组Array

调用Array创建数组的方法有以下三种：

	new Array();
	new Array(6):    //包含6个元素的数组
	new Array(7, 8 , 9)；

还可以通过【】来创建数组；

var a = [];  //一个空数组
var a = [2];  // 包含2的数组
var a = [2, 2 , 3, 5]; //包含里面数的数组；

变量的命名规则：

大家都知道变量的定义统一用var来定义，其规则如下：

只包含字符，数字，下划线，并区分打下写
最好以字母开头，不能使用数字开头
变量名称不能含有空格，+，-，“，”等
不能使用关键词；

变量也有全局和局部之分；
在函数里面的是局部变量，在函数外边的是全局变量。

运算符：同其他语言差不多，再次不做介绍。

函数

函数定义的一般语法：

	function 函数名（参数）
	{
	
	}

如下例子：

<body>
	<script language="javascript">
		function aa(a, b)
		{
			return a * b;
		}
		document.write(aa(10, 9) + "<br/>")
	</script>
</body>

与网页链接的函数：

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<script language="javascript">
			function aa()
			{
				alert("你好啊"); //出现提示框
			}
			
		</script>	
	</head>
	
	<body>
		<input type="button" value="点我呀" onclick="aa()"/> 
	</body>

在这里插入图片描述

if语句，循环语句，continue，break，的用法和其他语言没什么区别

事件：

常见的事件：
在这里插入图片描述

一：HTML中添加onclick

<button id="vv" onclick="myfunction()" >哈哈</button>

二：JS中定义函数绑定事件！

var funcc = function () {
  alert('我爱编程')
  }
var aa = document.getElementById('vv')
aa.onclick = funcc

三：直接定义函数与内容

document.getElementById('vv').onclick = function () {
  alert('hasssshhaa ')
  }

四：利用addEventListener

document.getElementById('vv').addEventListener('click',funcc);
//或者：
document.getElementById('vv').addEventListener('click',function () {
  alert('hahah')
  })

更多事件可以参考：http://www.w3school.com.cn/jsref/jsref_events.asp