【JavaScript】知识总结---基础

最新推荐文章于 2023-11-09 11:37:25 发布

雪馨

最新推荐文章于 2023-11-09 11:37:25 发布

阅读量143

点赞数

分类专栏： # javaWeb知识总结文章标签： javascript html 脚本 ViewUI

javaWeb知识总结专栏收录该内容

38 篇文章 0 订阅

订阅专栏

定义
1.JavaScript 被设计用来向 HTML 页面添加交互行为。
2.JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
3.JavaScript 由数行可执行计算机代码组成。
4.JavaScript 通常被直接嵌入 HTML 页面。
5.JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
6.所有的人无需购买许可证均可使用 JavaScript。
作用
1.JavaScript 为 HTML 设计师提供了一种编程工具,是一种只拥有极其简单的语法的脚本语言！
2.JavaScript 可以将动态的文本放入 HTML 页面
3.JavaScript 可以对事件作出响应,设置为当某事件发生时才会被执行
4.JavaScript 可以读写 HTML 元素
5.JavaScript 在数据被提交到服务器之前，可被用来验证数据
6.JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。
7.JavaScript 可被用来创建 cookies,存储和取回位于访问者的计算机中的信息。

HTML添加js

方法一：html文件body标签中加入

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

当页面载入时，会执行位于 body 部分的 JavaScript。

方法二：html文件head标签中加入

<html>
<head>
<script type="text/javascript">
function message()
{
alert("该提示框是通过 onload 事件调用的。")
}
</script>
</head>
<body οnlοad="message()">
</body>
</html>

当用户触发事件时才执行脚本

方法三：使用外部JavaScript

<html>
    <head>
         <script src="xxx.js">....</script>
    </head>
    <body>
    </body>
</html>

在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。外部文件不能包含 <script> 标签。

注释
单行的注释以 // 开始。

多行注释以 /* 开头，以 */ 结尾。

声明（创建）变量

var x=5;

var carname="Volvo";
变量名称的规则：
变量对大小写敏感（y 和 Y 是两个不同的变量）
变量必须以字母或下划线开始
通过 var 语句 来声明 JavaScript 变量

注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。

警告框
alert("我是警告框！！")

alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")

确认框

<html>
    <head>
        <script type="text/javascript">
             function show_confirm(){
                 var r=confirm("Press a button!");
                 if (r==true){
                      alert("You pressed OK!");
                 }else{
                      alert("You pressed Cancel!");
                 }
             }
        </script>
    </head>
    <body>
        <input type="button" οnclick="show_confirm()" value="Show a confirm box" />
    </body>
</html>

提示框

<html>
<head>
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("请输入您的名字","Bill Gates")
  if (name!=null && name!="")
    {
    document.write("你好！" + name + " 今天过得怎么样？")
    }
  }
</script>
</head>
<body>
<input type="button" οnclick="disp_prompt()" value="显示提示框" />
</body>
</html>

提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

定义函数

1、有参数语法：
function 函数名(var1,var2,...,varX){
代码．．．
}

var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。

2、无参数的函数必须在其函数名后加括号：
function 函数名(){
　　代码．．．
　　}

注意：别忘记 JavaScript 中大小写字母的重要性。"function" 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。

3、有返回值函数

return 语句用来规定从函数返回的值。
例
function prod(a,b){
x=a*b
return x

}

break 和 continue 语句
break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。

continue 命令会终止当前的循环，然后从下一个值继续运行。

for...in 语句

for...in 语句用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
语法：
for (变量 in 对象){
在此执行代码
}

“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。
实例：
使用 for ... in 循环遍历数组。

<html>
    <body>
         <script type="text/javascript">
             var x
             var mycars = new Array()
             mycars[0] = "Saab"
             mycars[1] = "Volvo"
             mycars[2] = "BMW"
             for (x in mycars){
                 document.write(mycars[x] + "<br />")
             }
         </script>
    </body>
</html>

事件

事件是可以被 JavaScript 侦测到的行为。
事件举例：
鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。
<input type="text" size="30" id="email" οnchange="checkEmail()">

onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。
下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。
<form method="post" action="xxx.htm" οnsubmit="return checkForm()">

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：
<a href="http://www.w3school.com.cn" οnmοuseοver="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30">

</a>

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
事件句柄
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

FF: Firefox, N: Netscape, IE: Internet Explorer

属性	以下情况发生，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	1	3	4
onfocus	元素获得焦点	1	2	3
onkeydown	某个键盘的键被按下	1	4	3
onkeypress	某个键盘的键被按下或按住	1	4	3
onkeyup	某个键盘的键被松开	1	4	3
onload	某个页面或图像被完成加载	1	2	3
onmousedown	某个鼠标按键被按下	1	4	4
onmousemove	鼠标被移动	1	6	3
onmouseout	鼠标从某元素移开	1	4	4
onmouseover	鼠标被移到某元素之上	1	3	4
onmouseup	某个鼠标按键被松开	1	4	4
onreset	重置按钮被点击	1	3	4
onresize	窗口或框架被调整尺寸	1	4	4
onselect	文本被选定	1	2	3
onsubmit	提交按钮被点击	1	2	3
onunload	用户退出页面	1	2	3

捕获错误

两种在网页中捕获错误的方法：

使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)

使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

注意：chrome、opera 和 safari 浏览器不支持 onerror 事件。

Try...Catch 语句

try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。

语法：
try{
//在此运行代码
}catch(err){
//在此处理错误
}
注意：try...catch 使用小写字母。大写字母会出错。

Throw 声明

throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。
语法：
throw(exception)
exception 可以是字符串、整数、逻辑值或者对象。
注意：使用小写字母编写 throw。使用大写字母会出错！
实例
下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。

<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 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。
语法：
οnerrοr=handleErr
function handleErr(msg,url,l){
//Handle the error here
return true or false
}
浏览器是否显示标准的错误消息，取决于 onerror 的返回值。如果返回值为 false，则在控制台 (JavaScript console) 中显示错误消息。反之则不会。
实例：
下面的例子展示如何使用 onerror 事件来捕获错误：

<html>
    <head>
        <script type="text/javascript">
            οnerrοr=handleErr
            var txt=""
            function handleErr(msg,url,l){
                txt="There was an error on this page.\n\n"
                txt+="Error: " + msg + "\n"
                txt+="URL: " + url + "\n"
                txt+="Line: " + l + "\n\n"
                txt+="Click OK to continue.\n\n"
                alert(txt)
                return true
            }
            function message(){
                adddlert("Welcome guest!")
            }
        </script>
    </head>
    <body>
        <input type="button" value="View message" οnclick="message()" />
    </body>
</html>

插入特殊字符

反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

\' 单引号； \" 双引号； \& 和号；\\ 反斜杠；\n 换行符；\r 回车符；\t 制表符；\b 退格符；\f 换页符

雪馨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】知识总结---基础

定义 1.JavaScript 被设计用来向 HTML 页面添加交互行为。 2.JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。 3.JavaScript 由数行可执行计算机代码组成。 4.JavaScript 通常被直接嵌入 HTML 页面。 5.JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。 6.所有的人无需...
复制链接

扫一扫