在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. 微信小程序---代码构成

    通过开发者工具快速创建了一个demo项目,观察后可以发现这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS ...

  2. JavaSE-25 AWT

    学习要点 关于AWT AWT容器 布局管理器 AWT组件 事件处理 关于AWT java.awt包与子包 AWT软件包 说明 import  java.awt.*; 基本组件使用工具 import  ...

  3. Oracle————存储过程与函数

    存储过程存储过程参数模式包括IN.OUT. IN OUT. IN(默认参数模式):表示当存储过程别调用时,实参值被传递给形参:形参起变量作用,只能读该参数,而不能修改该参数.IN模式参数可以是变量或表 ...

  4. 枚举（enum）的使用

    在开发中我们经常会遇到一些特殊的字段,比如订单状态.支付状态.类型等,这些特殊字段在编码开发的时候,可以写成枚举类型.接下来还是看Demo吧! public enum AuditState { Wai ...

  5. 特殊权限和facl

    目 录 第1章 FACL访问控制    1 1.1 FACL简介    1 1.2 getfacl命令查看acl权限    1 1.3 setfacl设置文件的cal权限    1 1.4 批量添加a ...

  6. 利用springboot创建多模块项目

    本文旨在用最通俗的语言讲述最枯燥的基本知识 最近要对一个不大不小的项目进行重构,用spring觉得太过于繁琐,用cloud又有觉得过于庞大,维护的人手不够:权衡之下,最终选了springboot作为架 ...

  7. 五分钟掌握 for...in 和 for...of 区别

    GitHub 地址,欢迎star,查看更多整理的前端知识 for...in for...in 语句以任意顺序遍历一个对象的可枚举属性. for...in 遍历对象本身的所有可枚举属性,以及对象从其构造 ...

  8. Django 多个字段关联同一外键

    # -*- coding: utf-8 -*- """ Tencent is pleased to support the open source community b ...

  9. ASP.NET MVC如何在页面加载完成后ajax异步刷新

    背景:之前已写过两篇有关Ajax的随笔,这一篇是单独针对在页面加载完成的Ajax操作.比如说打开学生列表页面,先加载页面,然后以Ajax的方式,从数据库中检索相应的学生信息,给浏览者更好的体验. 简单 ...

  10. Java基础学习之数组基本属性和方法

    数组对于每一门编程语言都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同.Java语言中提供的数组是用来存储固定大小的同类型元素.你可以声明一个数组变量,如 int[100] 来代替直接 ...