在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. index 定义 v-for 未使用变量 实际是没有 :key="index"

    需要有 :key="index" <Checkbox :label="item.key" :key="index" v-for=&qu ...

  2. CentOS6 自己动手搭建开放NTP服务器

    第一步: 1. 安装NTP服务程序: [root@host ~]# rpm -qa | grep ntp #查询是否安装ntp服务程序 [root@host ~]# yum install -y nt ...

  3. There is no Action mapped for namespace [/] and action name [updateUser] associated with context path [].

    在使用Struts2的时候,遇到了这个问题. 原因分析: 找不到指定的路径, 那么就是struts.xml的内容问题, 或者是struts.xml的文件位置存在问题. struts2默认是应该放在sr ...

  4. mybatis-4 mybatis与spring结合使用及原理

    1.创建项目maven,方便依赖下载.使用的jar如下: <dependencies> <dependency> <groupId>org.springframew ...

  5. Educational Codeforces Round 59 (Rated for Div. 2) （前四题）

    A. Digits Sequence Dividing(英文速读) 练习英语速读的题,我还上来昏迷一次....只要长度大于2那么一定可以等于2那么前面大于后面就行其他no 大于2的时候分成前面1个剩下 ...

  6. Go：反射

    一.通过反射获取类型信息 在 Go 程序中,使用 reflect.TypeOf() 函数可以获得任意值的类型对象(reflect.Type),程序通过类型对象可以访问任意值的类型信息. package ...

  7. Mysql 锁总结

    锁 部分总结参考博客 http://b.codejs.cc/articles/2017/10/23/1508749325215.html http://blog.csdn.net/cug_jiang1 ...

  8. InsecureRequestWarning: Unverified HTTPS request is being made.解决方法

    在前面添加: import requests from requests.packages.urllib3.exceptions import InsecureRequestWarning reque ...

  9. 算法导论 第一章and第二章(python)

    算法导论 第一章 算法     输入--(算法)-->输出   解决的问题     识别DNA(排序,最长公共子序列,) # 确定一部分用法     互联网快速访问索引     电子商务(数值算 ...

  10. HTML+CSS 制作HTML5标志图

    效果图如下:(是用代码写的,而不是图片!) 网上看到的代码. 看了下,就是CSS的transform属性的应用.加上定位等.组合在一起形成图片. 没什么难点,就是width,left等数据得根据HTM ...