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 简介的更多相关文章

  1. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  2. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  3. FeWeb基础之JavaScript简介

    FeWeb基础之JavaScript简介 1.JavaScript的基本介绍 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,它是通过嵌入或调入在标准的HTML语言中实现的.Ja ...

  4. python学习之路前端-JavaScript

    JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...

  5. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  6. python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  7. 为什么我要放弃javaScript数据结构与算法(第一章)—— JavaScript简介

    数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...

  8. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  9. 前端JavaScript规范

    前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...

随机推荐

  1. Xunsearch迅搜(基于 xapian+scws 的开源中文搜索引擎)安装与简单使用

    今天鼓捣了xunsearch,感觉官方指南写得挺详细,于是按照指南一步一步走,但是感觉越看越凌乱,像看API一样,新手看得特费劲,网上也少有新手教程,于是略过今天的歪路,记录一下我的安装步骤. Xun ...

  2. Could not load file or assembly'System.Data.SQLite.dll' or one of its depedencies

    安装对应的 Microsoft Visual C++ 2010 Redistributable Package (x86)   If your download does not start afte ...

  3. csuoj 1507: 超大型LED显示屏

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1507 1507: 超大型LED显示屏 时间限制: 1 Sec  内存限制: 128 MB 提交:  ...

  4. python 练习(一)代码统计工具的实现

    最近部门成立了一个python学习小组,旨在让大家在做项目中开始成长起来,于是老大就给布置了第一个小任务:代码统计工具,具体的需求如下: 需求: . 能够统计指定目录下C++程序的代码行数. . C+ ...

  5. redmine设置

    接上篇. 1.redmine新版本已经比较强大了,可以定制所有字段(含标准字段和自定义字段)的读写属性.这里为了避免字段过多影响用户感受,希望增加功能将不相关的字段屏蔽,下载插件Workflow Hi ...

  6. RF--换行

    引自:http://blog.csdn.net/lvtingting2007/article/details/42173991

  7. odd_even_list

    public class Solution { public ListNode OddEvenList(ListNode head) { if(head == null || head.next == ...

  8. CentOS7安装Apache2.4+PHP5.6

    linux系统CentOS7 先下载Apache需要依赖的软件 1.APR 下载地址http://apr.apache.org/download.cgi wget下载路径http://mirror.b ...

  9. Java 新手学习 CSS样式列表 排版 格式布局

    1,样式表分为  内联样式表   内嵌样式表  外部样式表  三种. 内联样式表是直接写在标签里面的  比如 <p style=“”></p>  <div style=& ...

  10. POJ3420Quad Tiling(矩阵快速幂)

    Quad Tiling Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3740 Accepted: 1684 Descripti ...