在Html基础上，javascript能够开发交互式web网页。javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，javascript短小精悍，又是在客户机上执行的。大大提高了网页的浏览速度和交互能力。同一时候它又是专门为制作web网页而量身定做的一种简单的编程语言。

  1. Javascript:一种脚本语言(scripting
    language),或称描写叙述性语言。
  1. 主要用途在表单验证：大多数是通过弹出对话框来与用户交互的
  2. 在程序执行过程中逐行地进行解释，是一种解释性语言。
  1. 解释性语言：边执行,边编译
  2. 编译性语言：借助之前的运行过程以增强当次运行的效率
  1. 基于对象的语言：javascript是一种基于对象的语言，同一时候也能够看做一种面向对象的语言。这意味着它能运用自己已经创建的对象。

    因此，很多功能能够来自于脚本环境中对象的方法与脚本的相互作用

  1. 变量类型是弱类型，并未使用严格的数据类型
  2. javascript是一种安全性语言。它不同意訪问本地硬盘，并不能数据存数到server上。不同意对网络文档进行改动和删除，仅仅能通过浏览器实现信息浏览或动态交互。从而有效防止数据的丢失。

  1. javascript是依赖于浏览器本身，与操作环境无关。仅仅要能执行浏览器的计算机，并支持javascript的浏览器就能够正确执行
  1. javascript的两大机制：面向对象，事件处理机制。

    举一个Javascript的小样例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
    
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<title>博客小样例</title>
    
<style type="text/css">

#btnLogin, #btnExit{
    
	width:70px;
    
	height:30px;
    
	font-family:幼圆;
    
	font-weight:bold;
    
	font-size:18px;
    
	}

#form1 p strong {
    
	font-family: "幼圆";
    
	font-size:18px;
    
}

#txtUserPwd, #txtUserName
    
{
    
	width:200px;
    
	height:25px;
    
	font-family:幼圆;
    
	font:bold;
    
	font-size:18px;}

#usermessagee
    
{
    
	border-width:0px;}

#form1
    
{
    
	alignment-adjust:middle;

	}
    
</style>

</head>
    
<body>
    
<center>

    <form id="form1" name="form1" method="post" action="http://blog.csdn.net/tgbsqliuying" >

      <p><strong>用户名：</strong>
    
        <input type="text" name="txtUserName" id="txtUserName" />
    
      </p>
    
      <p><strong> 密　码：</strong>
    
        <input type="text" name="txtUserPwd" id="txtUserPwd" />
    
      </p>

      <p> 　　　　　
    
          　//利用onclick实现事件驱动　　　　　　　　　　　　　　　　
    
          <input type="button" name="btnLogin" id="btnLogin"  value="登陆"  onclick="LogIn()"/>
    
      </p>

    </form>

</center>
    
</body>

</html>
    
<script language="javascript" type="text/javascript">
    
	function LogIn()
    
	{

			//顺序结构（用keywordvar声明keyword，说明javascript是弱数据类型）
    
			var username=document.form1.txtUserName.value;
    
			var userpwd=document.form1.txtUserPwd.value;
    
			if(username==""||username=="")//选择结构
    
			{
    
				alert("用户名不能为空。");
    
				document.form1.txtUserName.focus();
    
				return;
    
				}
    
			//利用正則表達式推断输入的用户名是否正确
    
			var reg=/^[\u4E00-\u9FA5\uF900-\uFA2D\w]+$/g;
    
			if(!reg.test(username))
    
			{
    
				alert("用户名格式不对。请从新输入");
    
				return;
    
				}

			if (userpwd==""||username=="")
    
			{
    
				alert("password不能为空！

");
    
				document.form1.txtUserPwd.focus();
    
				return;
    
				}

			//利用正則表達式推断输入的password是否正确
    
			reg=/^[\u4E00-\u9FA5\uF900-\uFA2D\w]+$/g;
    
			if(!reg.test(userpwd))
    
			{
    
				alert("password格式不对！请从新输入");
    
				return;
    
				}

			document.form1.submit();	

	}

</script>

    相信以后的学习会对Javascript有更深的理解

静态网页怎样实现动态交互?-JavaScript的更多相关文章

  1. 静态网页VS动态网页

    干<沙朗新闻发布系统>什么时候.我们已经建立的网页.html的,并且.aspx,第一次接触.我认为这些东西是一样的,因为它,在观看ASP.NET视频的时候.听见里面讲课的老师有提到了这两样 ...

  2. 如何用phpcms将静态网页生成动态网页？

    在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...

  3. 【js】使用javascript 实现静态网页分页效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...

  4. 静态网页、动态网页、apache和tomcat之间区别和联系

    1.静态网页 静态网页:在网站设计中, 纯粹的HTML(标准通用标志语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是标准的HTML文件,它的拓拓展名是.html或者. ...

  5. SpringBoot-(2)-Web的json接口,静态网页,动态页面

    一, 了解注解@Controller和@RestController @Controller:处理Http请求 @RestController:Spring4以后新增注解,相当于@Controller ...

  6. Spring Security自定义认证页面（动态网页解决方案+静态网页解决方案）--练气中期圆满

    写在前面 上一回我们简单分析了spring security拦截器链的加载流程,我们还有一些简单的问题没有解决.如何自定义登录页面?如何通过数据库获取用户权限信息? 今天主要解决如何配置自定义认证页面 ...

  7. iOS中动态注入JavaScript方法。动态给html标签添加事件

    项目中有这样一种需求,给html5网页中图片添加点击事件,并且弹出弹出点击的对应的图片,并且可以保持图片到本地 应对这样的需求你可能会想到很多方法来实现. 1. 最简单的方法就是在html5中添加图片 ...

  8. 用JSP实现动态交互

    一.什么是JSP? 1.在HTML中嵌入Java脚本代码 2.由应用服务器中的JSP引擎来编译和执行嵌入的Java脚本代码 3.然后将生成的整个页面信息返回给客户端   二.为什么需要基于B/S技术的 ...

  9. Java Web开发技术教程入门-静态网页技术

        昨天了解了构建动态网站的几种技术:Servlet技术.JSP技术,ASP技术和ASP.NET技术以及PHP技术.昨天的精髓在于JSP技术的运行原理:通过用户请求JSP文件,首先检查JSP文件的 ...

随机推荐

  1. Qt中常用的类

    QApplication 应用程序类                管理图形用户界面应用程序的控制流和主要设置 QLabel 标签类                                提供 ...

  2. saltstack install on centos7

    saltstack offical website reference blog summary install virtualbox yum install VirtualBox-5.2 insta ...

  3. 10MongoDB

    一．  介绍MongoDB 1. NoSQL 1)“NoSQL”⼀词最早于1998年被⽤于⼀个轻量级的关系数据库的名字 随着web2.0的快速发展, NoSQL概念在2009年被提了出来 2)NoSQ ...

  4. 老男孩老师的博客地址 - 转自devops1992

    害怕他那天不让人看了,所以我就复制一份到我自己的博客里. http://www.bootcdn.cn/bootstrap/  bootstrap cdn在线地址 http://www.cnblogs. ...

  5. C语言学习12

    希尔排序 //希尔排序 #include <stdio.h> void main() { ], i; int shell(int a[], int n); printf("请输入 ...

  6. HTML中复选框的使用方法

    <select id="question"> {# 常见问题.ajax用editor.html('1231254')填充#} <option value=&quo ...

  7. 《算法导论》 — Chapter 8 线性时间排序

    序 到目前为止,关于排序的问题,前面已经介绍了很多,从插入排序.合并排序.堆排序以及快速排序,每一种都有其适用的情况,在时间和空间复杂度上各有优势.它们都有一个相同的特点,以上所有排序的结果序列,各个 ...

  8. (转)]PYTHON Tkinter GUI

    import Tkinterroot=Tkinter.Tk()label=Tkinter.Label(root,text='hello ,python')label.pack()      #将LAB ...

  9. [Go]链表的相关知识

    切片有着占用内存少喝创建便捷等特点,但它本质上还是数组.切片的一大好处是可以通过窗口快速地定位并获取或者修改底层数组中的元素.不过当删除切片中的元素的时候就没那么简单了.元素复制一般是免不了的,就算只 ...

  10. [POJ2443]Set Operation（bitset）

    传送门 题意:给出n个集合(n<=1000),每个集合中最多有10000个数,每个数的范围为1~10000,给出q次询问(q<=200000),每次给出两个数u,v判断是否有一个集合中同时 ...