JavaScript学习

最新推荐文章于 2024-04-28 11:43:36 发布

flamingobaby

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量462

点赞数

分类专栏：网页

本文链接：https://blog.csdn.net/Naux1/article/details/77371978

版权

网页专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

flamingobaby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

JavaScript是Netscape公司开发的一种基于客户浏览器，基于面向对象，事件驱动式的脚本语言。 JavaScript是属于web语言，它适用于PC,笔记本电脑，平板电脑和移动电话 JavaScript特点： 1. JavaScript是一种解释性脚本语言 2. JavaScript是基于对象的脚本编程语言 3. 简单性 4. 安全性 5. 动态性 6. 跨平台性
复制链接

扫一扫

专栏目录