2017.9.22 HTML学习总结--JavaScript脚本语言

接上：

1.JavaScript脚本语言

定义：javascript是一种简单的脚本语言，可以在浏览器中直接运行，

　　　是一种在浏览器端实现网页与客户交互的技术javascript代码可

　　　以直接运行在html网页中，它响应一系列的事件，当一个javascript

　　　函数响应一系列的事件，当一个javascript函数响应动作时，浏览

　　　器就执行对应的代码。

基本用法：

　　组成：

　　　数据类型：主要类型有int、float、string、boolean、null

　　　常量变量：（1）变量的声明：var 变量名=“值”

　　　　　　　　（2）数组的声明：1.var array1=new Array（）;

　　　　　　　　（3）运算符:算术运算符、逻辑运算符、关系运算符、字符串运算符、位操作运算符；

　　　　　　　（4）控制语句：if else

函数的定义和使用：

<script> 标记对封装代码，且必须放在<head> <head>之间，其语法格式：

　<head>

　　　<script language=“javascript”>

　　　　　　function functionName（【parameter1，parameter2，。。。。】）{

　　　　　　　　//处理有关的语句；

　　　　　　}

　　　　</script>

　　　　</head>

2.javascript的事件　　

　　在浏览器中网页与客户的交互都是通过事件引发的，当一个事件发生时，

例如：“用户单击某个按钮”浏览器认为在这个按钮上发生了一个click事件，

然后根据该按钮所定义的事件处理函数，执行相应的javascript脚本。

常用的事件、事件处理的函数列表

　　事件　　　　　　　　事件处理函数名　　　　　　　　何时触发

　　blur　　　　　　　　 onBlue　　　　　　　　　　元素或窗口本身失去焦点时触发

　　change　　　　　　　 onChange　　　　　　　　当表单元素获取焦点，且内容值发生改变时触发

　　click　　　　　　　　onClick 　　　　　　单击鼠标左键时触发

　　keydown 　　　　　 onKeydown　　　　　　　　键盘键被按下时触发，如果一直按着某键，则会不断触发

　　select　　　　　　　 onSelect　　　　　　　　选中文本时触发　

　　submit 　　　　　onSubmit　　　　　　　　　　单击提交按钮时，在<form>上触发

　　unload 　　　onUnload　　　　　　　　　　页面完全卸载后，在window对象上触发

2.2 在HTML中引用（指定）事件处理函数

　　在HTML中指定事件处理程序，需要在html标记中添加相应的事件处理程序的属性，

并在其中指定作为属性值的代码或是函数名。

　　使用格式：

　<标签各有关属性及其属性值 on事件名称=“函数名称（参数）”>

例如：

引发一个单击事件，该事件的处理函数名是onClick（），其要完成的功能是通过函数test()实现，

而函数test()的功能是现实一个提示对话窗口（有window的alert方法完成）

<html>

　　<head>

　　　<title>单击按钮事件实例</title>

　　　<script language="javascript">

　　　　function test(){

　　　　　　window.alert("事件引发一操作，并成功执行了这个操作！！！")；

　　　　}

　　　</script>

　　　</head>

　　　<body>

　　　　<form action="">

　　　　　　<input type="Buttom" value="警告对话框" onclick="test()"><br/>

　　　　</form>

　　　</body>

　　</html>

3.javascript的对象

　　javascript中设有内置对象，常用的内置对象有String\Data\和浏览器

的文档对象（window、navigator、screen、history、location、document）

　　3.1 window对象属性的常用方法

　　　　alert()　　　　　　弹出一个警告对话框　　

　　　　comfirm()　　　　　显示一个“确认”对话框，单击“确认”按钮时返回true，否则返回false

　　　　prompt()　　　　　弹出一个提示对话框，并要求输入一个简单的字符串

　　　　setTimeout(timer)　在经过指定的时间后执行代码

　　　　clearTimeout()　取消对指定代码的延迟执行

　　　　setInterval()　　　周期执行指定的代码

　　　　clearInterVal()　　停止周期性的执行代码

其中警告对话框window.alert()和window.confirm()是使用较多的

　3.2 location对象

　　·location对象实现网页页面的跳转。在html中使用aa来实现页面来跳转，

　　在javascript中，利用location对象实现页面自动的跳转

　　·使用格式：

　　　　　window.location.href=“网页路径”

　　　　例如：跳转到搜狐网页：window location href=“http://www.souhu.com”

1.3 history 对象

　·length属性浏览历史记录的总数

　·go(index)方法　　从浏览历史中加载URL，index参数是加载URL的相对路径，

　　　　　　　　　　　index为负数时，表示当地址之前的浏览记录，index正数时，

　　　　　　　　　　　表示当前地址之后的浏览记录.

　·forward()方法　从浏览历史中加载下一个URL，相当于history.go()

　·back()方法从浏览历史中加载上一个URL，相当于history.go(-1)

例如：从当前网页，回退到刚访问过的上一个网页页面，需要语句为：

　　window.history.back()或者 window.history.go(-1)

　　3.4 document对象

　　（1）或者表单域对象；通过表单访问和直接访问

　　　　假设有以下表单：

　　　　<form action="" name="form1">

　　　　　　<input type="text" name="t1" value="">.

　　　　　　</form>

则可以通过以下方法获取输入域的对象：

（3.4.1）通过表单访问：

　　·var fObj=document.form1.t1; //form1为表单的名字，t1为某表单域的name值

　　·var fObj=document.form1.elements["t1"]; //form1为表单的名字，t1为某表单域的name值

　　·var fObj=document.forms[0].t1; //不使用表单名字，采用表单集合，【0】表示第一个表单

（3.4.2）直接访问：

　　·var fOb=document.getElementsByName("t1")[0];//通过名字访问，t1为某表单域的name值

　　·var fOb=document.getElementById("t1"); //通过id访问，t1为某表单域的id值

　　·var fOb=document.all("t1").value; //通过名字访问，t1为某表单域的name值

2017.9.22 HTML学习总结--JavaScript脚本语言的更多相关文章

JavaScript脚本语言基础（一）
导读: JavaScript代码嵌入HTML文档 JavaScript代码运行方式第一个实例 JavaScript的三种对话框定义JavaScript变量 JavaScript运算符和操作符 Ja ...
9月12日JavaScript脚本语言
JS脚本语言 JS脚本语言全称JavaScript,是网页里面使用的脚本语言,也是一门非常强大的语言. 一.基础语法 1.注释语法单行注释:// 多行注释:/**/ 2.输出语法 ①alert(信息 ...
JavaScript脚本语言基础（四）
导读: JavaScript和DOM DOM文档对象常用方法和属性 DOW文档对象运用 JSON数据交换格式正则表达式 1.JavaScript和DOM [返回] 文档对象模型(Document O ...
VBA中使用JavaScript脚本语言解析JSON数据
JSON:JavaScript 对象表示法(JavaScript Object Notation) 和xml相似,都是文本形式(保存在文本文件中或字符串等形式),比如: jsstr = {" ...
JavaScript脚本语言基础（二）
导读: JavaScript条件语句 JavaScript循环语句 JavaScript网页中错误捕获 JavaScript的Break和Continue命令 JavaScript的转义字符 1.Ja ...
JavaScript脚本语言基础（三）
导读: 数学对象(Math) 数组对象(Array) 字符串对象(String) 日期对象(Date) js对象是属性和方法的集合.JavaScript中的所有事物都是对象,如:字符串.数值.数组.函 ...
2017.9.23 HTML学习总结----JavaScript实现输入验证
定义:对于一个HTML页面中的表单,可以获取其中的各项表单域信息, 利用这些信息,可以判定个表单域所提供的输入值是否合法,是否符合所要求的格式,这就是表单的输入验证. (1)需要验证的表单输入域的要 ...
OpenJDK源码研究笔记(十六):在Java中使用JavaScript脚本语言
友情提示本文主要参考了51CTO上的一篇文章,代码经过自己的模仿和整理,还算凑合. 本文中的代码注释比较多,不再过多解释. 更多用法,还是得看JDK的API或者看原文http://developer ...
关于JavaScript(脚本语言)
1.typeof运算符:判断一个对象是否是什么类型,返回“” 一.数字类型(Number) 1.javascript不擅长计算,不能用于浮点数的计算.如:var a = 0.2; var b = 0. ...

随机推荐

在word2010中添加带滚动条的文本框
由于文件内容过长,为了加强文章的可读性,可以添加一个带滚动条的文本框,既能使文章看起来干净整洁,同时也极大的提高了文章的可读性. 我这里对在word2010中文本框带滚动条作个介绍: 1. 打开wor ...
STL-----c++标准模板
一.排序和检索 1.sort(v.begin,v.end) 2.lower_bound(v.begin,v.end,x)
py---------常用模块2
一.hashilb 模块 python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固 ...
line-height 150%和1.5的区别
好惨啊,九点多了没事做还不能下班,坑爹的测试啊~~~ 刚才拿这个问题调戏了下部门一位资深前端开发,结果发现,他居然不会,呵呵~~~ 这里就说下吧 html: <div class="p ...
express --- session详解
之前一直做前端相关的工作,所以不太清楚session,也没有主动了解,最近在学node,对session的认识又有所加深,故总结之. 注: 关于session的一些配置问题,可以看这里. 第一部分: ...
自定义java代码快捷生成器使用与问题解决
对于很多的工作了有几年的开发人员来说,初期都是逐个单词语法的自己编写的.而一旦技术水平提高了到了一定的层次之后,在同时工作量的加大,要求我们必须加快提高工作效率.因此就可以利用必要的快捷开发手段和工具 ...
HDU 5379——Mahjong tree——————【搜索】
Mahjong tree Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
C++ 虚函数、纯虚函数、虚继承
1)C++利用虚函数来实现多态. 程序执行时的多态性通过虚函数体现,实现运行时多态性的机制称爲动态绑定:与编译时的多态性(通过函数重载.运算符重载体现,称爲静态绑定)相对应. 在成员函数的声明前加上v ...
SSRS 参数单选多选
前段时间公司要求报表的选项可以多选. 知道需求后,研究了下实现. 首先我们创建一个报表,然后添加3个数据集,2个参数,如下图. DataSet1数据集:存放主数据. ddl_emplid数据集:存放 ...
设置 text-align: center；line-height:height 居中无效
1.设置文字水平居中内联元素(行内元素)使用: text-align: center: 使用后文字仍然没有居中解决方法:设置width:100%: 块元素使用: margin: 0 auto; 2 ...

2017.9.22 HTML学习总结--JavaScript脚本语言

接上：

1.JavaScript脚本语言

定义：javascript是一种简单的脚本语言，可以在浏览器中直接运行，

是一种在浏览器端实现网页与客户交互的技术javascript代码可

以直接运行在html网页中，它响应一系列的事件，当一个javascript

函数响应一系列的事件，当一个javascript函数响应动作时，浏览

器就执行对应的代码。

基本用法：

组成：

数据类型：主要类型有int、float、string、boolean、null

常量变量：（1）变量的声明：var 变量名=“值”

（2）数组的声明：1.var array1=new Array（）;

（3）运算符:算术运算符、逻辑运算符、关系运算符、字符串运算符、位操作运算符；

（4）控制语句：if else

函数的定义和使用：

<script> 标记对封装代码，且必须放在<head> <head>之间，其语法格式：

<head>

<script language=“javascript”>

function functionName（【parameter1，parameter2，。。。。】）{

//处理有关的语句；

}

</script>

</head>

2.javascript的事件

在浏览器中网页与客户的交互都是通过事件引发的，当一个事件发生时，

例如：“用户单击某个按钮”浏览器认为在这个按钮上发生了一个click事件，

然后根据该按钮所定义的事件处理函数，执行相应的javascript脚本。

常用的事件、事件处理的函数列表

事件 事件处理函数名 何时触发

blur onBlue 元素或窗口本身失去焦点时触发

change onChange 当表单元素获取焦点，且内容值发生改变时触发

click onClick 单击鼠标左键时触发

keydown onKeydown 键盘键被按下时触发，如果一直按着某键，则会不断触发

select onSelect 选中文本时触发

submit onSubmit 单击提交按钮时，在<form>上触发

unload onUnload 页面完全卸载后，在window对象上触发

2.2 在HTML中引用（指定）事件处理函数

在HTML中指定事件处理程序，需要在html标记中添加相应的事件处理程序的属性，

并在其中指定作为属性值的代码或是函数名。

使用格式：

<标签 各有关属性及其属性值 on事件名称=“函数名称（参数）”>

例如：

引发一个单击事件，该事件的处理函数名是onClick（），其要完成的功能是通过函数test()实现，

而函数test()的功能是现实一个提示对话窗口（有window的alert方法完成）

3.javascript的对象

javascript中设有内置对象，常用的内置对象有String\Data\和浏览器

的文档对象（window、navigator、screen、history、location、document）

3.1 window对象属性的常用方法

alert() 弹出一个警告对话框

comfirm() 显示一个“确认”对话框，单击“确认”按钮时返回true，否则返回false

prompt() 弹出一个提示对话框，并要求输入一个简单的字符串

setTimeout(timer) 在经过指定的时间后执行代码

clearTimeout() 取消对指定代码的延迟执行

setInterval() 周期执行指定的代码

clearInterVal() 停止周期性的执行代码

其中警告对话框window.alert()和window.confirm()是使用较多的

3.2 location对象

·location对象实现网页页面的跳转。在html中使用aa来实现页面来跳转，

在javascript中，利用location对象实现页面自动的跳转

·使用格式：

window.location.href=“网页路径”

例如：跳转到搜狐网页：window location href=“http://www.souhu.com”

1.3 history 对象

·length属性 浏览历史记录的总数

·go(index)方法 从浏览历史中加载URL，index参数是加载URL的相对路径，

index为负数时，表示当地址之前的浏览记录，index正数时，

表示当前地址之后的浏览记录.

·forward()方法 从浏览历史中加载下一个URL，相当于history.go()

·back()方法 从浏览历史中加载上一个URL，相当于history.go(-1)

例如：从当前网页，回退到刚访问过的上一个网页页面，需要语句为：

window.history.back()或者 window.history.go(-1)

3.4 document对象

（1）或者表单域对象；通过表单访问和直接访问

假设有以下表单：

<form action="" name="form1">

<input type="text" name="t1" value="">.

</form>

则可以通过以下方法获取输入域的对象：

（3.4.1）通过表单访问：

　　　是一种在浏览器端实现网页与客户交互的技术javascript代码可

　　　以直接运行在html网页中，它响应一系列的事件，当一个javascript

　　　函数响应一系列的事件，当一个javascript函数响应动作时，浏览

　　　器就执行对应的代码。

　　组成：

　　　数据类型：主要类型有int、float、string、boolean、null

　　　常量变量：（1）变量的声明：var 变量名=“值”

　　　　　　　　（2）数组的声明：1.var array1=new Array（）;

　　　　　　　　（3）运算符:算术运算符、逻辑运算符、关系运算符、字符串运算符、位操作运算符；

　　　　　　　（4）控制语句：if else

　<head>

　　　<script language=“javascript”>

　　　　　　function functionName（【parameter1，parameter2，。。。。】）{

　　　　　　　　//处理有关的语句；

　　　　　　}

　　　　</script>

　　　　</head>

2.javascript的事件　　

　　在浏览器中网页与客户的交互都是通过事件引发的，当一个事件发生时，

　　事件　　　　　　　　事件处理函数名　　　　　　　　何时触发

　　blur　　　　　　　　 onBlue　　　　　　　　　　元素或窗口本身失去焦点时触发

　　change　　　　　　　 onChange　　　　　　　　当表单元素获取焦点，且内容值发生改变时触发

　　click　　　　　　　　onClick 　　　　　　单击鼠标左键时触发

　　keydown 　　　　　 onKeydown　　　　　　　　键盘键被按下时触发，如果一直按着某键，则会不断触发

　　select　　　　　　　 onSelect　　　　　　　　选中文本时触发　

　　submit 　　　　　onSubmit　　　　　　　　　　单击提交按钮时，在<form>上触发

　　unload 　　　onUnload　　　　　　　　　　页面完全卸载后，在window对象上触发

　　在HTML中指定事件处理程序，需要在html标记中添加相应的事件处理程序的属性，

　　使用格式：

　<标签各有关属性及其属性值 on事件名称=“函数名称（参数）”>

　　javascript中设有内置对象，常用的内置对象有String\Data\和浏览器

　　3.1 window对象属性的常用方法

　　　　alert()　　　　　　弹出一个警告对话框　　

　　　　comfirm()　　　　　显示一个“确认”对话框，单击“确认”按钮时返回true，否则返回false

　　　　prompt()　　　　　弹出一个提示对话框，并要求输入一个简单的字符串

　　　　setTimeout(timer)　在经过指定的时间后执行代码

　　　　clearTimeout()　取消对指定代码的延迟执行

　　　　setInterval()　　　周期执行指定的代码

　　　　clearInterVal()　　停止周期性的执行代码

　3.2 location对象

　　·location对象实现网页页面的跳转。在html中使用aa来实现页面来跳转，

　　在javascript中，利用location对象实现页面自动的跳转

　　·使用格式：

　　　　　window.location.href=“网页路径”

　　　　例如：跳转到搜狐网页：window location href=“http://www.souhu.com”

　·length属性浏览历史记录的总数

　·go(index)方法　　从浏览历史中加载URL，index参数是加载URL的相对路径，

　　　　　　　　　　　index为负数时，表示当地址之前的浏览记录，index正数时，

　　　　　　　　　　　表示当前地址之后的浏览记录.

　·forward()方法　从浏览历史中加载下一个URL，相当于history.go()

　·back()方法从浏览历史中加载上一个URL，相当于history.go(-1)

　　window.history.back()或者 window.history.go(-1)

　　3.4 document对象

　　（1）或者表单域对象；通过表单访问和直接访问

　　　　假设有以下表单：

　　　　<form action="" name="form1">

　　　　　　<input type="text" name="t1" value="">.

　　　　　　</form>

　　·var fObj=document.form1.t1; //form1为表单的名字，t1为某表单域的name值

　　·var fObj=document.form1.elements["t1"]; //form1为表单的名字，t1为某表单域的name值

　　·var fObj=document.forms[0].t1; //不使用表单名字，采用表单集合，【0】表示第一个表单

　　·var fOb=document.getElementsByName("t1")[0];//通过名字访问，t1为某表单域的name值

　　·var fOb=document.getElementById("t1"); //通过id访问，t1为某表单域的id值

　　·var fOb=document.all("t1").value; //通过名字访问，t1为某表单域的name值