Javascript ==== 因特网上最流行的脚本快速学习---Javascript基础

初探：

  • Javascript 属于网络脚本语言；
  • 给网页用来改进设计，验证表单，检测浏览器，创建cookies，以及更多的应用；
  • 因特网上最流行的脚本语言；

什么是Javascript：

  • 用来向HTML页面添加交互行为；
  • 是一种轻量级的脚本语言；
  • 由数行的可执行计算机代码组成；
  • 直接嵌入进HTML界面；
  • 代码执行不进行预编译，属于解释性语言；

Javascript能做什么：

  • 为HTML设计师提供了一种编程工具；
  • 将动态的文本放入HTML页面：document.write("<h1>"+name+"</h1>")；
  • 可以对事件作出响应：可以设置成为某事件发生的时候才会被执行，页面载入完成或者用户点击某个HTML元素的时候；
  • 可以读取或者改变HTML的元素内容；
  • 可以被用来验证数据：当数据提交到服务器之前，对数据进行验证；
  • 可以被用来检测访问者的浏览器：根据检测到的浏览器，载入相应的界面；
  • 可以被用来创建cookies：用来存储和取回访问者计算机中的信息；

Javascript的实现：

  • <script>标签用于将其插入到HTML页面当中；
  • 使用type来定义脚本语言： 
    <html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

document.write是标准的Javascript命令，浏览器当作命令处理，不加入<script>标签的话，就会当作纯文本处理。

防止不支持Javascript的浏览器把脚本作为页面的内容来显示，这样写：

<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>

Javascript放置到何处：

  • 页面载入的时候，位于body部分的javascript会执行，执行位于body部分的脚本；
  • 当被调用的时候，位于head部分的javascript才会执行，包含函数脚本；
  • 页面中的脚本会在页面载入之后立即执行，有时候希望页面载入的时候执行脚本，另外，我们希望用户触发事件时候才执行脚本；
  • 在哪里放置javascript：
    • head部分的脚本 
      <html>
<head>
<script type="text/javascript">
....
</script>
</head>
....

脚本被调用或者事件触发的时候脚本就会被执行，能够保证在需要脚本之前已经载入。
    • body部分的脚本 
      <html>
<head>
</head>

<body>
<script type="text/javascript">
....
</script>
</body>
</html>

页面载入的时候就会执行脚本，生成页面的内容。
    • body和head部分的脚本，两处都可以放置脚本。
  • 使用外部的Javascript：有的时候可能在若干的界面使用运行Javascript，但是又不想每个页面中写相同的脚本，这个时候写入外部文件，以.js结尾保存，另外外部文件不能包含<script>标签： 
    <html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>

Javascript语句：

  • 这个语句是发给浏览器的命令，告诉浏览器要做的事情；
  • javascript代码是Javascript语句的序列；按照顺序执行；
  • 可以分批的组合起来，代码块都是大括号之内的{ }，一并执行；

Javascript变量：

  • 变量是存储信息的容器：x=5;length=66.10；
  • 变量声明：var，重新声明变量不会丢失原来的值

Javascript各种语句：

  • if / else --- switch --- 同C语言
  • for 语句
  • while 循环
  • break终止循环 --- continue终止当前循环 语句 
    <html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("数字是 " + i)
document.write("<br />")
}
</script>
<p>解释：循环会在 i=3 时中断。</p>
</body>
</html>

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("数字是 " + i)
document.write("<br />")
}
</script>

<p>解释：当 i=3 时，会中断循环，并从下一个值开始继续循环。</p>

</body>
</html>
  • for (变量 in 对象)
  • Try...Catch语句 测试代码中的错误：使用try...catch语句，使用onerror事件： 
    try
{
   //在此运行代码
}
catch(err)
{
   //在此处理错误
}
  • throw声明：用来创建exception（异常或者错误） 
    <html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{ 
if(x>10) 
throw "Err1"
else if(x<0)
throw "Err2"
} 
catch(er)
{
if(er=="Err1") 
alert("Error! The value is too high")
if(er == "Err2") 
alert("Error! The value is too low") 
}
</script>
</body>
</html>
  • onerror事件：捕获网页中的错误，只要出现脚本错误，就会产生onerror事件。创建一个处理错误的函数，叫做onerror事件处理器，使用三个参数调用，msg错误消息，url发生错误界面的url，line发生错误的行代码。 
    onerror=handleErr

function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}

function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

Javascript消息框：

  • 警告框： 
    alert("文本")
  • 提示框：提示用户某项工作之前输入某个值。 
    prompt("文本","默认值")

确认返回输入值，取消返回null
  • 确认框：用户可以验证或者接受某些信息，有确认取消的选项，确认返回true,取消返回false。 
    confirm("文本")
  • 带有折行的警告框：加入“、\n”

Javascript 函数：

  • 函数是由事件驱动或者当它被调用时执行的可重复的代码块；
  • 将脚本编写成函数，这样就可以再页面载入时候避免执行。函数包含一些代码，这些代码只能被事件激活，或者在函数调用的时候才会执行。
  • 可以在页面的任何部分调用脚本，可以在其他.js文件中调用，函数再页面其实的位置定义，即<head>部分。 
    <html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" >
</form>
</body>
</html>

假如上面的例子中的 alert("Hello world!!") 没有被写入函数，那么当页面被载入时它就会执行。现在，当用户击中按钮时，脚本才会执行。我们给按钮添加了 onClick 事件，这样按钮被点击时函数才会执行。
  • 当再函数内声明了一个变量，只能再函数内访问，退出函数的时候，这个本地变量会被撤销，声明过变量的函数才能够识别其中的每个变量，如果是全局的话，在页面关闭的时候结束生存期。

Javascript事件：

  • javascript使我们有能力创作动态页面，事件是可以被javascript侦测到的行为；
  • 网页中每个元素都可以产生某些可以触发javascript的事件，比如，用户可以通过点击按钮触发一个onClick事件，然后事件函数在html中定义；
  • 事件举例：
    • 页面或者图像载入
    • 点击鼠标
    • 鼠标悬浮于某个热点之上
    • 在表单中选取输入框
    • 确认表单
    • 键盘按键
  • 事件通常与函数配合使用，当事件发生时函数才会执行；
  • 用户进入或者离开界面的时候会触发onload和onUnload事件，常常用来检测浏览器的版本，然后根据这些信息载入特定版本的网页。也常用来处理用户离开载入界面的cookies，用户再次进入的时候，用一个消息框来询问用户的姓名，姓名保存到cookies中，再次进入的时候，可以使用一个消息框来和这个用户打招呼；
  • onFocus,onBlur,onChange,相互配合来完成验证表单： 
    <input type="text" size="30" id="email" onchange="checkEmail()">

用户一旦改变了区域的内容，checkEmail() 函数就会被调用。
  • onSubmit,提交表单之前验证所有的表单域： 
    <form method="post" action="xxx.html" onsubmit="return checkForm">

用户单击表单中的确认按钮的时候，checkForm()函数就会被调用，若域值无效，此次提交被取消，返回true，则提交表单，反之取消
  • onMouseOver和onMouseOut：用来创建动态的按钮： 
    <a href="www.school.com" onmouseover="alert('a onmouseover event');return false"><img src="www.scholl.gif"></a>

当onmouseover事件被脚本侦测到的时候，就会弹出一个警告框

Javascript特殊字符：

  • 可以使用反斜杠来向文本字符串中加入特殊字符： 
    代码    输出
\'    单引号
\"    双引号
\&    和号
\\    反斜杠
\n    换行符
\r    回车符
\t    制表符
\b    退格符
\f    换页符

这些都需要反斜杠

Javascript指导方针：编码过程中其他一些重要事项

  • 代码大小写敏感
  • javascript忽略多余空格
  • 可以使用反斜杠换行

 

 

 

 

posted @ 2012-11-26 14:18  事件轮询，回不到过去  阅读(360)  评论(0)  编辑  收藏  举报