JS 01

 

---

JavaScript简介 *

JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

特点 *

可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象
不具备操作计算机本地资源的能力 ! 

作用 *

客户端数据计算
客户端表单合法性验证
浏览器事件的触发
网页特殊显示效果制作

三种定义JavaScript代码的方式 *****

1.  在元素的事件属性中编写代码
    案例:
    <span onclick='alert("我们的示例文本, 被点击了")'>示例文本</span>

2.  在网页的script标签中, 编写代码
    <script type="text/javascript">
        alert("第二种定义方式, 在script标签中");
    </script>

3.  在外部的.js文件中, 编写代码, 然后在html中引入这个js文件
    demo1.js:
        for(i=0;i<100;i++){
            alert('哈哈哈哈哈哈'+i);
        }
    demo1.html:
        <script type="text/javascript" src="js/demo1.js"></script>

    注意: 
        在引入外部的.js文件的script标签中, 不要出现任何的代码, 会被忽略 !

弹出一个信息的提示窗口 熟悉

alert("弹出的文本内容");

任何的弹出窗体, 都是在等待用户点击交互, 用户未点击确定或关闭之前, 代码解析器是暂停的 !

注释 ***

JavaScript: 
    单行注释    :   //单行注释 ,从双杠注释到当前行的结尾
    多行注释    :   /**/    /*表示注释开始,  */表示注释结束

Java语言的特点 与JavaScript的特点

Java是一门强类型的语言 !

JavaScript 是一门弱类型的脚本语言 !

定义变量 *****

Java:
    格式: 数据类型 变量名称 = 初始化值 ;

JS  :   
    格式: var 变量名 = 初始化值 ;

    var a = 10;
    a = "Hello";

数据类型 *

-   基本数据类型:
        number  :   数值类型
        boolean :   布尔类型
        string  :   字符串类型

-   复杂数据类型:
        Array   :   数组类型
        Object  :   对象类型

-   特殊数据类型
        null    :   空类型
        undefined:  未定义

如何获取变量的值类型 了解

格式:  
    var typeName = typeof(变量);
    typeof函数用于获取变量的数据类型名称, 返回值为string类型的类型名称 !

类型转换函数 ***

-   变量.toString()
    将任意类型转换为字符串

-   var x = parseInt("数值字符串");
    将字符串转换为整型数字 (会撇弃小数点后的内容)

严格相等 ***

在JS中我们可以使用双等号 , 三等号 进行变量或对象的比较 .

双等号比较的是内容, 不比较数据类型 !

三等号(===严格相等) , 比较数据类型和数据值 !

严格不相等(!==,效果与严格相等相反)

Array 数组对象 ***

格式:

    创建数组: 
        -   var 数组名 = new Array(数组长度);  
        -   var 数组名 = new Array();  

    创建数组 并直接指定包含的元素 

        -   var 数组名 = [元素1,元素2...元素n];
        -   var 数组名 = new Array(元素1,元素2...元素n);


    取出数组中指定下标的元素
        -   var item = 数组名[下标];

    向数组中指定下标赋值:
        -   数组名[下标] = 值;

注意:
    -   JS中的数组 , 就像JAVA中的Object数组, 可以存储任意类型的数据 !
    -   数组的长度理论上是没有限制的 ! 两个有效索引之间的数据, 如果没有赋值, 都是默认的未定义 !

多维数组 了解

多维数组的规则 与 Java完全一致  (数组中的元素, 还是数组)
var count = 0;
var arr = new Array(4);
for(i=0;i<arr.length;i++){
    arr[i] = new Array(4);
    for(j=0;j<arr[i].length;j++){
        arr[i][j] = new Array(4);
        arr[i][j][0] = ++count;
        arr[i][j][1] = ++count;
        arr[i][j][2] = ++count;
        arr[i][j][3] = ++count;
    }
}
alert(count+":count");
alert(arr.toString());  

控制台对象 console 了解

输出函数: 
    -   输出普通日志
        console.log(String text);

    -   输出错误信息
        console.error(String text);

    -   输出提示信息
        console.info(String text);

    -   输出警告信息
        console.warn(String text);

    -   输出debug信息
        console.debug(String text);

Math 对象 *****

-   随机数
    -   Math.random():  返回一个0-1的随机浮点型数字 !

-   四舍五入
    -   Math.round(浮点型数字):  返回一个经过四舍五入的整数!

练习: 
    得到一个0-10000的随机整数:

        var num = Math.round(Math.random()*10000);

Number 对象 熟悉

字符串转换为数字的两种格式:
    -转换浮点型或整型数字:    var 变量名 = new Number("数字格式字符串");

    -转换整型数字:        var 变量名 = parseInt("数字格式字符串");

数字保留指定小数点:
    toFixed(number)：
    参数: 要保留的小数点位数, 采用四舍五入, 位数不足,用0补齐!

RegExp 正则表达式 熟悉

格式:

    -   创建正则表达式对象
            var 变量名 = /正则表达式字符串/g;

    -   验证字符串是否匹配正则
            正则对象.test(要验证的字符串);//返回的结果为boolean类型

案例:
    <input onblur="x(this)" placeholder="请输入手机号码">
    <script type="text/javascript">
        function x(input){
            var text = input.value; 
            //编写验证手机号码的正则表达式
            var reg = /^(13[0-9]|14[679]|15[012356789]|16[679]|17[0-9]|18[0-9])[0-9]{8}$/g;
            //进行验证
            if(reg.test(text)){
                //表示用户输入正确
                input.style="color:#3a3;border:1px solid #3a3";
            }else{
                //用户输入错误
                input.style="color:#a33;border:1px solid #a33";
            }
        }
    </script>

Date 日期对象 了解

-   创建对象
    -   创建当前时间对象
        var date = new Date();

    -   根据指定的日期, 创建时间对象
        var date = new Date(年,月-1,日,[时],[分],[秒],[毫秒]);



-   常用函数
    读取日期的相关信息
        getDate()、getDay()、getYear()等
    修改日期
        setDate()、setMonth()、setHours()等
    转换为字符串
        toString
        toLocaleTimeString()
        toLocaleDateString()

案例:
    var date = new Date();
    console.info(date.toLocaleString());

    var date2 = new Date(2018,6,3,12,15,0,0);
    console.info(date2.toLocaleString());

JS的三种弹出窗 了解

-   弹出信息提示框
    alert("文本内容");//仅可点击确定

-   弹出信息问询框
    var flag = confirm("文本内容");//可点击确定或取消, 点击确定时返回true,点击取消时返回false

-   弹出输入框
    var text = prompt("文本内容");//可点击确定或取消, 点击确定时返回输入内容,点击取消时返回null