在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. Linux-RedHat7.2 安装nginx托管.net core2.0

    1.安装依赖包 yum -y install gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel 2.下载安装包 wge ...

  2. java GZIP压缩与解压缩

    1.GZIP压缩 public static byte[] compress(String str, String encoding) { if (str == null || str.length( ...

  3. WebDriverException: Message: unknown error: Chrome failed to start: crashed

    the last answer WebDriverException: Message: unknown error: Chrome failed to start: crashed

  4. 高德地图api之location定位

    关于定位,分为GPS定位和网络定位.本文将详细描述的浏览器定位,属于网络定位.这是一种通过使用高德JS-API来实现位置定位.城市定位的方法,包含了IP定位,检索等多种网络定位方式.如果您的手机支持G ...

  5. MySQL丨02丨忘记root用户密码怎么办?

    软件:Mysql 版本:8.0.13 1. 先暂停mysql的服务,方法是在cmd里输入如下代码: net stop mysql 2. 在安装文件夹下创建一个文件:mysql-ini.txt (我的安 ...

  6. java中的编译时与运行时

    ----?基础知识   -- 编译时 编译器将源代码翻译成机器能够读懂的代码,如java中就是翻译成jvm能够读懂的字节码文件.简单说,编译时就是机器帮我们检查代码是否有出现语法错误,关键字写错之类的 ...

  7. nginx 集群

    Nginx是什么? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.一直纳闷这个X是怎么来 ...

  8. python基础002

    1.pycharm安装与添加解释器 专业版.英文界面,不要汉化—一定要尊重知识产权 算术运算符:+ - * / // % ** ^ 布尔运算符:== > < >= <= 逻辑运 ...

  9. BZOJ 3926: [Zjoi20150]诸神眷顾的幻想乡

    3926: [Zjoi20150]诸神眷顾的幻想乡 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 438  Solved: 273 Descripti ...

  10. php基础语句 变量 符号

    中心主题 标记与注释 // /* */ 输出语句 echo输出 echo可以输出多个字符串,逗号隔开 print输出 print只能输出一个字符串,返回true或false print_r() 可以把 ...