JavaScript基础

央行授权，银联认证，正规乐刷pos机
免费申请POS机，费率低至0.38%秒到账
服务热线：18127011016，微信客服：1292496908

JavaScript基础

1JavaScript

JavaScript是世界上最流行的脚本语言。JavaScript是属于web的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。JavaScript被设计为向HTML页面增加交互性。许多HTML开发者都不是程序员，但是JavaScript却拥有非常简单的语法。

JavaScript对大小写敏感。

1.1JavaScript的用法

HTML中的脚本必须位于<script>与</script>标签之间。

脚本可被放置在HTML页面的<body>和<head>部分中。

?<script>标签

如需在HTML页面中插入JavaScript，请使用<script>标签。

那些老旧的实例可能会在<script>标签中使用type=“text/javascript”。现在已经不必这样做了。JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。

?<body>中的JavaScript

在本例中，JavaScript会在页面加载时向HTML的<body>写文本：

1.2JavaScript数据类型

JavaScript有多种数据类型：数字，字符串，数组，对象等等：

在JavaScript中有5种不同的数据类型：

lstring

lnumber

lboolean

lobject

lfunction

3种对象类型：

lObject

lDate

lArray

2个不包含任何值的数据类型：

lnull

lundefined

你可以使用typeof操作符来查看JavaScript变量的数据类型。

1.3JavaScript函数

我们把一个JavaScript函数放置到HTML页面的<head>部分：

我们把一个JavaScript函数放置到HTML页面的<body>部分：

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部JavaScript文件的文件扩展名是.js。

如需使用外部文件，请在<script>标签的”src”属性中设置该.js文件：

1.4JavaScript注释

双斜杠//后的内容将会被浏览器忽略。

1.5JavaScript变量

在编程语言中，变量用于存储数据值。

JavaScript使用关键字var来定义变量，使用等号来为变量赋值：

1.6JavaScript操作符

1.7JavaScript关键字

和其他任何编程语言一样，JavaScript保留了一些标识符为自己所用。

JavaScript保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后JavaScript扩展中会用到。

JavaScript标识符必须以字母、下划线（_）或美元符（\(）开始。后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便JavaScript可以轻易区分开标识符和数字）。以下是JavaScript中最??重要的保留字（按字母顺序）：1.8JavaScriptIf...Else语句通常在写代码时，总是需要为不同的决定来执行不同的动作。可以在代码中使用条件语句来完成该任务。在JavaScript中，我们可使用以下条件语句：lif语句-只有当指定条件为true时，使用该语句来执行代码lif...else语句-当条件为true时执行代码，当条件为false时执行其他代码lJavaScript三目运算-当条件为true时执行代码，当条件为false时执行其他代码lif...elseif....else语句-使用该语句来选择多个代码块之一来执行lswitch语句-使用该语句来选择多个代码块之一来执行1.9JavaScriptfor循环JavaScript支持不同类型的循环：lfor-循环代码块一定的次数lfor/in-循环遍历对象的属性lwhile-当指定的条件为true时循环指定的代码块ldo/while-同样当指定的条件为true时循环指定的代码块1.10JavaScriptJSONJSON是用于存储和传输数据的格式。JSON通常用于服务端向网页传递数据。什么是JSON?lJSON英文全称JavaScriptObjectNotationlJSON是一种轻量级的数据交换格式。lJSON是独立的语言*lJSON易于理解。注：JSON使用JavaScript语法，但是JSON格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。以下JSON语法定义了employees对象:3条员工记录（对象）的数组:{"employees":[{"firstName":"John","lastName":"Doe"},{"firstName":"Anna", "lastName":"Smith"},{"firstName":"Peter","lastName":"Jones"}]}JSON语法规则:l数据为键/值对。l数据由逗号分隔。l大括号保存对象l方括号保存数组JSON字符串转换为JavaScript对象（两种方式）:首先，创建JavaScript字符串，字符串为JSON格式的数据：vartext='{"employees":['+'{"firstName":"John","lastName":"Doe"},'+'{"firstName":"Anna","lastName":"Smith"},'+'{"firstName":"Peter","lastName":"Jones"}]}';l使用JavaScript内置函数JSON.parse()将字符串转换为JavaScript对象: varobj=JSON.parse(text);lJavaScript函数eval()可用于将JSON文本转换为JavaScript对象。varobj=eval("("+txt+")");eval()函数使用的是JavaScript编译器，可解析JSON文本，然后生成JavaScript对象。必须把文本包围在小括号中，这样才能避免语法错误。eval()函数可编译并执行任何JavaScript代码。这隐藏了一个潜在的安全问题。使用JSON解析器将JSON转换为JavaScript对象是更安全的做法。JSON解析器只能识别JSON文本，而不会编译脚本。而且JSON解析器的速度更快。最后，在页面中使用新的JavaScript对象：<pid="demo"><script>document.getElementById("demo").innerHTML=obj.employees[1].firstName+""+obj.employees[1].lastName;</script>使用JSON.stringify方法Javascript对象转换为JSON字符串：varstr={"name":"小牛学堂","site":"http://www.edu360.cn"}str_pretty1=JSON.stringify(str)alert(str_pretty1);1.11Javascriptvoidhref="#"与href="javascript:void(0)"的区别：l#包含了一个位置信息，默认的锚是#top也就是网页的上端。l而javascript:void(0),仅仅表示一个死链接。l在页面很长的时候会使用#来定位页面的具体位置，格式为：#+id。l如果你要定义一个死链接请使用javascript:void(0)。<ahref="javascript:void(0);">点我没有反应的!</a><ahref="#pos">点我定位到指定位置!</a> <pid="pos">尾部定位点1.12Javascript验证表单JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。表单数据经常需要使用JavaScript来验证其正确性：l验证表单数据是否为空？l验证输入是否是一个正确的email地址？l验证日期是否输入正确？l验证表单输入内容是否为数字型？必填（或必选）项目下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为false，否则函数的返回值则为true（意味着数据没有问题）：functionvalidateForm(){varx=document.getElementById(“”).value;if(x==null||x==""){alert("姓名必须填写");returnfalse;}}……<formname="myForm"action="test.html"onsubmit="returnvalidateForm()"method="post">姓名:<inputtype="text"name="fname"><inputtype="submit"value="提交"></form>E-mail验证：xxxx@asd.cc下面的函数检查输入的数据是否符合电子邮件地址的基本语法。意思就是说，输入的数据必须包含@符号和点号(.)。同时，@不可以是邮件地址的首字符，并且@之后需有至少一个点号：functionvalidateForm(){varx=document.forms["myForm"]["email"].value;varatpos=x.indexOf("@");vardotpos=x.lastIndexOf(".");if(atpos<1||dotpos<atpos+2||dotpos+2>=x.length){alert("不是一个有效的e-mail地址");returnfalse;}}……<formname="myForm"action="test.html"onsubmit="returnvalidateForm();"method="post">Email:<inputtype="text"name="email"><inputtype="submit"value="提交"></form>1.13JavaScript正则表达式正则表达式（英语：RegularExpression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。1)什么是正则表达式？正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。正则表达式可以是一个简单的字符，或一个更复杂的模式。正则表达式可用于所有文本搜索和文本替换的操作。2)语法/正则表达式主体/修饰符(可选)3)使用字符串方法 在JavaScript中，正则表达式通常用于两个字符串方法:search()和replace()。 search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。 replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。functionmyFunction(){varstr="MyTest!";//varn=str.search("Test");varn=str.search(/test/i);alert(n);varstr="MyTest";vartxt=str.replace(/test/i,"Javascript");alert(txt);}4)正则表达式修饰符 修饰符可以在全局搜索中不区分大小写: i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。5)正则表达式模式l方括号用于查找某个范围内的字符：[abc] 查找方括号之间的任何字符。[0-9] 查找任何从0至9的数字。(x|y) 查找任何以|分隔的选项。l元字符是拥有特殊含义的字符：\d 查找数字。\s 查找空白字符。\uxxxx 查找以十六进制数xxxx规定的Unicode字符。l量词:n+ 匹配任何包含至少一个n的字符串。n* 匹配任何包含零个或多个n的字符串。n? 匹配任何包含零个或一个n的字符串。6)使用RegExp对象在JavaScript中，RegExp对象是一个预定义了属性和方法的正则表达式对象。test()方法是一个正则表达式方法。test()方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false。Eg: /\d/.test(“123”)返回true。 /^1\d{10}\)/

/^0\d{2,3}-?\d{7,8}$/

验证邮箱的正则表达式：

functionisEmail(str){

varreg=/^([a-zA-Z0-9-])+@([a-zA-Z0-9-])+(.[a-zA-Z0-9_-])+/;

returnreg.test(str);

}

1.14Javascript高级编程

1.14.1Javascript对象

1)创建JavaScript对象

通过JavaScript，能够定义并创建自己的对象。

创建新对象有两种不同的方法：

l定义并创建对象的实例

l使用函数来定义对象，然后创建新的对象实例

varperson=newObject();

person.firstname=“John”;

person.lastname=“Doe”;

person.age=50;

p={firstname:“John”,lastname:“Doe”,age:50,eyecolor:“blue”};

2)使用对象构造器

使用函数来构造对象：

functionperson(firstname,lastname,age,eyecolor){

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

varmyFather=newperson(“John”,“Doe”,50,“blue”);

alert(myFather.firstname+“is”+myFather.age+“yearsold.”);

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）。

1.14.2JavascriptArray(数组)对象

1)什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

2)创建一个数组，

有三种方法,下面代码定义了一个名为myCars的数组对象：

1:常规方式:

varmyCars=newArray();

myCars[0]=“Saab”;

myCars[1]=“Volvo”;

myCars[2]=“BMW”;

2:简洁方式:

varmyCars=newArray(“Saab”,“Volvo”,“BMW”);

3:字面:

varmyCars=[“Saab”,“Volvo”,“BMW”];

3)访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值：

varname=myCars[0];

以下实例修改了数组myCars的第一个元素:

myCars[0]=“Opel”;

4)在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

可以在一个数组中包含对象元素、函数、数组：

myArray[0]=Date.now;

myArray[1]=myFunction;

myArray[2]=myCars;

数组方法和属性

使用数组对象预定义属性和方法：

varx=myCars.length//myCars中元素的数量

vary=myCars.indexOf(“Volvo”)//“Volvo”值的索引值

5)数组常用方法

合并数组-concat()

删除数组的最后一个元素-pop()

数组的末尾添加新的元素-push()

将一个数组中的元素的顺序反转排序-reverse()

删除数组的第一个元素-shift()

从一个数组中选择元素-slice()

数组排序（按字母顺序升序）-sort()

数字排序（按数字顺序升序）-sort()eg:vararrs=[40,100,1,5,25,10];arrs.sort(function(a,b){returna-b});

数字排序（按数字顺序降序）-sort()eg:vararrs=[40,100,1,5,25,10];arrs.sort(function(a,b){returnb-a});

转换数组到字符串-toString()

本站所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体)，仅供学习参考。用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权，请联系我们反馈本站将在三个工作日内改正。

相关推荐

密码登录

账号注册