JavaScript基础

第一节 JavaScript概述

1.1 JavaScript简介

JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM Document Object Model），浏览器对象模型(BOM Browser Object Model)。
具体参考百度百科JavaScript

第二节 JavaScript基本语法

入门程序

<!DOCTYPE html>
<html>
    <head>
     <meta charset="utf-8" />
          <title>javascrit入门</title>
    </head>
    <body>
        <script type="text/javascript">
            //alert("hello world");//弹出窗口显示
            document.write("hello world");//页面中显示
        </script>
     </body>
</html>

2.1 变量声明

在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。

var num; //声明变量
num=10;//赋值
var s="zhangsan";//声明的同时赋值

var是声明关键字，a是变量名，语句以分号结尾，分号可以省略。
这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。
JavaScript的关键字和保留字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、
interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、
final、native、throws、char、finally、new、transient、class、float、null、true、const、
for、package、try、continue、function、private、typeof、debugger、goto、protected、
var、default、if、public、void、delete、implements、return、volatile、do、import、
short、while、double、in、static、with。

JavaScript中的注释有两种

单行注释//
多行注释/* ... */

2.2 数据类型

2.2.1 基本（原始）类型

变量的基本类型有number、string、boolean、undefined、null五种。 (u n n s b)

var email;
var age = 19;
var obj = null;
var s = "hello";
var b = false;

在JavaScript中，当一个变量未被初始化的时候，它的值为undefined; 当一个引用不存在时，它为Null;

2.2.2 引用（对象）类型

在JavaScript中对象创建

function Person() {
            this.name = name;
            this.age = age;
            this.show=function () {
                document.write(name+":"+age);
            }
        }
        var sb = new Person();
        sb.name = "Rose";
        sb.age = 11;
        sb.show();

使用json对象直接写出来：

var yy = {"name": "Ann", "age":99};
        document.write(yy.name);
        document.write(yy.age);

事实上，yy被赋值为了一个JSON，JSON全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。

数组

数组在JavaScript中成为Array类型。

var cities=new Array(3);
document.write(cities.length);
//添加数据
cities[0]=10;
cities[1]=20;
cities[2]=30;
cities[3]=40;
cities[4]=50;
document.write(cities.length);

JSON可以标记一个对象，那么它同样可以标记一个数组

var a=[1,2,3,4];

上述代码，我们说a是一个数组，在a中角标为0的元素是1。

var map = new Array();
        map["a"] = "Janpan";
        map["b"] = "US";
        map["c"] = "UK";
        document.write(map.length + "mlength");
        document.write(map.a);
        document.write(map['a']);

数组的遍历

for (var i = 0; i < arr.length; i++) {
            document.write(arr[i] + "<br>");
        }

var names = ["Ann", "Bob", "Cindy", "Dave"];
        document.write(names.length);
        document.write("<br>");
        for (var i in names){
            document.write(names[i]+"<br>");
        }

2.2.3 JavaScript的三种使用方式

第一种方式：在< script>标签中，script可以放在网页中任何位置。

<script type="text/javascript">
        var name = "Jack";
        var date = new Date();
        document.write(name);
        document.write(date);
</script>

第二种方式：使用外部JavaScript文件，把js代码放入单独的文件中，这个文件的扩展名.js

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

第三种方式：放在标签中的事件属性中,常见事件 ,onclick

<input type="button" value="按钮" onclick="document.write('nice')">

2.3 运算符

2.3.1 算术运算符

+、-、*、/、%、++、--

var a=1;
var b=2;
a+b;//相加
a-b;//相减
a*b;//相乘
a/b;//相除
a%b;//求余
a++;//自增
b--;//自减

2.3.2 赋值运算符

=、+=、-=、/=、*=、%=

var a=10;
var b=20;
a=b;//赋值
a+=b;//相加后赋值
a-=b;//相减后赋值
a/=b;//相除后赋值
a*=b;//相乘后赋值
a%=b;//求余后赋值

2.3.3 逻辑运算符

与、或、非
&&、||、!

var a=false;
var b=true;
//非的逻辑
//!a->true;
//!b->false;
//与的逻辑
//a&&a->false;
//a&&b->false;
//b&&a->false;
//b&&b->true;
//或的逻辑
//a||a->false;
//a||b->true;
//b||a->true;
//b||b->true;

2.3.4 关系运算符

==相等
<小于
<=小于或等于
>大于
>=大于或等于
!=不等于
===全相等

var a=1;
var b=2;
//a==a->true
//a==b->false
//a<b->false
//a<=b->false
//a>b->true
//a>=b->true
//a!=b->true
//a===b->false
//这里三个等于“===”和两个等于“==”区别：
//前者相当于比较两个引用，后者相当于比较两个值。
//当比较两个值得时候，不考虑数据类型。
//也就是说1=="1"是true的。

2.3.5 字符串连接运算符

+运算符和java类似

var s = "s";
var t = "t";
var st = s + t;
console.log(st);

2.3.6 三目运算符

var a = 1;
var b = 2;
var c = 3?4:a>b;
console.log(c);

2.4 分支结构

2.4.1 if-else

var a=1;
var b=1;
if(a==b){
    document.write("相等");
}else{
    document.write("不相等");
}
//很明显，运行结果是相等
//这就是if-else的结构，和Java语言是一样的。

// 1 if(条件表达式) 关系运算符  逻辑运算符 
// 2 if(变量) 直接写变量，不用运算符，如果变量值为undefined,null 表示false，否则true
// 3 如果变量没有定义,则出现异常。zhangsan.name ,给zhangsan添加name属性，没有赋值

2.4.2 switch

var a=2;
switch(a){
  case 1:
    document.write("值为1");
    break;
  case 2:
    document.write("值为2");
    break;
  case 3:
    document.write("值为3");
    break;
  default:
     document.write("值不是3也不是2也不是1");
}

2.5 循环结构

2.5.1 for循环

var a=0;
for(var i=1;i<=100;i++){
    a+=i;
}
document.write(a);
//上述代码是对1~100求和。

2.5.2 while循环

var a=0;
var i=1;
while(i<=100){
   a+=i;
   i++;
}
document.write(a);
//上述代码是对1~100求和。

2.5.3 do-while循环

var a=0;
var i=1;
do{
    a+=i;
  	i++;
}while(i<=100);
document.write(a);
//上述代码是对1~100求和。

2.5.4 break与continue

和Java语言类似，在JavaScript中，你也可以使用break结束循环，用continue来结束本次循环。

2.5.5 增强for循环

var names = ["Ann", "Bob", "Cindy", "Dave"];
        document.write(names.length);
        document.write("<br>");
        for (var i in names){
            // i为下标
            document.write(names[i]+"<br>");
        }

第三节 JavaScript函数和事件

3.1 函数

包含一段功能的代码。目的：重复使用

3.1.1 函数定义

用function关键字来声明，后面是函数名字，参数列表里不写var。整个方法不写返回值类型。

function functionName(parameters){
    //执行的代码
}

下面是一个方法的定义与调用：

function add(a,b){
    return a+b;
}
var c=1;
var d=2;
var e=add(1,2);
document.write(e);
//上述代码运行结果是3
//这里定义了一个add方法，参数是两个，与Java不同，参数的数据类型并没有。
//因为就算是写，全都是var，为了保证语法的简洁性，全写var索性就设计成全都不用写了。
//返回值也是同样的道理，区别是，如果你写了返回值，那么有返回值，如果没写return，就没有返回值。

3.1.2 匿名函数

/*匿名函数*/
var method1=function(){
document.write("这是一个匿名函数");
}

method1();
/*匿名函数(自执行匿名函数)*/
(function(s){
document.write("这是一个自执行匿名函数"+s);
})("hahaha");

3.1.3 全局变量和局部变量

函数内部声明的变量是局部变量,所以只能在函数内部访问它。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

3.1.4 闭包（Closure）

闭包就是能够读取其他函数内部局部变量的函数; 闭包可以理解成“定义在一个函数内部的函数“。

闭包三个条件：

闭包是一个内部函数
闭包能够读取其他（外部）函数的局部变量
闭包和局部变量在同一个作用域。

使用形式

闭包作为函数的返回值
闭包作为函数的参数

function f() {
            var n = 10;
            function f1() {
                n++;
                console.log(n);
            }
            return f1;
        }
        var f2 = f();
        f2();
        f2();

闭包好处：

使局部变量常驻内存
避免污染全局变量
提高封装性保护局部变量

3.2 系统函数

3.2.1 弹框函数

提示框 alert();

alert("你好"); // 这是一个只能点击确定的弹窗

alert方法没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined。无论你点击“确定”还是右上角的那个“X“关闭。

确认框 confirm()

这是一个你可以点击确定或者取消的弹窗

confirm("你好");

confirm方法与alert不同，他的返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个“X“关闭，都返回false。

输入框 prompt()

这是一个你可以输入文本内容的弹窗

prompt("你爱学习吗？","爱");//第一个参数是提示信息，第二个参数是用户输入的默认值。

当你点击确定的时候，返回用户输入的内容。当你点击取消或者关闭的时候，返回null。

3.2.2其他系统函数

parseInt(); 字符串转换整数
parseFloat(); 字符串转成小数
isNaN(); 判断数字是不是不是一个数字。

3.3 事件

事件	描述
onchange	HTML 元素内容改变(离开光标触发)
onclick	用户点击 HTML 元素
onmouseover	光标移动到HTML元素
onmouseout	光标离开HTML元素
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
onsubmit	提交表单时执行的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body onload="doload()">
    <form action="#" method="post">
        <input type="text" name="username" placeholder="请输入用户名" onchange="dochange(this)">
        <input type="button" value="按钮" onclick="doclick()">
    </form>
    <div id="div" onmouseover="over(this)" onmouseout="out(this)">

    </div>
    <script type="text/javascript">
        function doload() {
            console.log("页面已经加载完毕");
        }
        function dochange(obj) {
            console.log(obj.value);
        }
        function doclick() {
            console.log("点我干嘛");
        }
        function over(obj) {
            obj.style.backgroundColor = "red";
        }
        function out(obj) {
            obj.style.backgroundColor = "yellow";
        }
    </script>
</body>
</html>

3.4 字符串、正则表达式

3.4.1 字符串对象String

基本类型 number string boolean undefined null
引用类型 Object Array String Number Boolean

        var s = "abc"; //  基本数据类型string
        var s2 = new String("abc"); // 引用数据类型
        document.write(typeof (s)); // 判断数据的类型
        document.write("<br>");
        document.write(typeof (s2));
        document.write("<br>");
        document.write(s instanceof String); // 判断对象是否是某种类型
        document.write("<br>");
        document.write(s2 instanceof String);
        document.write("<br>");
        document.write(s==s2);
        document.write("<br>");
        document.write(s===s2);
        document.write("<br>");
        document.write(s.length);
        document.write("<br>");
        document.write(s2.charAt(2));
        document.write("<br>");
        var say = "java是世界上最好的语言";
        var sub = say.substr(0, 5);
        document.write(sub);
        document.write("<br>");
        var sub2 = say.substr(5, 7);
        document.write(sub2);
        document.write("<br>");
        document.write(s2.toString());
        document.write("<br>");
        document.write(s2.valueOf());
        document.write("<br>");
        document.write(s2.toString() === s2.valueOf());
        document.write("<br>");
        var n = 100;
        var n2 = new Number(n);
        document.write(n == n2);
        document.write("<br>");
        document.write(n===n2);
        document.write("<br>");
        var b = true;
        var b2 = new Boolean(b);
        document.write(b === b2);

3.4.2 RegExp 对象

Regular Expression 正则表达式
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法

var patt=new RegExp(pattern,modifiers);或者更简单的方式:var patt=/pattern/modifiers;

var re1 = new RegExp("^1[3589]\\d{9}$");
var re2 = /^1[3589]\d{9}$/;

修饰符

修饰符用于执行区分大小写和全局匹配

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

方括号用于查找某个范围内的字符

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。[a-zA-Z0-9_]
\W	查找非单词字符。
\d	查找数字。[0-9]
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。

3.4.2 RegExp 对象方法

方法	描述	FF	IE
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

3.4.3 正则表达式的使用

test()方法：搜索字符串指定的值，根据结果并返回真或假。

var patt1=new RegExp("^1[3589]\\d{9}$");
document.write(patt1.test("13688889999"));//true

exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var reg=/java/ig;
var str="hello java,java是最好的编程语言，我爱Java";
var s=null;
while(s=reg.exec(str)){
  document.write(s);
  document.write("<br/>")
}

字符串match()方法

var reg=/java/ig;
var str="hello java,java是最后的语言，我爱Java";
var arr=str.match(reg);
for(var i=0;i<arr.length;i++){
    document.write(arr[i]+"<br/>");
}

字符串replace()方法

var reg=/java/ig;
var str="hello java,java是最后的语言，我爱Java";
var str2=str.replace(reg,"JAVA");
document.write(str2+"<br/>");

字符串split()方法

var str="hello world,java best language";
var arr=str.split(/[ ,]/);
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"<br/>");
}

来源：https://my.oschina.net/jacksonmike/blog/3132406

标签

var

javascript

赋值语句

赋值