第十天学习@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  
原文地址:https://www.cnblogs.com/xiaxiazl/p/2348347.html