JavaScript

最新推荐文章于 2024-08-14 15:45:18 发布

swjtueducn2012

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量73

点赞数

分类专栏： JavaScript 文章标签： javascript 人工智能 ViewUI

本文链接：https://blog.csdn.net/swjtueducn2012/article/details/84696439

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[b][size=large]JS教程[/size][/b]
[color=red]JavaScript简介[/color]
1 JavaScript 是脚本语言
2 JavaScript 是一种轻量级的编程语言。
3 JavaScript 是可插入 HTML 页面的编程代码。
4 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

[color=red]JavaScript使用[/color]
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

[color=red]JavaScript 输出[/color]
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

[color=red]JavaScript 语句[/color]
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

[color=red]JavaScript 注释[/color]
单行注释以 // 开头
多行注释以 /* 开始，以 */ 结尾。

[color=red]JavaScript 变量[/color]
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

[color=red]JavaScript 数据类型[/color]
字符串、数字、布尔、数组、对象、Null、Undefined。
Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

[color=red]JavaScript 对象[/color]
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。

[color=red]JavaScript 函数[/color]
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
<script>
function myFunction() {
alert("Hello World!");
}
</script>

[color=red]JavaScript 运算符[/color]
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3090/233a1fec-79c0-3571-b85c-17fc31c9501a.jpg[/img]

[color=red]JavaScript 比较和逻辑运算符[/color]
比较和逻辑运算符用于测试 true 或 false。
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3092/50ea9092-4e7b-313b-b042-0df4020eb236.png[/img]

[color=red]JavaScript If...Else 语句[/color]
条件语句用于基于不同的条件来执行不同的动作。

[color=red]JavaScript Switch 语句 [/color]
switch 语句用于基于不同的条件来执行不同的动作。
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3094/a73c562c-c259-3d8a-94ab-fb5b728efda0.png[/img]

[color=red]JavaScript For 循环[/color]
循环可以将代码块执行指定的次数。
不同类型的循环
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

[color=red]JavaScript While 循环[/color]
只要指定条件为 true，循环就可以一直执行代码。

[color=red]JavaScript Break 和 Continue 语句[/color]
break 语句用于跳出循环。
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

[color=red]JavaScript 错误 - Throw、Try 和 Catch[/color]
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

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

[b][size=large]JS HTML DOM[/size][/b]

[color=red]JavaScript HTML DOM[/color]
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model ）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3096/d197596e-46ce-3d5e-9d3b-c1a0b926e3b4.png[/img]

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

[color=red]JavaScript HTML DOM - 改变 HTML[/color]
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
document.getElementById("p1").innerHTML="New text!";
document.getElementById("image").src="landscape.jpg";

[color=red]JavaScript HTML DOM - 改变 CSS[/color]
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
document.getElementById(id).style.property=new style；
document.getElementById("p2").style.color="blue";

[color=red]JavaScript HTML DOM 事件[/color]
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
οnclick=JavaScript
HTML 事件的例子：
。当用户点击鼠标时
。当网页已加载时
。当图像已加载时
。当鼠标移动到元素上时
。当输入字段被改变时
。当提交 HTML 表单时
。当用户触发按键时

[color=red]JavaScript HTML DOM 元素（节点）[/color]
添加和删除节点（HTML 元素）。
创建新的 HTML 元素
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3098/f1d8ee1a-6f37-3d2d-9c10-00eebf329cd3.jpg[/img]

删除已有的 HTML 元素
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3100/a05496f6-3f72-35d3-8794-7024dfed50e2.jpg[/img]

[b][size=large]JS 对象[/size][/b]

[color=darkred]JavaScript 对象[/color]
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
如：string.length

[color=red]JavaScript Number 对象[/color]
JavaScript 只有一种数字类型。
可以使用也可以不使用小数点来书写数字。
八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数
var y=0377;
var z=0xFF;
数字属性和方法
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3102/bb330f8b-9b50-3695-bbc8-474b51d5c73b.png[/img]

[color=red]JavaScript 字符串(String)对象[/color]
String 对象用于处理已有的字符块。
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3104/1861edab-3c4d-30ac-b3c3-f1cc878da04f.png[/img]

[color=red]JavaScript Date（日期）对象[/color]
日期对象用于处理日期和时间。
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3107/560474db-fbc4-3d54-99ff-bcd22a9bd5bd.png[/img]

注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

[color=red]JavaScript Array（数组）对象[/color]
数组对象的作用是：使用单独的变量名来存储一系列的值。
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3109/e295b3a6-c42a-3fed-9c06-d868a58e2854.png[/img]

var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量：
var mycars=new Array(3)
var mycars=new Array("Saab","Volvo","BMW")

[color=red]JavaScript Boolean（逻辑）对象[/color]
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

[color=red]JavaScript Math（算数）对象[/color]
Math（算数）对象的作用是：执行常见的算数任务。
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3111/db33a992-a2e8-3c76-bddb-785f0ba5b5e9.png[/img]

[color=red]JavaScript RegExp 对象[/color]
RegExp 对象用于规定在文本中检索的内容。
RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
定义 RegExp var patt1=new RegExp("e");当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
以上代码的输出将是：true
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
以上代码的输出将是：e
compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
以上代码的输出是：truefalse

[b][size=large]JS Window [/size][/b]

[color=red]JavaScript Window - 浏览器对象模型[/color]
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
浏览器对象模型 (BOM)
浏览器对象模型（Browser Object Model）尚无正式标准。
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
Window 尺寸

[color=red]JavaScript Window Screen[/color]
window.screen 对象包含有关用户屏幕的信息。
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

[color=red]JavaScript Window Location[/color]
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。
一些例子：
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3114/18dc8dfd-8162-32a6-8e4c-433cbc9d6cf1.png[/img]

[color=red]History---浏览器历史信息[/color]
window.history 对象包含浏览器的历史。
window.history 对象在编写时可不使用 window 这个前缀。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同。
history.go(n):正数表示向前，负数表示向后

[color=red]Navigator---浏览器资料信息[/color]
window.navigator 对象包含有关访问者浏览器的信息。
window.navigator 对象在编写时可不使用 window 这个前缀。
navigator.appCodeName 返回当前浏览器代码名字
navigator.appName 返回浏览器名。
navigator.appVersion 返回浏览器版本，包括了大版本号、小版本号、语言、操作平台等信息。
navigator.cookieEnabled
navigator.systemLanguage 语言
navigator.userAgent 返回以上全部信息。

[color=red]PopupAlert---消息框 [/color]
消息框（警告框、确认框、提示框）
警告框：alert("文本")；
确认框：confirm("文本")如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
提示框：prompt("文本","默认值")如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

[color=red]Timing---计时[/color]
在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout() 未来的某时执行代码.
clearTimeout() 取消setTimeout()
<html>

<head>
<script type="text/javascript">
var c=0
var t

function timedCount(){
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount(){
clearTimeout(t)
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>

</html>

Cookies---用来识别用户

swjtueducn2012

关注

0
点赞
踩
0

收藏

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

[b][size=large]JS教程[/size][/b][color=red]JavaScript简介[/color] 1 JavaScript 是脚本语言 2 JavaScript 是一种轻量级的编程语言。 3 JavaScript 是可插入 HTML 页面的编程代码。 4 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。[...
复制链接

扫一扫

专栏目录