JavaScrip 基础

JavaScript 基础

    前段的三剑客之一JS，来来来，看看它是什么鬼！到底如何让网页动起来的呢，今天就搞他一下。

一、JavaScript的简单介绍

　　javascript是一门动态弱类型的解释型编程语言，增强页面动态效果，实现页面与用户之间的实时动态的交互。

　　javascript是由三部分组成：ECMAScript、DOM、BOM。

• ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）。
• DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口。
• BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口。

二、JavaScript准备工作

    无论学什么语言，首先要了解的东西就是如何给加注释？这个不用多解释吧，在学Python的时候有#单行注释‘’‘’‘’多行注释对吧，在到前段呢HTML中<!--   --> , /*   */就是注释。那问题来了，在JavaScript中又是如何做呢？来，看一一下：

注释
JavaScript中代码注释：
•单行 //
•多行 /*  */

  还有一个问题就是导入的问题，要导入css的时候有几种方法来着，对就是四种。具体的实现方式还是回看css基础篇的讲解。好了，看一下在JavaScript中如何实现的：

{#1 直接编写#}
    <script>
        alert('hello yuan')
    </script>
{#2 导入文件#}
    <script src="hello.js"></script>　

看一下，第二种方式其实和导入css 的方式类似。

三、JavaScript 的基础语法

3.1 变量

    0 变量是弱类型的；
    1 声明变量时不用声明变量类型. 全都使用var关键字;
        var a;
    2 一行可以声明多个变量.并且可以是不同类型.
        var name="yuan", age=20, job="lecturer";
    3 (了解) 声明变量时 可以不用var. 如果不用var 那么它是全局变量.
    4 变量命名,首字符只能是字母,下划线,$美元符 三选一，且区分大小写，x与X是两个变量

ame = 'xx';                  //不加var 定义的是全局变量
function f1() {
    //name = 123 ;             // 不加var 函数里面修改的还是全局变量
    var name = 'json'         // 加var 函数里面修改的是局部变量
}

图解一下哈：

 

3.2 数据类型

先整体的了解一下，接下来会进行一一介绍：

3.2.1 数字类型（number）

        JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。下面来看一下代码示例：

 1 var num1 = new Number(123); //创建了一个数字类型的对象
 2         var num3 = Number(456);　　 // 456
 3         var num2 = 666;
 4  
 5         var s1 = 's123';
 6         var num4 = parseInt(s1);
 7  
 8         console.log(num1.valueOf(),num2,num3);
 9         console.log(num4);  // NaN
10         if(isNaN(num4)){
11             console.log('not a number');  // not a number
12         }
13         else {
14             console.log('a number');
15         }
16         console.log(isFinite(num3));    // 是否是有限值 true   Infinity表示无穷大。
17         console.log(typeof num3);      // 'number' 返回的是字符串
18 　　　　 var a = 1222.4444444;
19 　　　　 console.log(a.toFixed(2));       // 1222.44
20 　　　　 console.log(a.toExponential(3)); // 1.222e+3　

3.2.2 字符串类型（string）

        字符串这个东西得好好了解了解，这个东西在做东西的过程中会经常的打交道。

是由Unicode字符、数字、标点符号组成的序列
字符串常量首尾由单引号或双引号括起
JavaScript中没有字符类型
常用特殊字符在字符串中的表达
字符串中部分特殊字符必须加上右划线\
常用的转义字符 \n:换行  \':单引号   \":双引号  \\:右划线

还是看一下实例代码：

var num1 = new Number(123); //创建了一个数字类型的对象
        var num3 = Number(456);　　 // 456
        var num2 = 666;
  
        var s1 = 's123';
        var num4 = parseInt(s1);
  
        console.log(num1.valueOf(),num2,num3);
        console.log(num4);  // NaN
        if(isNaN(num4)){
            console.log('not a number');  // not a number
        }
        else {
            console.log('a number');
        }
        console.log(isFinite(num3));    // 是否是有限值 true   Infinity表示无穷大。
        console.log(typeof num3);      // 'number' 返回的是字符串
　　　　 var a = 1222.4444444;
　　　　 console.log(a.toFixed(2));       // 1222.44
　　　　 console.log(a.toExponential(3)); // 1.222e+3　

3.2.3 布尔类型（Boolean）

    布尔类型仅包含真假，与Python不同的是其首字母小写。下面来简单的看一下代码示例。

var a = 123;
var s = '123';
console.log(a==s);      // true
console.log(a===s);     // false  判断值和类型一样

Undefined 类型
Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
Null 类型
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
var person=new Person()
var person=null

3.2.4 数组

    JavaScript中的数组类似于Python中的列表,里面也提供了一些内置方法，下面我们来看一下实例代码;

       ar a = [1,2,3,4];
       console.log(a.length);   // 4
       a.push(5);
       console.log(a);         // [1, 2, 3, 4, 5]
       var ret = a.pop();
       console.log(ret);        // 5
       a.unshift('aaa');        // 头部插入元素
       console.log(a);          // ["aaa", 1, 2, 3, 4]
       var ret1 = a.shift();    // 头部移除元素
       console.log(ret1);       // aaa
       var ret2 = a.slice(1,3); // 切片，
       console.log(ret2);       // [2,3]
 
//     obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
       console.log(a);
       a.splice(1,0,'first');   // 指定位置插入元素
       a.splice(2,1,'second');  // 指定位置替换元素
       a.splice(2,1);           // 指定位置删除元素
       console.log(a);
       var b = ['22'];
       console.log(b.concat(a)); // 连接字符串 ["22", 1, "first", 3, 4]
       console.log(a.join('-')); // 拼接字符串 1-first-3-4
       console.log(a.reverse()); // 反转字符串 [4, 3, "first", 1]
 
       console.log([3,2,5].sort())  //对number数组进行排序

3.2.5 序列化

    序列化就是将JavaScript中的数据类型转换成字符串，反序列化的过程则相反。

var a = 'ss';
ret = JSON.stringify(a);        // 'ss' 序列化
console.log(ret);
console.log(JSON.parse(ret));  // ss  反序列化

3.2.6 转义

 一般使用在URL中字符的转义等，下面来看一下具体的用法：

/      转义  其中escape() unescape()主要是对cookies使用
        var a = 'http://www.baidu.com?name=李杰';
        console.log(encodeURI(a));              // http://www.baidu.com?name=%E6%9D%8E%E6%9D%B0
        console.log(decodeURI(encodeURI(a)));   // http://www.baidu.com?name=李杰
        console.log(encodeURIComponent(a));     // http%3A%2F%2Fwww.baidu.com%3Fname%3D%E6%9D%8E%E6%9D%B0
        console.log(decodeURIComponent(encodeURIComponent(a)));  // http://www.baidu.com?name=李杰

3.2.7 eval 

    JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

console.log(eval('1+2*5-5')); // 6
console.log(eval(a = 1));     // 1 声明了一个局部变量a值为1

3.2.7 正则表达式

    JavaScript中支持正则表达式，其主要提供了两个功能：

• test(string)     用于检测正则是否匹配
• exec(string)    用于获取正则匹配的内容

注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。下面来简单的看一下使用：

var a = /\d+h/;
console.log(a.test('123h434')); // true  检测正则是否匹配，表单数据验证可用到
console.log(a.test('12a34'));   // false
 
console.log(a.exec('123h434')); // ["123h", index: 0, input: "123h434"] 获取正则匹配内容
console.log(a.exec('123e434')); // null

3.2.8 时间

    在JavaScript中，Date对象用来表示日期和时间。JavaScript中提供了时间相关的操作，分别为获取时间和设置时间，时间操作中分为两种时间，统一时间(UTC),以及本地时间（东8区）。

var now = new Date();
now.getFullYear();
now.getMonth(); // 6, 月份，注意月份范围是0~11，6表示7月
now.getDate(); // 7, 表示7号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getTime(); // 1435146562875, 以number形式表示的时间戳

 3.3 控制语句

   3.3.1 if控制语句

if-else基本格式
if (表达式){
语句１;
......
}else{
语句２;
.....
}
功能说明
如果表达式的值为true则执行语句1,
否则执行语句2

if语句嵌套格式
if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

来来来，举个例子：

if (x==1){
    y="星期一";
}else if (x==2){
    y="星期二";
...
}else if (x==6){
    y="星期六";
}else if (x==0){
    y="星期日";
}else{
    y="未定义";

    3.3.2 switch 选择控制语句

switch基本格式

switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

来个例子：

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定义";
}

   3.3.3 for 循环控制语句

for循环基本格式

for (初始化;条件;增量){
    语句1;
    ...
}
功能说明
实现条件循环，当条件成立时，执行语句1，否则跳出循环体

举个例子:

 var attr = [111,222,333];
    for (var i = 0;i<attr.length;i++)
    {
        document.write(i+1);
        document.write('<br>');
        document.write(attr[i]);
        document.write('<br>');
    }

    当然也可以使用 for i in x 的这种方式但是在js的世界里还是要少用：

doms=document.getElementsByTagName("p"); /* 获取p标签*/

    for (var i in doms){
       console.log(i); // 0 1 2 length item namedItem
       //console.log(doms[i])
    }

//循环的是你获取的th一个DOM元素集，for in用来循环对象的所有属性，dom元素集包含了你上面输出的属性。
//如果你只要循环dom对象的话，可以用for循环:

    for (var i=0;i<doms.length;i++){
        console.log(i) ; // 0 1 2
        //console.log(doms[i])
    }

    3.3.4 while 循环控制语句

while循环基本格式
while (条件){
语句1；
...
}
功能说明
运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环

var i=1;
while (i<=7) {
    document.write("<H"+i+">hello</H "+i+"> ");
    document.write("<br>");
    i++;
}


//循环输出H1到H7的字体大小

    3.4 异常处理

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

    3.5 对象

        3.5.1 string 对象

        一、创建方式：

             自动创建字符串对象：

var str1="hello world";
alert(str1.length);
alert(str1.substr(1,5)

            手工创建字符串对象：

var str1= new String("hello word");
alert(str1.length);
alert(str1.substr(1,3));

       二、属性：(str1.length)

       三、方法：

           1.格式编排方法：

书写格式:

String对象提供了一组针对HTML格式的方法，如x.anchor()返回锚定义字符串<a>x</a>，
x.bold()返回粗体表示字符串<b>x</b>，x.sup()返回上标格式字符串<sup>x</sup>。
-----------------------------------------

var x="yuan";
var y="x.italics():"+x.italics();
document.write(y.fontsize(10));//<font size="10">x.italics():<i>yuan</i></font>

格式编排方法