JavaWeb前端: JavaScript 简介
JavaScript基本概念
什么是JavaScript
- JS是运行在浏览器里的解释性语言，能实现浏览器端和用户的直接交互（HTML输出/响应事件/改变HTML内容图像样式）；除了变量不区分类型以外，语法和Java类似，有几乎相同的流程控制语法，变量操作符，异常处理。
JavaScript有什么作用
JavaScript主要用于实现前端的动态交互：
- JS操作DOM元素：浏览器根据HTML规范把HTML文档渲染成一棵DOM树,HTML标签对应一个个元素,HTML标签内的属性对应为元素的属性,HTML标签关联的文本对应为元素的文本.JS 可以根据HTML标签对应的（标签名，id, class） 查找到标签对应的元素，并且通过元素取出对应的属性值/文本值/样式，并对这些进行更改；达到动态交互的效果
- JS响应用户请求事件：JS可以捕获Web页面上各个元素的事件状态(鼠标事件，键盘事件)，并且通过脚本动态的响应用户的请求。前段的交互(字段的校验：邮箱格式/用户名格式/日期格式/是否为空，计时，UI展现的动态效果..)都应该由JS来实现，速度快并且不对后台服务器造成压力。
JS开发注意事项
- JS可以引入到Html中，也可以直接定义在Html中；一个HTML里面可以有多个JS片段，这些JS片段按页面的先后顺序执行。通常把JS Function定义在Head中，把JS脚本定义在Body的最底端，避免先后顺序造成的JS执行异常。
Javascript有执行顺序和引入顺序！！！
Javascript有执行顺序和引入顺序！！！
Javascript有执行顺序和引入顺序！！！ 重要的事情说三遍，metisMenu Jquery插件调试了好几天都没有运行成功，后来发现是引入顺序的问题。metisMenu方法的加载调用metisMenu.js，metisMenu.js基于Jquery，因此必须在metisMenu执行之前引入Jquery，从上至下顺序：
.引入jquery.js
.引入MetisMenu.js
.加载metisMenu方法
$('menu').metismenu()
- JS调试相对困难，有些错误在编译时不能被识别（变量，脚本的调用顺序不对或者是语法错误都会导致界面不能正常显示或者是响应），用浏览器打开也不会报错，只是不能正常显示或执行。实际调试通常采用Firebug或者是Chrome工具断点（alert）调试。
- JS开发框架：Sublime比Eclipse更适合用作前端开发，有很多较好的插件来帮助代码补全，标示不同元素的颜色，简化开发速度。Eclipse对前端和Mobile的开发较为有限。常用开发工具：Sublime＋PackageControl＋EMMET
- JS的具体语法可以查询W3C School，有非常多的实例参考。
JavaScripts & HTML DOM
JS基于HTML DOM对象模型响应用户请求，首先通过HTML DOM定位出元素，在此基础上对DOM对象进行样式改变，捕获DOM对象事件并响应，为DOM对象增加或删除子元素。
aaarticlea/png;base64,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" alt="" />
JS查找元素(可以逐层定位，先找到父元素，再用父元素查找子元素)
- 通过 id 找到 HTML 元素：var x=document.getElementById("main")
- 通过标签名找到 HTML 元素：var y=x.getElementsByTagName("p")
- 通过类名找到 HTML 元素：var y=x.getElementsByClass("uname")
JS操作元素（修改文本内容/修改属性/修改样式/新生成元素/删除元素）
- 修改元素文本（innerHTML）：document.getElementById(id).innerHTML=new HTML
- 修改元素属性（修改图片显示）：document.getElementById("image").src="landscape.jpg";
- 修改元素样式（比如错误高亮，元素显示）：document.getElementById("p2").style.color="blue"; document.getElementById('p1').style.visibility='hidden'
- 相应UI事件：
- 鼠标事件：鼠标点击元素(onclick)，鼠标移入元素区域(onmouseover)，鼠标移出元素区域(onmouseout)
- 加载事件：网页加载时，图片加载时触发（onload, onunload）
- 变更事件(文本框有输入变更)：onchange()；
- 表单事件：表单提交时触发
- 除了捕获事件，还能生成/移除网页元素：
- var para=document.createElement("p");
- var node=document.createTextNode("这是新段落。");
- para.appendChild(node);
JS响应事件
JS能捕获页面上元素的如下事件：
- 鼠标事件：鼠标点击元素(onclick)，鼠标移入元素区域(onmouseover)，鼠标移出元素区域(onmouseout)
- 加载事件：网页加载时，图片加载时触发（onload, onunload）
- 变更事件(文本框有输入变更)：onchange()；
- 表单事件：表单提交时触发
- 除了捕获事件，还能生成/移除网页元素：
- var para=document.createElement("p");
- var node=document.createTextNode("这是新段落。");
- para.appendChild(node);
JavaScript实例
JS基本语法
JS&DOM对象
登陆校验
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Author" content="刘江波">
<script type="text/javascript">
function login(){
var userName=document.getElementById("userName").value;
var pwd=document.getElementById("pwd").value;
var repwd=document.getElementById("repwd").value;
var address=document.getElementById("address").value;
var matchResult=true;
if(userName==""||pwd==""||repwd==""||address==""){
alert("请确认是否有空缺项！");
matchResult=false;
}else if(userName.length<6||userName.length>20){
alert("用户名长度应在6到20个字符之间！");
matchResult=false;
}else if(userName==pwd||userName==repwd){
alert("密码或重复密码不能和用户名相同！");
matchResult=false;
}else if(pwd.length<6||pwd.length>20||repwd.length<6||repwd.length>20){
alert("密码或重复密码长度应在6到20个字符之间！");
matchResult=false;
}else if(pwd!=repwd){
alert("密码和重复密码不同，请重新输入！");
matchResult=false;
}else if(userName.length<6||userName.length>20){
alert("用户名长度应在6到20个字符之间！");
matchResult=false;
} if(matchResult==true){
var mailreg = /^\w+@\w+(\.\w+)+$/;
if(!address.match(mailreg)){
alert("邮箱格式不正确");
matchResult=false;
}
} if(matchResult==true){
if(userName.charAt(0)>=0&&userName.charAt(0)<=9){
alert("用户名不能以数字字符开始！");
matchResult=false;
}
} return matchResult;
}
</script>
<title>用户注册及验证</title>
</head> <body>
<center>
<form name="loginForm" action="http://www.ytu.edu.cn" onsubmit="return login()" method="post">
<table bgcolor="#6666FF" width="300" cellspacing="0" cellpadding="0" border="0" align="left" valign="top">
<tr>
<td class="table-title" colspan="2" align="center" bgcolor="#3366FF">用户注册</td>
</tr>
<tr>
<td width="130" height="28" align="left">登录用户名</td>
<td><input id="userName" name="userName" type="text" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">登录密码</td>
<td><input id="pwd" name="pwd" type="password" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">重复输入密码</td>
<td><input id="repwd" name="repwd" type="password" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">有效邮箱地址</td>
<td><input id="address" name="address" type="text" class="input"></td>
</tr>
<tr> <!--<td width="10" height="28" align="left"></td>-->
<td colspan="2">
<input type="submit" value="登录">
<input type="button" value="取消" onClick="reset()"></td>
</tr>
</table>
</form>
</center> </body>
</html>
Javascript有执行顺序和引入顺序！！！
Javascript有执行顺序和引入顺序！！！
Javascript有执行顺序和引入顺序！！！
重要的事情说三遍，metisMenu调试了好几天都没有运行成功，后来发现竟然是引入顺序的问题，metisMenu方法的加载调用metisMenu.js，metisMenu.js基于Jquery，因此引入的jquery.js必须在metisMenu执行之前，从上至下顺序：
1.引入jquery.js
2.引入MetisMenu.js
3.加载metisMenu方法
$('menu').metismenu()
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}
JavaWeb前端: JavaScript 简介的更多相关文章
- 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- FeWeb基础之JavaScript简介
FeWeb基础之JavaScript简介 1.JavaScript的基本介绍 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,它是通过嵌入或调入在标准的HTML语言中实现的.Ja ...
- python学习之路前端-JavaScript
JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 为什么我要放弃javaScript数据结构与算法（第一章）—— JavaScript简介
数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- 前端JavaScript规范
前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...
随机推荐
- NSArray倒序
NSArray倒序 NSArray *tmparr = [[upLoadImageArr reverseObjectEnumerator] allObjects]; ios 正则表达式替换 . 不可变 ...
- 正则表达式获取字符串中的img标签中的url链接
废话不多说直接看代码 JavaScript中的代码: var re = /src=\"([^\"]*?)\"/i; var arr = str.match(re); if ...
- 解决编译错误: 非法字符: '\ufeff' 解决方案|错误: 需要class, interface或enum
http://www.cnblogs.com/oymx/p/5353235.html 可以 note++打开 在格式里 选择utf-8 无bom格式编码 即可
- overflow:hidden---清除浮动，隐藏溢出
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
- 【数论】Miller_Rabin
Miller_Rabin素数测试 Miller_Rabin判断单个素数的方法运用了费马小定理,可以说非常之快了. Miller_Rabin曾经被称作“黑科技”,但是根据费马小定理其实完 ...
- Openstack的项目管理方案
openstack作为云的解决方案,必须对某个用户,项目具有资源限制,不能无限制使用资源. 配置 在/etc/nova/nova.conf中,有 quota_driver=nova.quota.DbQ ...
- JQuery基础二
1.表单过滤器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- Arcgis Server 默认服务端口号修改方法
本人安装Arcgis Server 10.2之后发布了一个地图服务,该服务默认使用的端口号是6080,本人使用的是教育网,使用教育网均能正常使用该服务,但是使用电信或者移动网络均不能正常访问该网站. ...
- pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y
event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...
- JAVA TcpServer端使用Scanner读取不到数据的解决办法
在使用JAVA进行Socket通信时,在Server端使用Scanner的nextLine()方法读取数据时,一直读取不到数据是因为Scanner是一个扫描器,它扫描数据都是去内存中一块缓冲区中进行扫 ...