javaweb(3):JavaScript
2019-10-18 08:35:33来源:博客园 阅读 ()
javaweb(3):JavaScript
1. JavaScript的概述
1.1 什么是JavaScript
JavaScript是web上一种功能强大的编程语言,用于开发交互式的web页面。它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行。
JavaScript被设计用来向HTML页面添加交互行为。
JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)。
JavaScript由数行可执行计算机代码组成。
JavaScript通常被直接嵌入HTML页面。
JavaScript是一种解释性语言(就是说,代码执行不进行预编译)。
JavaScript的组成:
核心(ECMAScript)
文档对象模型(DOM)
浏览器对象模型(BOM)
ECMAScript:语法,语句.
BOM:浏览器对象.
DOM:Document Object Model.操作文档中的元素和内容.
1.2 JavaScript的作用
使用JavaScript添加页面动画效果,提供用户操作体验。主要应用有:嵌入动态文本于HTML页面、对浏览器事件作出相应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。
1.3 JavaScript的引入
在HTML文件中引入JavaScript有两种方式,一种是在HTML文档直接嵌入JavaScript脚本,称为内嵌式,另一种是连接外部JavaScript脚本文件,称为外链式。对他们的具体讲解如下:
(1)内嵌式,在HTML文档中,通过<script>标签引入,如下
<script type="text/javascript"> //此处为JavaScript代码 </script>
(2)外联式,在HTML文档中,通过<script src="">标签引入.js文件,如下:
<script src="1.js" type="text/javascript" charset="UTF-8"></script>
2. 基本语法
2.1 变量
(1)在使用JavaScript时,需要遵循以下命名规范:
必须以字母或下划线开头,中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名,如:function
JavaScript严格区分大小写。
(2)变量的声明
var 变量名; /JavaScript变量可以不声明,直接使用,默认值:undefined
(3)变量的赋值
var 变量名 = 值; //JavaScript变量是弱类型,及同一个变量可以存放不同类型的数据
2.2 数据类型
【基本类型】
Undefined,Undefined类型只有一个值,即undefined。当声明的变量未初始化时,该变量的默认值是undefined。
Null,只有一个专用值null,表示空,一个占位符。值undefined实际上是从值null派生来的,因此ECMAScript把它们定义为相等的。
alert(null == undefined); //输出 "true",尽管这两个值相等,但它们的含义不同。
Boolean,有两个值true和false
Number,表示任意数字
String,字符串由双引号(")或单引号(')声明的。JavaScript没有字符类型
对变量或值调用typeof运算符将返回下列值之一:
undefined-如果变量是Undefined类型的
boolean-如果变量是Boolean类型的
number-如果变量是Number类型的
string-如果变量是String类型的
object-如果变量是一种引用类型或Null类型的
【引用类型】
引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。
JavaScript是基于对象而不是面向对象。对象类型的默认值是null。
JavaScript提供众多预定义引用类型(内置对象)。
2.3 运算符
JavaScript运算符与java运算符基本一致。可以看我的java基础随笔
2.4 基本操作
alert():向页面中弹出一个提示框!!
innerHTML:向页面的某个元素中写一段内容,将原有的东西覆盖
document.write():向页面中写内容
2.5 js中函数的编写方式:
函数:实现一定功能的代码块,类似与java中的方法。关键字function,函数名自定义。
<script type="text/javascript"> //方式1:声明函数 function demo01(){ alert("案例1"); } //方式1:调用函数 demo01(); //方式2:声明匿名函数 var demo02 = function(){ alert("案例2"); }; //方式2:调用函数 demo02(); </script>
3. 案例:轮播图
3.1 定时器setInterval
window.setInterval(code,millisec) 按照指定的周期(间隔)来执行函数或代码片段。 参数1:code必须。执行的函数名或执行的代码字符串。 参数2:millisec必须。时间间隔,单位:毫秒。 返回值:一个可以传递给window.clearinIerval()从而取消对code的周期性执行的值。 例如: 方式1:函数名, setInterval(show , 100); 方式2:函数字符串, setInterval(""show() , 100);
window对象提供都是全局函数,调用函数时window可以省略。
window.setInterval()等效setInterval()
3.2 案例实现
步骤1:为轮播图img标签添加id属性
<div style="width: 100%;"> <img id="imgId" src="img/1.jpg" width="100%"/> </div>
步骤2:编写js代码,页面加载触发指定函数
<script type="text/javascript"> //加载成功启动监听器,5秒执行一次 window.onload = function(){ setInterval(changeImage , 2000) } //在3张照片之间切换 var num = 1; function changeImage(){ if(num >= 3){ num = 1; } var imageobj = document.getElementById("imgId"); imageobj.src = "img/"+ num++ +".jpg" } </script>
4. 案例:定时弹广告
4.1 定时器:setTimeout
setTimeout()在指定的毫秒数后调用函数或执行代码片段。
setTimeout(code,millisec)
code 必需。要调用的函数或要执行的代码字符串。
millisec 必需。在执行代码前需等待的毫秒数。
setInterval() 以指定周期执行函数或代码片段。
clearInterval() 取消由setInterval()设置的timeout。
clearTimeout() 取消由setTimeout()方法设置的timeout。
4.2 JavaScript样式获得或修改
获得或设置样式
obj.style.属性 获得指定"属性"的值。 obj.style.属性=值 给指定的"属性"设置内容。 如果属性由多个单词使用"-"连接,需要将"-"删除,并将后一个单词首字母大写。 例如:background-color 需要改成 backgroundColor
实例:
<div id="divId" style="height: 100px;width: 100px;margin: 10px;padding: 20px;background-color: red;">小灰灰</div> <script type="text/javascript"> //1 获得div对象 var divObj = document.getElementById("divId"); //2 获得高度 // divObj.style.height 数据为"100px" // 使用parseInt() , 将字符串"100px"转换成数字"100" var height = window.parseInt(divObj.style.height); //3 将原始高度翻倍,再设置给div。 divObj.style.height = height * 2 + "px"; </script>
4.3 案例实现
步骤1:在页面中,添加广告位div,并设置页面加载事件
<body onload="init()"> <!-- 整体的DIV --> <div> <!-- 定时弹出广告的div --> <div id="divAd" style="width: 99%;display: none;"> <img src="img/1.jpg" width="100%"/> </div> </div> </body>
步骤2:编程JS实现
<!-- 在html页面中引入js文件 --> <script src="js/ad.js"> </script>
ad.js代码
var time; function init(){ //设置定时操作 time = setInterval("showAd()",5000); } function showAd(){ //获得div元素 var divAd = document.getElementById("divAd"); divAd.style.display = "block"; //清除之前的定时操作 clearInterval(time); //重新设置一个定时:5秒钟隐藏 time = setInterval("hideAd()",5000); } function hideAd(){ //获得div元素 var divAd = document.getElementById("divAd"); divAd.style.display = "none"; clearInterval(time); }
5. BOM(Browse Object Mode)
5.1 Browse 对象
DOM Window
DOM Navigator
DOM Screen
DOM History
DOM Location
5.2 BOM:Window对象
方法:定时器
setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval():取消由setInterval() 设置的timeout。
setTimeout():在指定的毫秒数后调用函数或计算表达式。
clearTimeout():取消由setTimeout() 方法设置的timeou。
方法:消息框
alert():显示带有一段消息和一个确认按钮的警告框。
confirm():显示带有一段消息以及确认按钮和取消按钮的确认框。
prompt():xian's可提示用户输入的提示框。
Window尺寸
1) IE9 (含,及以上),Chrome、 Firefox 等其他浏览器获得方式
windowinnerHeight -浏览器窗口的内部高度
windowinnerWidth-浏览器窗口的内部宽度
2) Internet Explorer8、7、6、5
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document. body.clientW idth
兼容所有浏览器的JS实现方案:
var w=window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight;
5.3 BOM:Location对象
href属性:设置或返回完整的URL。
hash:设置或返回从井号(#) 开始的URL (锚)。
host:设置或返回主机名和当前URL 的端口号。
hostname:设置或返回当前URL 的主机名。
href:设置或返回完整的URL。
pathname:设置或返回当前URL的路径部分。
port:设置或返回当前URL 的端口号。
protocol:设置或返回当前URL的协议。
search:设置或返回从问号(?) 开始的URL (查询部分)。
<script type="text/javascript"> function change () f location.href = "http: / /www. ithe ima. com" ; ) </script> <input type="button"' value="5ft"onclick="change()"/>
5.4 BOM:History对象
go()方法:跳转到指定页面
go(-1):加载前一个链接,等效back()
go(1):加载后一个链接,等效forward()
back():加载history 列表中的前一个URL。
forward():加载history 列表中的下一个URL。
go():加载history 列表中的某个具体页面。
6. JS操作HTML、事件
6.1 标签体内容:innerHTML
innerHTML-HTML元素的内部文本
获得:document.getElementById("divId").innerHTML
设置:document.getElementById("divId").innerHTML = "...."
6.2 获得指定的id的值
提供函数val(objId)获得指定id属性对应元素value的值
/** * 获得二指定元素value属性的值 * 例如:var loginName = val("loginnameId"); */ function val (objId) f return document.getElementById(objId).value; )
6.3 错误提示
当标签没有验证通过时,给出提示信息。如果校验通过隐藏错误提示信息
/** * 2.1 显示错误提示信息 * 例如:showTip("loginnameIdMsg","用户名不能为空"); */ function showTip(errObjId, text ) { //获得错误提示对象,并设置和显示 var showObj = document.getElementById(errObjId) ; showObj.innerHTML = text; showObj.style.display = "block" ; } /** * 2.2 显示错误提示信息 */ function hideTip() ( var showObj = document . getEl ementById (errObjId) ; showObj.innerHTML = ""; showObj.style.display = "none"; }
6.4 获得焦点
/** * 3 获得焦点 */ function focus (objId) { //指定标签获得焦点 document。getElementById(objId).focus(); }
6.5 事件总结
常见事件:
onload:某个页面或图像被完成加载
onsubmit:提交按钮被点击
onclick:鼠标点击某个对象
ondblclick:鼠标双击某个对象
onblur:元素失去焦点
onfocus:元素获得焦点
onchange:用户改变域的内容
onkeydown:某个键盘的键被按下
onkeypress:某个键盘的键被按下或按住
onkeyup:某个键盘的键被松开
onmousedown:某个鼠标按键被按下
onmouseup:某个鼠标按键被松开
onmouseover:鼠标被移到某元素之上
onmouseout:鼠标从某元素移开
onmousemove:鼠标被移动
event属性:
clientX:返回当事件被触发时,鼠标指针的水平坐标。
clientY:返回当事件被触发时,鼠标指针的垂直坐标。
keyCode:返回当事件被触发时,键盘输入ASCII码。
event方法:
preventDefault():阻止浏览器默认行为
stopPropagation():阻止事件的传播
阻止浏览器默认行为
<a href="http://www.baidu.com" onclick="one() ">百度</a><br/> <a href="http://www.taobao.com" onclick=" return two() ">淘宝</a><br/> <script type="text/javascript"> function one () { alert("我之后,百度官网継銕彷向") ; } function two (event) { alert("我之后,淘宝不再坊向") ; //方式1: //return false; //方式2: var event = event || window. event ; event.preventDefault () ; } </ script>
阻止事件的传播
<!-- 区域1 --> <div id="e1" style-"width:200px ; height: 200px; background-color: #f00;"> <div id="e2" style= "width: 100px ; height: 100px; background-color: #0f0;"></div> </div> <hr /> <!-- 区域2 --> <div id="e3" style="width:200px ; height: 200px; background-color: #f00;"> <div id="e4" style="width: 100px ; height: 100px; background-color: #0f0;"></div> </div> <script type-"text/javascript"> var el = document.getElementById("e1"); var e2 = document.getElementById("e2"); var e3 = document.getElementById("e3"); var e4 = document.getElementById("e4") ; //设置“区域1”事件 el,onclick.function() { alert("e1") ; } e2,onclick.function() { alert("e2, 同时el也触发"); } //设置“区域2”事件 e3.onclick = function() { alert ("e3"); } e4.onclick = function (event) { alert("e4, e3不触发"); var event = event || window.event; event.stopPropagation(); } </script>
原文链接:https://www.cnblogs.com/liuhui0308/p/11681712.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Java工程师学习指南(入门篇)
下一篇:Java之路---Day03
- 书籍分享《JavaScript高级程序设计》高清DPF版 2020-05-18
- JavaWeb 之 EL与JSTL 2020-05-06
- JavaWeb会话技术之Session 2020-05-02
- JavaWeb-监听器入门 2020-04-29
- Javaweb 基础知识 2020-04-24
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash