javascript (1)

一. JS介绍
    1.    定义一个变量的形式:  
        var a;
    
    2.    Js是前台语言,用于页面的交互, 不能操作数据库
        PHP,ASP,JSP 可以操作数据库, 能够进行增删改查.  Node.js除外
        
    3.    Js的组成有三个部分
        ECMAScript: JavaScript的语法标准. 包括变量, 表达式, 运算符, 函数, if语句, for语句等等
        DOM: 操作网页上元素的API.  比如让一个盒子移动, 变色, 轮播图等等.
        BOM: 操作浏览器部分功能的API.  比如让浏览器自动滚动.


二. Js代码
    1.    Js引入
    
        方法1:  在页面中可以直接在body的标签中放入如下标签对:
        <script type=”text/javascript”>
            // js的代码段
        </script>

        方法2:  引入js文件
        <script  type=”text/javascript” src=”demo.js”><script/>

    2.语法
        a. js 对缩进 换行 空格不敏感
            注意每一条语句末尾都要有分号, 为了以后压缩文件
        
        b. 单行注释用  //单行注释
           多行注释用  /*多行注释*/
           
    3. js中输出信息的方式
    
        a. 弹出警告框: alert语句
            <script type="text/javascript”>
                alert("哇哈哈");
            </script>
                
        b. 控制台输出: console.log()
            console表示"控制台", log表示"输出", 控制台是程序员调试程序的地方, 
            程序员经常使用这条语句输出一些东西来测试程序是否正确
    
        c. 用户输入:prompt()语句
            prompt()就是专门用来弹出能够让用户输入的对话框, 代码如下:
            
            <script type="text/javascript">
                var a = prompt("今天是什么天气???")
                console.log(a);
            </script>
            
            上面的代码中,用户输入的内容将被传递给变量a
            prompt()语句中 不管输入什么内容, 都是字符串类型.
    
        d.     alert 和 prompt的区别:
        
            alert("从前有座山");  //直接使用,不需要变量
            var a = prompt("请输入一个数字");  //必须用变量接收用户输入的数值
    
    4. 变量
        a. 变量的声明和赋值
            var a = 100;
        
        b. 变量的类型
            变量里面可以存数字,字符串等. 变量会自动根据存储内容的类型来决定自己的类型.
            
            数字型:number
            如果一个变量里存放了数字,那么这个变量就是数值型的
            var a = 100; //定义了一个变量, 并且赋值100
            console.log(typeof a);  // 输出a 变量的类型, typeof()表示获取变量的类型
            
            字符串型:string
            用单引号 或双引号括起来的字符
            var a = "abc";
            var b = "123321";
            var c = "";  //空字符串  
            console.log(typeof a, typeof b, typeof c);
            
        c. 连字符和加号的区别
            键盘上的+ 可能是连字符, 也可能是数字的加号
            
            console.log("我"+"爱"+"你");  //连字符, 把汉字连在一起, 输出:我爱你
            console.log("我+爱+你");    // 原样输出: 我+爱+你
            console.log("我"+521);   // 输出:我521
            console.log(1+2+3);      // 先计算并输出结果, 输出6
            总结: 如果两边都是数值, 此时是加号, 否则就是连字符(用来连接字符串)
            
        d. 变量值的传递(赋值)    
            语句: a = b; //把b的赋值给a,  b值不变
            
        e. 变量格式的转换
            parseInt()可以将字符串转成数字, 例如parseInt("5");
            
            parseInt()还具有以下的特征:
            
                带有自动净化的功能: 只保留字符串最开头的数字, 后面的中文自动消失
                例如:  console.log(parseInt("2018你真帅"));     输出结果:2018
                
                
                带有自动截断小数的功能:取整, 不是四舍五入
                例如:
                    var a = parseInt(5.8) + parseInt(4.7);
                    console.log(a);  // 输出：9
                    var a = parseInt(5.8 + 4.7);
                    console.log(a);  // 输出：10

                    
三. 数据类型:
    
    数据类型包括:基本数据类型 和 引用数据类型;
    
    基本数据类型是简单的数据段, 引用数据类型指的是有多个值构成的对象
    
    当我们把赋值给一个变量的时候, 解析器首先要确认的就是这个值是基本类型还是引用类型
    
    
    1. 基本数据类型:
    
        a. number
        var a = 123;
        console.log(typeof a)  //输出number
        //特殊情况: infinity(无限大)是number类型
        
        var a1 = 5/0;
        console.log(a1)   // 显示 infinity
        console.log(typeof a1)  //number
        
        b. string
        var str = "123"
        console.log(typeof str)   // string
        
        c. boolean
        var b1 = false;
        console.log(typeof b1)   //boolean
        
        d. null 
        var c1 = null;  //空对象
        console.log(typeof c1)   //object
        
        e. undefined
        var d1; //只有声明,没有赋值,表示变量未定义
        console.log(typeof d1)   //undefined
    
    2. 引用数据类型
        Function
        Object
        Array
        String
        Date

四. 运算符
    
    1. 赋值运算符
    =, +=, -=, *=, /=, %=
    
    2. 算数运算符
    +, -, *, /, %, ++, --
    
    3. 比较运算符
    ==, ===(等同于:值和类型均相等), !=, !==, >, <, >=, <=
    注意: ==(!=)比较的是值,  ===(!==)比较的是值和数据类型.  例如:
    
    var s = "1";
    var n = 1;
    console.log(s == n); //true
    console.log(s === n); //false
    
    4. 字符串拼接和字符串运算的特殊情况
        a. 字符串类型的数值 和 数值类型相减 结果是数值.  例如:
            var a = "3";
            var b = 1;
            console.log(a-b);  //1
            
        b. NaN(not a number)是一个number的类型
            var b1 = "one";
            var b2 = "two";
            ret = b1*b2
            console.log(ret, typeof(ret))  //NaN number
            
        c. 字符串拼接
            var name = "伊拉克";
            var am = "美军";
            
            //字符串拼接
            var str = "3月20日," + name + "战争爆发,以" + am + "为主的部队击溃了军队";
            console.log(str);
            
            //es6 的模板字符串, tab键上面的反引号``, 添加变量名使用${变量名}
            var str1 = "3月20日,${name}战争爆发,以${am}为主的部队击溃了军队";
            console.log(str1);
            
五. 数据类型转换
    1. 数值类型转字符串类型
        a. 隐式转换
        var n1 = 123;
        var n2 = "123";
        var n3 = n1+n2;
        console.log(n3);  // 123123
        console.log(typeof n3);  //string

        b.强转换的两种方法: String(),  .toString()
        var n1 = 123;
        var str1 = String(n1);
        console.log(str1, typeof str1);   //123  string
        
        var num = 234;
        str2 = num.toString()
        console.log(str2, typeof str2);   //123  string
    
    2. 将字符串类型转换成数值类型: Number(), parseInt(), parseFloat()
        
        var strNum = "789.123wasdfj"
        var str = "666"
        console.log(Number(strNum),Number(str))   //NaN  666
        console.log(parseInt(strNum))   //789
        console.log(parseFloat(strNum));  //789.123
        
    3. 任何数据类型都可以转成boolean类型
    
        //不是0的都是真
        var b1 = "123";  //true
        var b2 = 0;   //false
        var b3 = -123;  //true
        var b4 = Infinity;  //true
        var b5 = NaN;  //false
        var b6;  //false
        var b7 = null; //false
        
六. 流程图控制
    1. if, if-else, if-else if-else
        
        a. if语句, 例如:
        var ji = 20;
        if (ji >= 10){
            console.log("恭喜你,吃鸡成功")
        }
        console.log("hello world");  //这里的代码也会执行
        
        
        b. if-else例句:
        var ji = 20;
        if (ji >= 10){
            console.log("恭喜你吃鸡成功")
        }else{
            console.log("很遗憾")   //这行代码不执行
        }
        
        
        c. if-else if-else例句:
            if(true){
                //满足条件执行这行代码
            }else if(true){
                //满足条件执行这行代码
            }else if(true){
                //满足条件执行这行代码
            }else{
                //满足条件执行
            }
        
    2. 逻辑与(&&), 逻辑或(||)
            
        a. 模拟如果总分 > 400分 并且数学成绩 >89 分就会被清华录取,例如
            var sum = 405;
            var math = 90;
            if(sum > 400 && math >89){
                console.log("清华大学录取")
            }else{
                alert("未被录取")
            }
    
        b. 模拟如果总分 > 500 分 或者 英语大于 85分 被复旦大学录取,例如
            var sum = 530;
            var english = 90;
            if(sum > 500 || english >85){
                console.log("被复旦大学录取")
            }else{
                aler("未录取")
            }
    
        c. switch语句
            var game_score = "better";
            switch(game_score){
            case "good":
                console.log("玩得很好")
                break;   // break表示退出, 如果不写就直接到遇见下一个break才退出
            case "better":
                console.log("玩的一般般")
                break;
            case "best":
                console.log("恭喜吃鸡")
                break;
            default:
                console.log("很遗憾")
            }
    
        4. while循环, do-while循环
            a. while循环 例如:
            
            var i = 1;  //初始化循环变量
            while(i <= 9){  //判断循环条件
                console.log(i);
                i = i+1;    //改变循环条件
            }
        
        
            练习:1-100之间所有2的倍数
            var i = 1;
            while(i <= 100){
                if(i%2 == 0){
                    console.log(i)
                }
            }
    
            b. do-while循环
            //不管有没有满足while中的条件, do里面的代码都会先执行一次
            
            var i = 3;  //初始化循环变量
            do{
                console.log(i)
                i++;        //改变循环条件
            }while(i < 10)  //判断循环条件
    
        5.for循环
            for(var i=1; i<=10; i++){
                console.log(i)
            
            }
        练习:1-100 之间所有的数的和打印出来
            sum = 0
            for (var i=1; i<=100; i++){
                sum += 1;
            }
            console.log(sum);
            
        练习:在浏览器中输出直角三角形
            for(var i = 1; i <= 6; i++){
                for(var j=1; j<=i; j++){
                    document.write("*");
                }
                    document.write("<br>");
            }
            
            
        练习: 浏览器中输出等腰直角三角形
            for(var i = 1, i<=6; i++){  //控制行数
                //控制空格数
                for(var s=i; s<6; s++){
                    document.write("&nbsp;")
                }
                for(var j=1; j<=2*i-1; j++){
                    document.write("*")
                }
                document.write("<br>")
            }
            
            
七. 常用内置对象
    js中所有的事物都是对象: 字符串,数值, 数组, 函数......此外js允许自定义对象
    js提供多个内置对象: String, Date, Array等等
    
    对象是带有属性和方法的特殊数据类型
            
    1. 数组对象
        
        数组的创建形式有2种方式:
        a. 字面量方式创建,  推荐使用
        var colors = ["red","green","pink"];
        
        b. 构造函数创建, 使用new关键词
        var colors = new Array();
            
            
        数组的赋值
        var arr = [];
        //通过下标进行赋值
        arr[0] = 123;
        arr[1] = "哈哈哈";
        arr[2] = "嘿嘿";
        
        
        数组的常用方法和示例
        方法或者属性              描述
        concat()        连接两个或多个数组,并且返回结果
                        var north = ['北京','山东','天津'];
                　　　　var south = ['东莞','深圳','上海'];
                　　　　var newCity = north.concat(south);
                　　　　console.log(newCity); // ["北京", "山东", "天津", "东莞", "深圳", "上海"]                        
                        
        
        join()          把数组的所有元素放入一个字符串里
                        var score = [98,78,76,100,0];
                　　　　var str = score.join('|');
                　　　　console.log(str); // 98|78|76|100|0
                        
        
        toString()      把数组转换成字符串, 并返回结果
                        str1 = score.toString();
　　　　                console.log(str1);  // "98,78,76,100,0"
        
        
        slice(start,end)选取数组的一部分,并返回一个新的数组
                        var arr = ['张三','李四','王文','赵六'];
                　　　　var newArr = arr.slice(1,3);
                　　　　console.log(newArr);  // ["李四", "王文"]
        
        
        pop()           删除数组的最后一个元素, 并返回删除的元素
                        var color2 = ['black', 'pink', 'deep blue'];
                        el = color2.pop();
                        console.log(el);        //deep blue
                        console.log(color2);    //['black', 'pink']
        
        
        push()          向数组末尾添加一个或多个元素, 并返回新的长度
                        arr.push('小马哥');
　　　　                console.log(arr);  // ["张三", "李四", "王文", "小马哥"]
        
        
        reverse()       反转数组的元素顺序
                        var names = ['alex','wusir','xiaoma','angle'];
                　　　　names.reverse();
                　　　　console.log(names);  // ["angle", "xiaoma", "wusir", "alex"]
        
        
        sort()            对数组的元素进行排序  按字母从a--z
                        var names = ['alex','wusir','xiaoma','angle'];
                　　　　names.sort(names);
                　　　　console.log(names)  // ["alex", "angle", "wusir", "xiaoma"]
                        
        
        shift()            删除并返回数组的第一个元素
                        var color2 = ['black', 'pink', 'deep blue'];
                        el = color2.shift();
                        console.log(el);    //black
                        console.log(color2);//{'pink', 'deep blue']

        
        
        unshift()        向数组的开头添加一个或者多个元素,并返回新的长度
                        var color2 = ['black', 'pink', 'deep blue'];
                        new_length = color2.unshift('hot pink');
                        console.log(color2);    //{['hot pink','black','pink', 'deep blue']
                        console.log(new_length); // 4

        
        
        Array.isArray   判断对象是否为数组
                        var color2 = ['black', 'pink', 'deep blue'];
                        console.log(Array.isArray(color2)); //true

        
        
        length          数组的一个属性,设置或返回数组元素的个数
                        var color2 = ['black', 'pink', 'deep blue'];
                        console.log(color2.length); //3

    2. 字符串对象
        charAt()        返回指定索引的字符串
                        var str = 'hello';
                　　　　var charset = str.charAt(1);
                　　　　console.log(charset);  // e
        
        
        concat()        返回字符串,表示两个或多个字符串的拼接
                        var str1 = 'al';
                　　　　var str2 =  'ex';
                　　　　console.log(str1.concat(str2,str1));  // alexal
        
        
        replace(a,b)    字符串b 替换a
                        var a = '1234567755';
                　　　　var newStr = a.replace('4567','****');
                　　　　console.log(newStr); // 123****755
        
        
        indexOf()        返回某个指定的字符串值在字符串中首次出现的位置,如果没有返回-1
                        var str = 'world';
                　　　　console.log(str.indexOf('o'));  // 1
                　　　　console.log(str.indexOf('a'));  // -1
        
        
        slice()            返回start到end -1之间的字符串, 索引从0开始
                        var str = '正能量';
　　　　                console.log(str.slice(1,2));  // 能
        
        
        
        split()            把字符串分割为字符串数组
                        var str = '我的天呢，a你在说什么呢？a哈哈哈';
　　　　                console.log(str.split('a')); // ["我的天呢，", "你在说什么呢？", "哈哈哈"]
        
        
        substr(start,end)字符串截取, 顾头不顾尾
                        var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
　　　　                console.log(str.substr(0,4)); // 我的天呢
        
        
        toLowerCase()    返回一个新的字符串,该字符串字母都变成了小写
                        var str = 'XIAOMAGE';
　　　　                console.log(str.toLowerCase());  // xiaomage
        
        
        toUpperCase()    返回一个新的字符串,字符串的所有字母变大写
                        var str = 'xiaomage';
　　　　                console.log(str.toUpperCase());  // XIAOMAGE
        
        match()            查找到一个或多个正则表达式的匹配
                        
        
        
        search()        查找与正则表达式相匹配的值
        
        
        toString()        将number类型转换成字符串类型
                        var num = 1234.1234;
                        var str = num.toString();
                        console.log(str);

    3. 日期对象
        创建日期对象, 只有构造函数这一种方式, 使用new关键字
        var myDate = new Date();
        
        常用语法:
        Date()            根据当地时间返回  日期和时间
                        console.log(Date());//Thu Sep 27 2018 10:07:43 GMT+0800 (中国标准时间)
        
        getDate()        根据本地时间返回指定日期对象的月份中的第几天(1-31)
                        console.log(myDate.getDate());//27
                        
        getMonth()        根据本地时间返回指定日期对应的月份(0-11)
                        #注意  0表示1月
                        console.log(myDate.getMonth());//8
                        
        getFullYear()    根据本地时间返回指定日期对象的年份(返回4位数)                
                        console.log(getFullYear());//2018
                        
        getDay()        根据本地时间返回指定日期对象的星期几的第几天(0-6)
                        #0代表  星期日
                        console.log(getDay());//4
            
        getHours()        根据本地时间对象返回指定时间对象的小时(0-23)
                        console.log(myDate.getHours())//14
                        
        getMinutes()    根据本地时间对象返回指定时间对象的分钟(0-59)        
                        console.log(myDate.getMinutes())//8
    
        getSeconds()    根据本地时间对象返回指定时间对象的秒(0-59)    
                        console.log(myDate.getSeconds())//24
                        
        toLocalString()    返回本地时间
                        console.log(myDate.toLocalString())
                        
                        #使用循环定时器 在页面中显示动态时间
                        setInterval(function(){
                            document.getElementById("timer").innerText = Date().toLocalString();
                        },1000)
    
    
    4. math(算数)对象    
        
        #常用内置对象
        Math.floor()    向下取整,地板函数
                        var x = 1.789;
                        var new_x = Math.floor(x);
                        console.log(new_x)//1

        Math.ceil()        向上取整,天花板函数
                        var x = 1.789;
                        var new_x = Math.ceil(x);
                        console.log(new_x)//2

        Math.max()        取多个值中的最大值
                        console.log(Math.max(3,2,1,4,5,2))//5

        Math.min()        取多个数的最小值
                        console.log(Math.min(3,2,1,4,5,2))//1

        Math.random()    获取0-1之间的随机数
                        console.log(Math.random())//0.669789427291309
                        
                        #获取100--300之间的随机数
                        min---max 之间的随机数: min+Max.random()*(max-min)
                        
                        var start = 100;
                        var end = 300;
                        var num = start+Math.random()*(end-start);
                        console.log(Math.floor(num))

八. 函数
    函数的定义:函数就是将一些语句进行封装,然后通过调用的形式,执行这些语句
    
    1. 函数的定义
        function 函数名(){
            //函数体
        }
        
    2. 函数的调用
        函数名();
        
    3. 函数的参数
        
        函数定义时的形参
        function f(arg1,arg2){
            console.log(arg1+arg2);
        };
    
        函数定义时的实参
        f(100,200);

    4. 返回值
        function f(arg1,arg2){
            return arg1+arg2;
        }