JavaScript基础简述

一、Js概述

Js内容主要分两大块：

1、语言结构：主要是语言规则及内置对象
2、宿主环境提供的API：根据宿主环境不同而不同，以浏览器为例，分为三类：浏览器控制类、DOM操作类、网络控制类

二、Js的三种书写方式

1、行内方式

<input type="button" value="按钮" onclick="alert('Hello World')">

2、标签方式

<head>
    <script type="text/javascript">
        alert('Hello World');
    </script>
</head>

3、外部文件引入方式

<!-- 注意：使用外部引入方式时，标签内不写代码 -->
<script src="./main.js"></script>

main.js中的代码如下：

//Js代码最后可以不写分号
//如果不写分号就必须要回车

//弹框显示内容
alert('Hello World')

//声明变量
//命名规则同PHP
//注意：可含有$符号，但不能含有其它特殊符号
var a = 10
//可同时声明多个变量
var a,b,c
var name="张三",age=20

//打印变量a，需要在控制器内查看
console.log(a)

//打印变量a的类型
console.log(typeof a)

结果如下：

三、Js数据类型

【异：PHP数据类型】字符串型、整型、浮点型、布尔型、数组型、对象、资源、null

Js数据类型：

第一种分类：
字符串、数值（number）、布尔、对象、null、undefined

第二种分类：
简单类型：字符串、数值、布尔
复合类型：对象（广义对象和狭义对象）、数组、函数
特殊类型：null、undefined

1、数值范围

最小值：Number.MIN_VALUE  // 这个值为： 5e-324  5乘以10的-324次方
最大值：Number.MAX_VALUE  // 这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

2、浮点数

浮点数的精度问题：
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
如要进行浮点数大小比较，应转化为整数再做比较。

3、字符串

字符串长度：

<script type="text/javascript">
    //声明字符串类型
    var str = "Hello World";
    //字符串的链接，使用+
    str += "和尚";
    //打印字符串长度
    console.log(str.length);
</script>

【注意：有关"+"】如图：

PHP语言中

Js语言中

四、Js数据类型转换

<script type="text/javascript">
    var num = 100;
    //转换成字符串类型
    //方式1：
    console.log(num.toString());
    //方式2：
    console.log(String(num));

    //转换成数值类型
    // Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
    var a = Number('1');        //1
    var b = Number(1);          //1
    var c = Number('c');        //NaN
    var d = Number(null);       //0
    var e = Number(undefined);  //NaN
    console.log(a,b,c,d,e);     // 1 1 NaN 0 NaN

    // 如果第一个字符是数字会解析,直到遇到非数字结束
    // 如果第一个字符不是数字或者符号就返回NaN
    var a = parseInt('1.2df');
    var b = parseInt(1);
    var c = parseInt('c12');
    var d = parseInt(null);
    var e = parseInt(undefined);
    console.log(a,b,c,d,e); //1 1 NaN NaN NaN

    // parseFloat() 把字符串转换成浮点数
    // parseFloat()和parseInt非常相似，
    // 不同之处在与parseFloat会解析第一个 . 遇到第二个.或者非数字结束
    // 如果解析的内容里只有整数，解析成整数
    var a = parseFloat('1.2df');
    var b = parseFloat('1.3.4');
    var c = parseFloat('c12');
    var d = parseFloat(null);
    var e = parseFloat(undefined);
    console.log(a,b,c,d,e); //1.2 1.3 NaN NaN NaN

    // 0、''(空字符串) 、null、 undefined 、NaN 会转换成false  其它都会转换成true
    var a = Boolean('0');
    var b = Boolean(0);
    var c = Boolean('1');
    var d = Boolean(null);
    var e = Boolean(undefined);
    var f = Boolean(NaN);
    console.log(a,b,c,d,e,f); //true false true false false false
</script>

五、Js逻辑运算符

<script type="text/javascript">
    // JS逻辑运算中的逻辑或和逻辑与的运算结果：
    // 决定整个表达式的子表达式的值
    //【注意：在PHP中返回的是布尔值 例：$a="abc"&&1; 则$a为布尔值true】
    var a = 1;
    var b = 2;
    var c = 0;
    console.log(a || b);        //1
    console.log(b || a);        //2
    console.log(c && a);        //0
    console.log(a || c && b);   //1

    //注意与PHP的异同
    console.log("abc"==1);      //false    //同
    console.log("abc"==0);      //false    //PHP中是true
    console.log("abc"=="def");  //false    //同
    console.log("abc"==10);     //false    //同
</script>

六、Js数组

<script type="text/javascript">
    //Js数组
    //1、声明索引数组
    var arr = ["张三",18,"山东"];
    document.write(arr[1]);     //18
    document.write(arr[3]);     //undefined
    //2、使用内置的构造函数创建数组
    var arr = new Array(1,2,3);
    //注意：Js中只有索引数组 Js中没有foreach

    //遍历数组方式一
    for(var i = 0;i < arr.length;i++){
        //获取数组元素
        console.log(arr[i]);
    }
    //遍历数组方式二
    for(var i in arr){
        //获取数组元素
        console.log(arr[i]);
    }
</script>

七、Js函数

<script type="text/javascript">
    // Js函数
    //声明及调用函数：
    //1、关键字声明
    function fn1(/*形参1,形参2 …*/){
        //函数体
        document.write("yes");
        /*return 返回值*/;
    }
    //调用函数
    fn1();

    //2、表达式声明（匿名函数）
    var fn2 = function(/*形参1,形参2 …*/){
        //函数体
        document.write("ok");
        /*return 返回值*/;
    } 
    //调用函数
    fn2();

    //3、自执行函数（匿名函数无变量表示，则自调用）：封装作用域
    (function(){
        //函数体
    })();

    //关于返回值：
    //1、如果函数没有使用return语句，那么函数有默认的返回值：undefined
    //2、如果函数使用return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
</script>

八、Js作用域

1、全局变量和局部变量

在Js中有两个作用域
1）全局作用域
变量在全局作用域中，就被称为全局变量
2）局部作用域（函数内部）
变量在局部作用域中，就被称为局部变量
访问权限：
全局作用域不能访问局部变量
局部作用域可以访问全局变量

2、Js代码的运行

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。
JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析(编译)过程和代码执行过程

预解析过程：

①语法检查，如果有错误，直接停止后续步骤不再运行。
②把变量和函数的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值和调用。
③先提升变量后提升函数，如果函数和变量同名，则被替换；

代码执行过程：

变量的赋值，函数的调用，循环判断等，根据代码由上往下顺序执行；

var a = 10;
function fn(){
    console.log(a); //10
}
fn();

var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a); //undefined
    console.log(b); // 9
    var a = '123'; 
}

// 如果变量和函数同名的话，编译阶段由于变量提升在前，函数声明会覆盖变量声明
console.log(a); //function a(){ console.log('abc'); }
function a() {
  console.log('abc');
}
var a = 1;
console.log(a); //1

3、变量提升和函数提升

变量提升
定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
函数提升
JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

console.log(a); //a is not defined

//变量提升
console.log(a); //undefined
var a = 10;

//函数提升
fn();
function fn(){
    console.log(12); //12
}

//示例1：
var fn = 10;
function fn(){
    console.log(12); 
}
fn();   //f is not a function
//示例2：
function fn(){
    console.log(12); 
}
var fn = 10;
fn();   //f is not a function
// 编译阶段：变量名与函数名相同时，由于变量提升在前，所以被函数声明替换了
// 执行阶段：变量被复制为1，不再是一个函数

4、作用域链

var a = 1;
function fn1(){
    var a = 2;
    function fn2(){
        var a = 3;
        function fn3(){
            console.log(a); //3
        }
        fn3();
    }
    fn2();
}
fn1();

var a = 1;
function fn1(){
    var a = 2;
    function fn2(){
        var a = 3;
        function fn3(){
            console.log(a); //undefined
            var a = 6;
        }
        fn3();
    }
    fn2();
}
fn1();

九、Js对象

<script type="text/javascript">
    //1、字面量方式创建对象
    //获得一个空对象
    var obj1 = {}; 
    //获得一个拥有属性和方法的对象
    //严格来讲Js对象只有属性，属性可以定义为任何类型数据
    var obj2 = {
        name:"张三",
        age:20,
        fn:function(){
            console.log("hsz");
        },
        arr:[1,2,3]
    };
    //2、使用内置构造函数获取对象
    var obj = new Object();
    //3、使用自定义构造函数获取对象
    function fn(name,age){
        this.name = name;
        this.age = age;
        this.sayHi = function(){
            console.log("hello");
        }
    }
    var obj = new fn("张三",20);

    //修改对象中的元素
    obj.name = "李四";
    //删除对象中的元素
    delete obj.age;
    //增加对象中的元素
    obj.city = "北京";
    //使用对象中的函数属性
    obj.sayHi();

    //遍历对象属性
    for(var i in obj){
        //获取到属性名
        console.log(i);
        //获取对象属性值，使用数组语法获取
        console.log(obj[i]);
    }
</script>

十、标准库对象（内置对象）

JavaScript 提供了很多个内置对象：Math/Array/Number/String/Boolean...
对象只是带有属性和方法的特殊数据类型。
相关资料查询：
火狐开发者社区--MDN
微软开发者社区--MSDN
案例：随机色

<body>
<p id = "p">hsz</p>
<script type="text/javascript">
    var r = Math.floor(Math.random()*(256-0)+0);
    var g = Math.floor(Math.random()*(256-0)+0);
    var b = Math.floor(Math.random()*(256-0)+0);
    var p = document.getElementById('p');
    p.style.background = "rgb("+r+","+g+","+b+")";
</script>
</body>

案例：获取当前时间：格式：年-月-日时：分：秒

<script type="text/javascript">
    var date = new Date();
    //注意月份值要加1
    var now = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
    document.write(now);
</script>

案例：字符串操作

<script type="text/javascript">
    var str = "AaBbCc123";
    //获取字符串长度
    var a = str.length;
    //将字符串内容全部转为大写
    var a = str.toLocaleUpperCase();    
    //将字符串中的123截取出来(以下两种方式都可以)
    var c = str.slice(6,9);
    var c = str.substr(6,3);
    //将字符串中的c替换成O
    var d = str.replace("c","O",str);
</script>

有关地址栏中存在汉字的处理

<script type="text/javascript">
    //一个汉字对应一个唯一的URI编码
    //将汉字转换为URI编码
    var a = "篮球";
    console.log(encodeURI(a));
</script>