`
雪馨25
  • 浏览: 129383 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

定义
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 onload="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" onclick="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" onclick="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" onchange="checkEmail()">

onSubmit

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

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时,就会弹出一个警告框:
<a href="http://www.w3school.com.cn" onmouseover="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(发生错误的代码行)。
语法:
onerror=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">
            onerror=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" onclick="message()" />
    </body>
</html>

插入特殊字符

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

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

分享到:
评论

相关推荐

    JavaScript基础知识总结

    1. JavaScript 的基础知识 在学习 JavaScript 之前,你需要了解 HTML 和 XHTML 的基础。JavaScript 被设计用来向 HTML 页面添加交互行为,通过在 HTML 中插入 JavaScript 代码,可以实现页面元素的动态操作和用户...

    javascript基础----Typora.rar

    在这个“javascript基础----Typora.rar”压缩包中,我们可以预见到是关于JavaScript基础知识的总结,使用Typora编辑器进行了整理。 `JS基础语法.md` 文件很可能包含了JavaScript的基础概念和语法结构,这是学习任何...

    javascript基础-->中级-->高级-->面向对象

    总结,JavaScript从基础到高级,再到面向对象的深入学习,对于任何参与Web建设的IT人员来说都是至关重要的。理解并熟练运用这些知识点,能够帮助开发者编写出更高效、更健壮的代码,以应对复杂的Web开发需求。

    前端-javascript-基础知识-总结笔记

    个人学习javascript的笔记总结

    JavaScript基础笔记-尚硅谷视频自己总结

    ### JavaScript基础知识点总结 #### 一、语言概念与发展历程 - **语言定义**:计算机语言是一种人与计算机之间沟通的工具。人们通过编程语言来控制和操作计算机完成特定任务。 - **语言发展历史**: - **早期阶段...

    js常用知识总结经典javascript知识总结,经典javascript知识总结

    这篇经典JavaScript知识总结涵盖了从基础语法到高级特性的多个方面,旨在帮助有一定基础的开发者巩固和扩展他们的JavaScript知识。 1. **创建脚本块**:在HTML文件中,使用`&lt;script&gt;`标签来插入JavaScript代码。...

    JavaScript语言基础知识点总结

    以下是对JavaScript语言基础知识点的详细总结: 1. **变量与数据类型**: - 变量:JavaScript中的变量无需预定义,使用`var`、`let`或`const`声明。`let`和`const`是ES6引入的新特性,它们在块级作用域内有效。 -...

    js基础知识点总结-入门级别

    ### JavaScript基础知识点总结—入门级别 #### 一、JavaScript简介 JavaScript是一种主要应用于网页开发的脚本语言,它能够在客户端运行。通过JavaScript可以为网页添加动态效果,改善用户体验,例如实现网页元素...

    JavaScript 知识点总结(思维导图10张)

    本文将围绕“JavaScript知识点总结(思维导图10张)”进行详细解析,涵盖从基础语法到高级特性,帮助你构建完整的JavaScript知识体系。 1. **JavaScript操作符与字符** (Javascript-operational-character.gif) - ...

    JavaScript进阶基础-3

    【JavaScript进阶基础-3】 在JavaScript中,进阶基础涉及到很多重要的概念,尤其是面向对象、前后端交互、Cookie以及JSONP。以下是对这些概念的详细解析: **面向对象基础** 面向对象是一种编程范式,它关注的是...

    javascript知识点总结《一》

    ### JavaScript知识点总结《一》 #### 第一章:初步认识JavaScript ##### 学习目标: - **理解JavaScript的特点** - **学会三种JavaScript的引入方式** ##### JavaScript的特点: 1. **了解特点前:** JavaScript...

    javascript经典特效---移动的图片和文字.rar

    总结来说,"javascript经典特效---移动的图片和文字.rar"所包含的知识点主要包括:JavaScript基础语法、DOM操作、定时器、CSS动画、事件处理以及可能的数学计算和模块化编程。理解并掌握这些知识点,不仅可以实现...

    javascript经典特效---改变背景前景颜色.rar

    标题中的"javascript经典特效---改变背景前景颜色...总结来说,这个知识点涉及到JavaScript基础操作,包括DOM操作、属性设置、事件监听以及定时器的使用,通过这些技术可以实现动态改变网页元素背景色和前景色的特效。

    JavaScript基础知识总结.xmind

    通过思维导图的方式,快速了解掌握JavaScript的基本内容

    javascript经典特效---状态栏慢慢计算Pi值.rar

    总结来说,这个“javascript经典特效---状态栏慢慢计算Pi值”的实现涉及到以下JavaScript知识点: 1. JavaScript基础语法和变量声明。 2. 使用`window.status`属性操作浏览器状态栏(非标准特性)。 3. 定时器(`...

    javascript网页开发-张孝祥.pdf

    通过上述知识点的总结,可以看出《javascript网页开发-张孝祥.pdf》这份资料可能涉及到了JavaScript的基础语法、DOM和BOM操作、高级特性以及一些常用的前端框架等内容。这些知识对于理解和掌握JavaScript在网页开发...

    JavaScript语言基础知识总结(10张,神一样的总结!)

    这篇总结涵盖了JavaScript语言的基础知识,帮助初学者快速上手并深入理解这门强大的脚本语言。 首先,我们来看“JavaScript 数据类型”。JavaScript有七种数据类型:Undefined、Null、Boolean、Number、BigInt、...

    javascript经典特效---产生随机的访问数.rar

    总结来说,这个"javascript经典特效---产生随机的访问数"的主题涵盖了JavaScript的随机数生成、定时器的使用以及与HTML的交互,是前端开发中基础但实用的知识点。通过学习和实践,开发者能够创建出更生动、动态的...

    Javascript教程--从入门到精通【完整版】.pdf

    总结来说,这份文档覆盖了JavaScript编程语言从基础语法到高级应用的多个方面,包括但不限于变量声明、数据类型、控制结构、函数定义和使用、DOM操作以及页面中JavaScript代码的嵌入方式。通过学习这些知识点,用户...

    JavaScript 权威指南--第6版,含HTML5

    ### JavaScript权威指南第六版知识点概览 #### 一、引言与概述 - **书籍基本信息**:本书由David Flanagan撰写,O'Reilly Media出版,是JavaScript编程领域的一本经典著作,出版时间跨度从1996年到2011年的第六版...

Global site tag (gtag.js) - Google Analytics