您的位置：首页 > Web前端 > JavaScript

JavaScript学习

2017-08-18 16:41 141 查看

JavaScript是Netscape公司开发的一种基于客户浏览器，基于面向对象，事件驱动式的脚本语言。

JavaScript是属于web语言，它适用于PC,笔记本电脑，平板电脑和移动电话

JavaScript特点：

1. JavaScript是一种解释性脚本语言

2. JavaScript是基于对象的脚本编程语言

3. 简单性

4. 安全性

5. 动态性

6. 跨平台性

JavaScript作用：

交互式操作，表单验证，网页特效，web游戏，服务器脚本开发

在html页面中嵌入JavaScript的代码有两种方法：

1. 使用JavaScript：前缀构建执行JavaScript代码

2. 使用<scrip…/>标签来包含JavaScript代码

<body>
<!--第一种方法-->
<a href="javascript:alert('使用前缀运行JavaScript');">
运行JavaScript
</a>
<!--第二种方法-->
<script type="text/javascript">
alert("直接运行的JavaScript")
</script>
</body>

但这两种方法不能做到JavaScript和HTML文件进行有效的分离，因此

3. 导入外部的JavaScript文件

可以将JavaScript脚本单独保存到一个*.js文件，HTML页面导入该 .js文件即可

导入语法：

<script src="outer.js" type="text/javascript">
</script>

用方法一写一个简单的JavaScript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body>
<a href="javascript:alert('hello javascript');">
运行JavaScript
</a>
</body>
</html>

用方法二

<head>
<script type="text/javascript">
alter("hello javascript");
</script>
</head>

用方法三

js文件

alter("hello javascript");

HTML文件

<head>
<script src="1.js" type="text/javascript"></script>
</head>

JavaScript基础语法：

JavaScript是弱类型脚本语言，使用变量之前，可以无需定义，当使用某个变量的时候直接使用即可，主要有以下两种定义：

1. 隐式定义：直接给变量赋值

temp="hello";
alert(temp);

显示定义：使用var关键字定义变量

var temp;
temp="hello";
alert(temp);

变量名称遵循规则：

1. 首字母必须是字母，下划线，或者$

2. 不能使用关键字

3. 对大小写敏感

JavaScript常用数据类型：

1. 数值类型：整数，浮点数

2. 布尔类型

3. 字符串类型：单引号或双引号括起来

4. 未定义类型：专门用来确定一个已经创建但是没有初值的变量

5. null

类型转换：

通过+号或者toString()方法将数值转换成字符串

通过parseInt()将字符串转换为整型

通过parseFloat()将字符串转换为浮点型

parseInt(“hello”) —- 输出NaN(not a number)

parseFloat(“36chen”) —- 输出36 （后面字母忽略）

parseFloat(435.34.564)—-输出435.34

JavaScript中字符串常用操作方法：

JavaScript中的字符串可以用单引号括起来

JavaScript中比较两个字符序列是否相等使用==即可，无需使用equals()

正则表达式：

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符，及这些特定字符的组合，组成一个“规律字符串“，用来表达对字符串的一种过滤逻辑

使用正则表达式目的：

给定的字符串是否符合正则表达式的过滤逻辑（“匹配”）

可以通过正则表达式，从字符串中获取我们想要的特定部分·

特点：

灵活性，逻辑性和功能性非常强

可以迅速的用极简单的方式达到字符串的复杂控制

创建正则表达式的语法：

第一种：

var reg=/pattern/;

第二种：

var reg=new RegExp(pattern);

RegExp对象的常用方法：

exec(str) ：检索字符串中指定的值。返回找到的值，并确定其位置

text(str) : 检索字符串中是否有满足条件的值。返回true或false

第一种实例：

<script>
var str="Brainy is the new sexy";
var reg=/new/;
alert(reg.exec(str));
</script>

第二种：

<script>
var str="Brainy is the new sexy";
var reg=new RegExp('new');
alert(reg.exec(str));
</script>

正则表达式所支持的常用通配符：

var str="hello123"
var reg=/\d/
alert(reg.test(str));

var str="helloworld"
var reg=/\s/;
alert(reg.test(str));

var str="helloworld"
var reg=/\bh/;  //是否以h开头
alert(reg.test(str));

正则表达式所支持的常用通配符：

小例子：

var str="hello world"
var reg=/[ha]/;  //有h无a
alert(reg.test(str));

返回true

var str="123A"
var reg=/[0-9]/;
alert(reg.test(str));

返回true

var str="AAA"
var reg=/[A-z]/;
alert(reg.test(str));

返回true

var str="hello world"
var reg=/(red|hello|blue)/;
alert(reg.test(str));

返回true

正则表达式量词：

小例子：

var str="hello world"
var reg=/e+/;  //匹配至少包含一个e的字符串
alert(reg.test(str));

true

var str="helloo"
var reg=/o{2}/;  //匹配包含2个o的序列字符串
alert(reg.test(str));

true

var str="okklo"
var reg=/o{2}/;  //匹配包含2个o的序列字符串
alert(reg.test(str));

false

必须是两个o连在一起的序列

var str="hello"
var reg=/^h/;  //以h开头
alert(reg.test(str));

true

正则表达式的修饰符：

小例子：

var str="BBS"
var reg=/b/i;  //i-对大小写不敏感
alert(reg.test(str));

true

var str="BSADRGBSF"
var reg=/B/g;
alert(reg.test(str));
alert(reg.test(str));
alert(reg.test(str));

若不写g，则始终查到的是第一个B，不会继续往下查找，不管输出几次alert都是true

但写了g以后，执行全局匹配，字符串只有两个B，因此输出第三个alert后，返回的是false

var str="test\nbbs";
var reg=/^b/m;
alert(reg.test(str));

若没有m则返回false

加了m后，/n换行，m会换行匹配，因此返回true

验证E-mail地址：

var str="123abc@qq.com";
var reg=/^[0-9a-zA-Z_-]+@[0-9a-zA-Z_-]+\.(com|cn|org)/;
alert(reg.test(str));

reg表示@前面只要是0-9数字,a-z,A-Z字母都行，@后也是，.不能直接表示，必须用转义字符.表示，.后面com,cn,org都行

JavaScript数组

数组定义：

var arr1=[1,2,3];    //定义时直接赋值

var arr2=[];        //定义一个空数组

var arr3=new Array();  //定义一个数组并通过索引来赋值
arr3[0]=1;
arr3[3]="abc";

JavaScript为数组提供了一个length属性来得到数组的长度

数组特点：

数组长度可变，总长度等于数组的最大索引值+1

同一数组中的元素类型可以互不相同

当访问未赋值的数组元素时，该元素为undefined，不会数组越界

小例子：

var arr=[1,"abc",true];
for(i=0;i<arr.length;i++){
document.write(arr[i]+"<br/>");  //document.write()常用来网页向文档中输出内容。
}

var arr=[];
arr[0]=1;
arr[2]="abc";
document.write(arr[0]+"<br/>");
document.write(arr[1]+"<br/>");
document.write(arr[2]+"<br/>");

JavaScript中常用运算符

== 和 ===：

=== 叫严格等于

如：“10”和10，若用==比较，返回true，若用===比较，则认为左边是字符串右边是数字，返回false

小例子：

逗号运算符

var a,b,c,d;
a=(b=5,c=2,d=3);
alert(a);

返回 3

因为逗号运算符返回最右边的一个值，因此a=3

var a,b,c,d;
a=void(b=5,c=2,d=3);
alert(a);

返回undefined

void强调右边不会给任何值给a

var a=[1,2];
alert(a instanceof Array);  //a是不是一个数组

返回 true

流程控制语句

分支语句：

if 和 switch

循环语句：

while , do while ,for ,for in

var arr=new Array(5);
arr[0]=1;
arr[2]=3;
arr[3]="true";
arr[5]=true;
for(var index in arr){
document.write(index+"<br/>");
}

JavaScript函数

命名函数

<script typr="text/javascript">
function 函数名(参数列表){
要执行的语句块;
}
</script>

匿名函数

<script typr="text/javascript">
function (参数列表){
要执行的语句块;
}
</script>

如：

var f=function(name){
alert("姓名"+name);
}

f(张三);

使用Function类构造匿名函数

new function(参数列表，函数执行体);

如：

var f=new Function('name','age',"alert(....);");

小例子：

var f=function(name,age){
alert("名字"+name+",年龄"+age);
}
f('张三'，40)；

函数的形参不用申明类型，也不用var

大多数优秀的JavaScript框架都使用第二种“匿名函数”语法来定义函数，它的可读性好

函数的返回值

JavaScript中的函数没有声明返回类型，当函数想要返回值的时候直接加上return值语句即可，加入不加表示无返回值

局部变量和局部函数

变量有局部变量和全局变量之分。直接定义的变量是全局变量，在函数中定义的变量称为局部变量，局部变量只在函数内有效，如果全局变量和局部变量使用相同的变量名，则局部变量将覆盖全局变量

局部函数是在函数中定义的，外部函数可以直接调用其内部的函数，在外部函数外直接调用内部函数是不可以的，所以只有当外部函数被调用时，内部局部函数才会被执行

调用函数的方式

直接调用函数

对象.函数的引用；

//当声明的一个函数没有指明分配给哪个对象使用的时候，默认分配给Windows对像

例如：

function show(name,age){
alert(name,age);
}
window.show("张三",12);

以call方法调用函数

函数引用.call(调用者,参数1，参数2…..);

例如：

function show(name,age){
alert(name,age);
}
show.call(window,"张三",12);

以apply方法调用函数

函数引用.apply(调用者，argument);

//argument相当于是数组，用来存放多个参数。和call调用方法类似

例如：

function show(name,age){
alert(name,age);
}
show.apply(window,["张三",12]);

创造后两种调用方法的作用：

例如：

function show(arr,func){    //arr是数据，func是函数
func.call(window,arr);
}
show([1,2,3,4],function(arr){
for(i in arr){
document.write(arr[i]+"<br/>");
}
})

常用内置对象

对象是JavaScript的特性之一，这里介绍Date和Math

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航