整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript中常见的几种错误

JavaScript中常见的几种错误

、Javascript的异常处理机制

当javascript代码中出现错误的时候,js引擎就会根据js的调用栈逐级寻找对应的catch,如果没有找到相应的catch handler或catch handler本身又有error或者又抛出新的error,最后就会把这个error的处理交给浏览器,并显示在错误控制台中)显示错误信息给访问者。

二、try/catch/finally

是js提供的异常处理机制,用法如下:

try {
// 这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行}
catch (e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
// e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
  //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),
       //finally代码块中始终会被执行
}

三、常见错误

3.1 syntaxError

顾名思义,典型的语法错误。

function foo{
}
if{}

Js代码是从上往下依次执行,但是js引擎先解析代码是否语法出错,如果语法都解析不通过,那么显而易见:一行代码也不会执行,从而会在控制台中输出语法报错:


syntaxError错误

3.2 变量未定义

变量未定义(也叫未声明)指的是,当程序中使用了一个未定义的变量则会报错。

如下代码:

var foo=1
var bar=foo + n1

显而易见,n1变量是未定义的就直接使用,从而会在控制台中输出如下错误:


XXX is not defined 变量未定义

3.3 TypeError错误

TypeError错误指的是数据类型未正确使用。

例如一:

var foo=function(){
	console.log('foo')
}
foo='hello world'
foo()

在某些逻辑下,foo本身存储的是函数,但是误把foo赋值了一个字符串或其它不是函数的数据类型,但是foo当作函数来调用了,则会报TypeError错误在控制台中输出:


TypeError,xxx is not a function

例如二:

未正确获取元素,导致得到一个null而不是DOM节点对象后,绑定事件而引发的TypeError错误。

<script>
var oBtn=document.getElementById('btn') 
//因为代码从上往下解析的原因,还未解析到button标签,返回为null。
//null是空对象,不能绑定任何属性,onclick虽然是事件,
//但也是对象中属性的一部分,所以报TypeError错误。
oBtn.onclick=function(){
	console.log('bar')
}
</script>
<button id="btn">foo</button>


cannot set property 'onclick' of null

正确错误是把选择元素的js代码放置html标签之后,也就是紧邻 </body>标签,或放在windo.onload事件中。

<script>
	window.onload=function(){
		var oBtn=document.getElementById('btn') 
    //因为代码从上往下解析的原因,还未解析到button标签,返回为null。
    //null是空对象,不能绑定任何属性,onclick虽然是事件,
    //但也是对象中属性的一部分,所以报TypeError错误。
    oBtn.onclick=function(){
      console.log('bar')
    }
	}
</script>
<button id="btn">foo</button>

3.4 JSON解析错误

首先,我们需要了解JSON是什么 ?

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

而它的定义规则和js中字面量声明对象很像,所以很多初学者以为json就是js对象,其实这是错误的。

3.4.1 JSON 是 JS对象表示语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 大括号 {} 保存对象
  • 中括号 [] 保存数组,数组可以包含多个对象

3.4.2 JSON 数据的书写格式是

key : value

名称/值包括字段名称(在双引号中),后面写一个冒号,然后是值:

"name" : "foo"

3.4.3 JSON 值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在中括号中)
  • 对象(在大括号中)
  • null

前方高能~~~

谈到这里,json数据从哪来呢?

在请求Ajax的时候,会从后台服务器中拿到json数据,往往会把json解析成js对象。则前端工程师会用到JSON.parse方法。有时候前端也会定义JSON数据,如果语法不正确当转成js对象时,则会报错。如下代码:

//var foo='{ name:"bar" }'//name未带双引号
var foo='{ "name":bar }'//bar未带双引号

var f=JSON.parse( foo )


token n in JSON at position

正确的JSON转换js对象的方式如下:

var foo='{ "name":"bar","age":20 }'//20无需带,则理解为数值类型

var f=JSON.parse( foo )
console.log( f ) //{name: "bar", age: 20} ,此时可以正确的把json转换成js对象,
												//通过 点 语法,也就是f.name和f.age访问到具体的数据

以上是JavaScript中常见的错误,后期遇到会不断更新,感谢小伙伴们的踊跃投稿和留言。

使用 <summary> 元素:

<details>

<summary>Copyright 1999-2011.</summary>

<p> - by Refsnes Data. All Rights Reserved.</p>

<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>


浏览器支持

目前,只有 Chrome 和 Safari 6 支持 <summary> 标签。


标签定义及使用说明

<summary> 标签为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。


HTML 4.01 与 HTML5之间的差异

<summary> 标签是 HTML5 中的新标签。


提示和注释

注释:<summary> 元素应该是 <details> 元素的第一个子元素。


全局属性

<summary> 标签支持 HTML 的全局属性。


事件属性

<summary> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

次用了hibernate做了一个简单数据库与前台连接的小程序,能调用数据库进行增删该查。

这次我用struts 2 框架实现MVC模式的设计。

Struts 2 实现了MVC设计模式,其中,模型(Model)表示业务和数据库代码,视图(View)页面设计代码,控制器(Controller)表示导航代码。所有这些使struts 2成为java web应用的基本框架。

Struts 2主要包括控制器、Action对象、视图jps页面和配置文件等。如图所示。

Struts 2 的MVC架构

  • 控制器:控制器由核心过滤器StrutsPrepareAndExecuteFilter、若干拦截器和Action组件实 现

  • 模型:模型由JavaBean或是JOPO实现,它可实现业务逻辑

  • 视图:通常由JSP页面实现,也可以由Velocity Template、FreeMarke或其他表示层技术实 现

  • 配置文件:Struts 2 框架提供一个名为struts.xml的配置文件,使用它来配置应用程序中组 件

  • Struts 2 标签:Struts 2 提供了一个强大的标签库,该标签库提供了大量的标签,使用这些 标签可 以简化JSP页面的开发

下载标签库

这一步基本事可以省略的,因为大多数的环境若是支持Struts 2 的话应该会自带它的标签库。

在web.xml 中添加过滤器

要使web程序支持struts 2 功能,需要在web.xml文件中声明一个核心过滤器类和映射。

创建struts.xml配置文件

Struts 2 的每一个应用程序都有一个配置文件struts.xml,该文件用来指定动作类关联的类、执行的方法以及执行的结果等。在开发环境下配置文件应该保存在src目录中,Web应用打包后保存在WEB-INF\classes目录中。


实战简单小程序

我用的环境是myeclipse10

创建一个向客户发送一条信息的应用程序,完成下面三步:1.创建一个Action类执行某种操作;2.创建一个JSP页面表示消息;3.在struts.xml文件中建立Action类与视图的映射。

  • 1 创建Action动作类

该页面的动作是用户单击HTML页面中的超链接向web服务器发送以恶搞请求。动作类execute()被执行并返回SUCCESS结果。Struts根据该结果返回一个视图页面。

HelloUserAction.java


package com.Model;

import com.opensymphony.xwork2.ActionSupport;

public class HelloUserAction extends ActionSupport {

private String message; //动作类的属性

public String getMessage(){

return message;

}

public void setMessage(String message){

this.message=message;

}

public String execute() throws Exception{

setMessage("Hello Struts User");

return SUCCESS;

}

}

/*程序覆盖了execute(),在其中调用set Message()设置message属性值,然后返回字符串常量SUCCESS。该常量继承了Action接口。*/

  • 2 创建视图页面

    用户动作是通过index.jsp页面的超链接触发的。

    index.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

  • <%@ taglib prefix="s" uri="/struts-tags" %>

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  • <html>

  • <head>

  • <title>Basic Struts 2 Application - Welcome</title>

  • </head>

  • <body>

  • <h3>Welcome To Struts 2!</h3>

  • <p><a href="<s:url action='hello'/>">Hello User</p>

  • </body>

  • </html>

    该页面中使用了Struts 2 的标签,要使用此标签应该使用taglib指令导入标签库:

    <%@ taglib prefix="s" uri="/struts-tags"%>

预览效果

下面创建JSP页面hellouser.jsp来显示HelloUserAction动作类的message属性值。

hellouser.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib prefix="s" uri="/struts-tags" %>

<html>

<head>

<title>Hello User!</title>

</head>

<h2><s:property value="message"/></h2>

</html>

页面中<s:property >标签显示HelloUserAction动作类的message的属性值。通常在value属性中的message告诉struts框架调用动作类的getMessage()。

  • 3 修改struts。xml配置文件

    struts.xml 文件用来配置请求动作、Action类和结果视图之间的联系。它通过映射来告诉Struts 2使用哪个Action类响应用户的动作,执行哪个方法,根据方法返回字符串用哪个视图。

    编辑struts.xml文件,在<package>元素中添加<action>定义。

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">

<struts>

<constant name="struts.devMode" value="true" />

<package name="basicstruts2" extends="srtuts-defalut" namespace="/">

<action name="hello" class="com.Model.HelloUserAction" method="execute" >

<result name="success">/hellouser.jsp</result>

</action>

</package>

</struts>

struts.xml的可视化窗口

最后效果

dan

单击Hello User之后

总结

以上的小程序只是简单的介绍了Struts 2 的使用,没有什么炫酷的效果,但要是结合我之前写的hibernate做一个登录注册系统的话,只要能熟练的掌握,还是很方便快捷的比一般的编写方法要更直观更容易理解。

不喜欢打广告,有缘下次再见!