zoukankan      html  css  js  c++  java
  • web application--------->HTML+JavaScript+CSS搭建web网站的静态文件系统

    6.1文件系统(静态页面)部分

    • HTML+JavaScript:用于静态页面的开发
      • 概述:
          • JavaScript使得HTML页面拥有一定的灵活性,使得网页拥有一定的交互效果。
          • 静态页面的开发工具:DreamWeaver、MyEclipse等
          • HTML之类的静态页面之间是可以传递数据的,静态页面也可以向JSP页面传递数据
          • HTML页面标签的值可以在JavaScript代码中使用,JavaScript代码也可以向HTML页面写入信息,或者想HTML页面中的标签传递数值
          • 总而言之,静态页面(文件系统)也是可以进行数值传递,可以实现交互效果,只不过相对于动态页面而言,唯一的缺陷是静态页面无法操作数据库,不能进行数据持久化操作。
      • HTML:
          • HTML中的<form action="hello.jsp" method="post"></form>使得HTML页面可以跳转到其他页面
          • HTML中也有一些标签如<text>   <password>   <select>  <checkbox>等标签,可以让用户输入一些信息
          • HTML页面可以传递给其他页面一些信息。如使用HTML的标签<from><input type="submit" value="注册"></form>可以将HTML页面中包含在<form></form>之间的标签的值提交给form标签的action所指定的路径(比如本例中可以将本HTML页面的包含在<form>标签内的子标签的值传递给hello.jsp页面)。
            <html>
                <head>
                        <title>标题</title>
                </head>
                <body>
                        <form action="hello.jsp" method="post">
                                 姓名:<input type="text" name="userName">
                                <input type="submit" value="提交"/>
                        </form>
                </body>
            </html>    
          • HTML中的表单(即<form>)是实现页面交互的主要手段,所有表单元素必须包含在<form></form>之间
          • HTML页面的标签有各种事件,使用这些事件调用JavaScript代码编写的函数,可以实现页面交互效果   
            • HTML页面中标签的“事件”,如<a href="" onClick="JavaScript函数">中的onClick事件
            • HTML页面中标签还有一些其他事件,如onSubmit、onClick、onSelect、onChange、
      • JavaScript:
          • JavaScript程序使用<script/>标签嵌在HTML页面中
          • JavaScript是基于对象的语言,它所使用的的对象都是浏览器直接提供给用户的,并不是它自己创建的。
          • 浏览器提供给JavaScript很多可以直接使用的对象,其中最常用的是window对象
          • JavaScript代码块中可以使用浏览器所提供的window对象来执行若干操作,如alert(“警告信息”)框,window.open()打开一个新的信息框,window.confirm()弹出一个确认框,可以使用window.location=url实现页面跳转,window.close()关闭窗口
          • 可以使用JavaScript程序弹出“警告框”,“向HTML页面中写入文字”
          • JavaScript本身具有进行DOM操作的能力,它将HTML文件看成DOM对象:类似于xml文件的DOM解析,也可以将HTML看成DOM树,使用Document对象来操作HTML标签。
          • 也即,JavaScript可以像操作DOM树一样操作HTML。(具体语法知识参见如下W3S给的教程
          • 正是由于JavaScript可以像操作DOM树一样操作HTML,所以JavaScript可以:
            • JavaScript可以获取并修改HTML中所有元素(标签)
            • JavaScript可以获取并修改HTML中各个标签的所有属性
            • JavaScript可以修改HTML页面的所有标签内容的CSS样式
            • JavaScript可以添加或删除HTML元素(标签)
            • JavaScript可以响应HTML页面的所有DOM事件(如onClick、onChange、onLoad、onUnload、onMouseOver、onMouseOut事件)
    • 小结:HTML标签+JavaScript程序---->使得静态HTML页面与页面之间、页面与用户之间可以展现一定的交互效果
      • 实例一,HTML中标签的“事件”+调用JavaScript函数======>实现网页页面与用户之间的交互效果
          • step1,HTML页面中标签的“事件”,如<a href="" onClick="JavaScript函数">中的onClick事件
          •     HTML页面中标签还有一些其他事件,如onSubmit、onClick、onSelect、onChange、 
          • step2,编写JavaScript函数
          •        使用JavaScript基本语法知识,或者使用浏览器提供给JavaScript的对象(如window对象)来编写JavaScript函数
          • step3,将step2中所编写的JavaScript函数用<script>标签包含到HTML页面中
      • 实例二,用HTML页面中<form>标签中的onSubmit事件+JavaScript函数中的正则表达式对form标签的子标签中输入的信息进行格式验证
          • step1,可以使用HTML页面<form action=“register.jsp” onSubmit="return javaScript函数">。这样一来点击<form>子标签<input                 type="submit">提交表单信息的时候,就会触发onSubmit事件,执行该事件绑定的JavaScript函数
          • step2,编写相应的JavaScript函数,在JavaScript函数中使用正则表达式对表单元素的值进行验证,符合要求时返回true,表单中的信息才可以              提交到目的页面
      • 实例三,在JavaScript中像操作DOM树一样操作HTML文件中的元素
        •   
          • step1,每一个HTML文件都可以被看作一个DOM树,如下示例:
          • step2,JavaScript中使用document对象获取并操作HTML中的元素

            • 语法:

            • 示例:
              • 示例1,点击HTML的“显示”按钮,HTML页面就显示一段文字(或图片,或其他);点击“隐藏”按钮,HTML页面就隐藏相应的文字              (或图片,或其他)
              • 实例二,点击HTML页面的某个按钮之后,某个链接的颜色变成其他颜色,或者某个标签的值改变
              • 实例三,HTML页面的表格中,点击“+”之后,可以增加一行;点击“-”之后,可以删除该行  
              • 其他更多示例参见W3S网站上的JavaScript教程    
    学习的过程中总会得到一些心得体会,认真地将它们记录下来并分享给每一个愿意花费时间去阅读它们的人,然后意外地收获某个读者的评论,从而激发出新的感想,是一件十分令人欢快的事。如果你也在研习这方面的知识,欢迎加入到我们的队伍中来,和我们一起进步吧(^_^)
  • 相关阅读:
    Windows7 64位 安装mysql
    汉诺塔(hanoi)
    大数据时代,Python是最好的语言!
    本地项目上传到github
    函数去抖(debounce)与 函数节流(throttle)
    vue项目出现的错误汇总
    vue-cli + webpack自动生成项目
    webpack和gulp
    前端开发利器之静态服务器
    vue开发知识点汇总
  • 原文地址:https://www.cnblogs.com/lxrm/p/6689737.html
Copyright © 2011-2022 走看看