zoukankan      html  css  js  c++  java
  • 第十天学习@javascript


    问题:

    使用SQL Server时,当表已经建好,要再修改表结构时,就会提示不能修改?

    工具->选项->阻止保存要求重新创建表的更改

    把打钩去掉即可。

    问题:

    JavaScript 表单验证

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

    被 JavaScript 验证的这些典型的表单数据有:

    • 用户是否已填写表单中的必填项目?
    • 用户输入的邮件地址是否合法?
    • 用户是否已输入合法的日期?
    • 用户是否在数据域 (numeric field) 中输入了文本?

    必填(或必选)项目

    下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

    下面是连同 HTML 表单的代码:

    <html>

    <head>

    <script type="text/javascript">

     

    function validate_required(field,alerttxt)

    {

    with (field)

      {

      if (value==null||value=="")

        {alert(alerttxt);return false}

      else {return true}

      }

    }

     

    function validate_form(thisform)

    {

    with (thisform)

      {

      if (validate_required(email,"Email must be filled out!")==false)

        {email.focus();return false}

      }

    }

    </script>

    </head>

     

    <body>

    <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">

    Email: <input type="text" name="email" size="30">

    <input type="submit" value="Submit">

    </form>

    </body>

     

    </html>

    E-mail 验证

    下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

    意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

    function validate_email(field,alerttxt)

    {

    with (field)

    {

    apos=value.indexOf("@")

    dotpos=value.lastIndexOf(".")

    if (apos<1||dotpos-apos<2)

      {alert(alerttxt);return false}

    else {return true}

    }

    }

    下面是连同 HTML 表单的完整代码:

    <html>

    <head>

    <script type="text/javascript">

    function validate_email(field,alerttxt)

    {

    with (field)

    {

    apos=value.indexOf("@")

    dotpos=value.lastIndexOf(".")

    if (apos<1||dotpos-apos<2)

      {alert(alerttxt);return false}

    else {return true}

    }

    }

     

    function validate_form(thisform)

    {

    with (thisform)

    {

    if (validate_email(email,"Not a valid e-mail address!")==false)

      {email.focus();return false}

    }

    }

    </script>

    </head>

     

    <body>

    <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">

    Email: <input type="text" name="email" size="30">

    <input type="submit" value="Submit">

    </form>

    </body>

     

    </html>

    问题:

    JavaScript 动画

    使用 JavaScript 创建动态图像是可行的。

    窍门是:使用 JavaScript 通过不同的事件来切换不同的图像。

    在下面的例子中,我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。

    完整的代码:

    <html>
    <head>
    <script type="text/javascript">
    function mouseOver()
      {
      document.b1.src ="/i/eg_mouse.jpg"
      }
    function mouseOut()
      {
      document.b1.src ="/i/eg_mouse2.jpg"
      }
    </script>
    </head>
     
    <body>
    <a href="http://www.w3school.com.cn" target="_blank">
    <img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"
    onmouseOver="mouseOver()"
    onmouseOut="mouseOut()" />
    </a>
    </body>
    </html>

    问题:

    HTML <a> target Attribute

     HTML <a> tag

    Example

    The target attribute specifies where to open the linked document:

    <a href="http://www.w3schools.com" target="_blank">Visit W3Schools</a>

    Browser Support

        

    The target attribute is supported in all major browsers.


    Definition and Usage

    The target attribute specifies where to open the linked document.


    Syntax

    <a target="_blank|_self|_parent|_top|framename">

    Attribute Values

    Value

    Description

    _blank

    Opens the linked document in a new window or tab

    _self

    Opens the linked document in the same frame as it was clicked (this is default)

    _parent

    Opens the linked document in the parent frame

    _top

    Opens the linked document in the full body of the window

    framename

    Opens the linked document in a named frame

    问题:

    JavaScript 计时事件

    通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

    在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

    setTimeout()

    未来的某时执行代码

    clearTimeout()

    取消setTimeout()

    实例

    下面的例子和上面的无穷循环的例子相似。唯一的不同是,现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器:

    <html>
     
    <head>
    <script type="text/javascript">
    var c=0
    var t
     
    function timedCount()
     {
     document.getElementById('txt').value=c
     c=c+1
     t=setTimeout("timedCount()",1000)
     }
     
    function stopCount()
     {
     clearTimeout(t)
     }
    </script>
    </head>
     
    <body>
    <form>
    <input type="button" value="Start count!" onClick="timedCount()">
    <input type="text" id="txt">
    <input type="button" value="Stop count!" onClick="stopCount()">
    </form>
    </body>
     
    </html>

    问题:

    什么是DHTML?

    DHTML是Dynamic HTML的简称,就是动态的html,是相对传统的静态的html而言的一种制作网页的概念。所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它只是HTML、CSS和客户端脚本的一种集成,即一个页面中包括html+css+javascript(或其它客户端脚本),其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范,只是一种将目前已有的网页技术、语言标准整合运用,制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。

     

    问题:

     

    jQuery 是一个 JavaScript 库。

    jQuery 极大地简化了 JavaScript 编程。

    jQuery 很容易学习。

     

    问题:

    路径特殊符号 
    以下为建立路径所使用的几个特殊符号,及其所代表的意义。

    "." -- 代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a> 或 <img src="./abc" />
    ".." -- 代表上一层目录,相对路径。 如:<a href="../abc">文本</a> 或 <img src="../abc" />
    "http://www.cnblogs.com/" -- 代表的是上一层目录的上一层目录,相对路径。 如:<img src="http://www.cnblogs.com/abc" />
    "/" -- 代表根目录,绝对路径。 如:<a href="/abc">文本</a> 或 <img src="/abc" />
    "D:/abc/" -- 代表根目录,绝对路径。

    问题:

    历史

      大概在1992年,一家称作Nombas的公司开始开发一种叫做C减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言。这个脚本语言捆绑在一个叫做CEnvi的共享软件产品中,当Netscape Navigator崭露头角时,Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的试验称为EspressoPage(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端脚本语言。而Nombas丝毫没有料到它的理念将会成为因特网的一块重要基石。

    问题:

    超链接的代码
    <a href="http://www.divcss5.com/" target="_blank" title="关于div css的网站">DIV+CSS</a>
    解析如下:
    href 后跟被链接地址目标网站地址这里是http://www.divcss5.com/
    target 
    _blank -- 在新窗口中打开链接 
    _parent -- 在父窗体中打开链接 
    _self -- 在当前窗体打开链接,此为默认值 
    _top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页)

    title 后跟链接目标说明,也就是超链接被链接网址情况简要说明,或标题

    CSS可控制超链接样式-css链接样式如下
    a:active是超级链接的初始状态 
    a:hover是把鼠标放上去时的状况 
    a:link 是鼠标点击时 
    a:visited是访问过后的情况

    问题:

    id 选择器以 "#" 来定义,命名CSS选择器
    定义命名css id选择器例子:
    #yangshi1{color:#F00;}定义红色www.divcss5.com实例
    #yangshi2{color:#0F0;}定义绿色

    对应html中div引用
    <div id="yangshi1">我颜色为红色</div>
    <div id="yangshi2">我颜色为绿色</div>

    CSS class知识:
    与CSS ID不同特性是clsss类可以在一个网页内无限次引用。

    一个div标签的定义只能使用一个id如:
    <div id="yangshi1" id="yangshi2">www.divcss5测试内容</div>

    <div id="yangshi1 yangshi2">www.divcss5测试内容</div>
    两个都是不正确的,并且CSS样式属性也不能生效- 成为CSS 失效之一。

     

    对应htmldiv+css引用:
    <div class="yangshi1">我颜色为红色</div>
    <div class="yangshi2">www.divcss5.com我字体大小为28px</div>
    <div class="yangshi1 yangshi2">我颜色为红色文字大小为28px</div>
    以上即是“yangshi1”“yangshi2”类的正确使用方法

    一个div标签内运用idclass是可以的:
    .yangshi1{... ...}
    #yangshi2{... ...}
    .yangshi3{... ...}
    <div class="yangshi1" id="yangshi2">这样是可以的也是正确的.
    <div class="yangshi1 yangshi3" id="yangshi2">同样是正确的可取的。

    问题:

    CSS代码优化地方
    1、border(CSS边框)简写:
    border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;
    可以简写为:border:1px solid #000;

    2、padding(CSS padding)简写:
    padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
    可简写为:padding:1px 2px 3px 4px;
    padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
    可简写为:padding:1px;

    3、margin简写
    margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;
    可简写为:margin:1px 2px 3px 4px;
    margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;
    可简写为:margin:1px;

    4、background简写
    background-color:#000;可以简写为background:#000;
    background-image:url(图片地址)
    可简写为:background:url(图片地址)

    5、font简写
    font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
    可简写为:font:12px/12px Arial, Helvetica, sans-serif;

    问题:

    CSS重用优化
    这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,CSS实例如下:
    .yangshi_a{ 100px; height:20px; text-align:left; float:left; font-size:24px;}
    .yangshi_b{ 100px; height:20px; text-align:right; float:left; font-size:24px;}
    他们都有相同高度宽度浮动文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性
    优化后:
    .yangshi_a ,.yangshi_b{ 100px; height:20px; text-align:left; float:left; font-size:24px;}
    .yangshi_b{text-align:right; }

    问题:

    mvc 路由规则

     

    ASP.NET MVC是由路由引擎来处理url,并且映射到对应的Controller里的方法也就是Action  
    举个例子输入url   http://localhost/Product/List   
    1. mvc路由引擎首先分离出url中的路径也就是/Product/List 
    2. 然后在路由映射表设置里(在global.asax里)寻找向应的路由规则,一般都是用默认的也就是/controller/action这种格式, 除非特别设置 
    3. 按照路由规则把径/Product/List分离找出对应的controller: Product和action: List 
    4. 最后再执行controller文件夹里ProductController.cs里的List() 方法 
    5. 在List()执行完毕 会return View();  这里默认的view就是 \view\product\list.aspx 这个文件  ASP.NET MVC 用到了很多convention over configuration就是用默认的规则替代了很多配置文件 
    例如你输入URL /Product/List  系统就会假设在CONTROLLER文件夹里里有一个ProductController.cs文件,这个文件里有一个List()方法, 另外在\View\Product文件夹里有一个List.aspx文件,也就是VIEW  
    这里要说一下List.aspx这个文件虽然是存在的,但是你要直接访问http://localhost/view/product/list.aspx会显示错误信息的, 因为路由引擎屏蔽了直接访问这个文件夹。 要通过/controller/action 这种格式来访问对应的VIEW  
  • 相关阅读:
    数据库的......
    数据库
    XML
    网络编程
    I/O系统---流
    周结

    集合,框架
    Spring入门
    Java Wed
  • 原文地址:https://www.cnblogs.com/xiaxiazl/p/2348347.html
Copyright © 2011-2022 走看看