Java Script

一、入门

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。 作用: 它的主要目的是,验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。 js的使用方式: 函内js : 定义在标签上的js代码 在标签上定义不同的事件,触发js代码的执行 内部js : 在html内部定义is代码 在html的内部定义script标签对,标签对中定义js代码 外部js : 在外部定义js文件,在html内部引入 通过script标签的src属性引入外部的js代码

注意: 如果一个script如果已经用来定义js代码,就不能引入外部的js文件

--> 按钮

二、定义位置

script标签可以定义在页面中的任意位置 推荐: 1.head中,规范,便于后期维护 有可能遇到获取不到元素的情况->window.onload

2.body结束之前 ​ 在所有元素加载完毕之后执行,遇到获取不到元素的情况

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        /* window.onload 在页面中所有内容加载完成之后再触发函数的执行 */
        window.onload = function(){
            console.log(document.getElementById("box"));
        }
    </script>
</head>•    
<body>
​
         <div id="box">页面中的div</div>
​
</body>
</html>

三、变量

注释: 与java类似 变量: 可变的量 优点: 提高代码的复用性 简化代码 定义: 通过var关键字声明变量 1)声明的同时赋值 2)先声明后赋值 3)同时声明多个变量,同时为多个变量赋值 注意: 一个变量之声明不赋值存在默认值 undefined 局部->只看函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
<body>
    <script>
        //单行注释
        /*多行注释*/
        
        //1)声明的同时赋值
        var i = 1;
        
        var age;
        age = 18;
        
        console.log(i,age);
        
        //3)
        var name="zhangsan",gender = "女";
        console.log(name,gender);
        
        var x,y,z;
        x=y=z=10;
        console.log(x,y,z);
        
        //var可以省略
        hobby = "抽烟";
        console.log(hobby);
        
        //一个变量之声明不赋值存在默认值 undefined
        var j;
        console.log(j);
    </script>
</body>
</html>

四、运算符

运算符 typeof typeof(数据) typeof 数据 返回数据类型小写的字符串形式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> typeof</title>
        </head>
<body>
    <script>
        console.log(typeof 123);
        console.log(typeof NaN);
        
        console.log(typeof('ab'));
        console.log(typeof(""));
        
        console.log(typeof(false));
        console.log(typeof(true));
        
        console.log(typeof(undefined));
        console.log(typeof(null));  //object
        
        function fn(){}
        console.log(typeof(fn));
        
        console.log(typeof {});  //object
        
    </script>
</body>
</html>

五、数据类型

数据类型: 基础数据类型 数值型 Number -> 蓝色 整数与小数,整数与负数 NaN : not a number 1)直接赋值NaN 2)运算无法正确得到结果,得到一个NaN 字符串 String ->黑色 一对''|""包裹1~n个字符 布尔类型 Boolean ->蓝色 表示对于错 true|false 未定义 Undefined -> 灰色 1)直接赋值undefined 2)变量之声明不赋值默认undefined 空 Null 1)直接赋值null 2)为获取到元素,得到null 函数型 Function function 函数名(参数列表){ 函数体; } 复合数据类型 对象类型 Object -> {} 键值对的集合 { key : value, key : value, .... } 键值对之间使用,分隔 键与值之间使用 : 分隔 key : 字符串,当key的名字符合标识符的命名规范,前后的引号可以省略 value : 可以为任意数据类型

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>数据类型</title>
    </head>
    <body>
        <script>
        var i = 103;
        console.log(i);
        var j = NaN;
        console.log(j);
        console.log("a"/103); //NaN
        
        var str1 = '101';
        var str2 = "abc";
        console.log(str1,str2);
        
        var b1 = true;
        var b2 = false;
        console.log(b1,b2);
        
        var u1 = undefined;
        var u2;
        console.log(u1,u2);
        
        var n1 = null;
        var n2 = document.getElementById("box");
        console.log(n1,n2);
        
        function fn(){
            
            console.log("js中的函数");
        }
        
        //调用函数
        fn();
        
        //对象
        var obj = {
            name : "zhangsan",
            age : 18,
            car : null
        };
        console.log(obj);
        console.log(obj.name);
    </script>
</body>
</html>

六、类型转换

js数据类型转换: 对象,函数不参与类型转换 显示类型转换: 任意转为一下三种类型: 字符串String(数据) 数值型Number(数据) 布尔型Boolean(数据) 隐式类型转换 : 目的不是为了转换类型,但是在运算的过程中会默认进行类型转换->成为隐式类型转换 + - * / ...

        <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>类型转换</title>
    </head>
    <body>
        <script>
            //转字符串类型
            console.log(String(123));
            console.log(String(0));
            console.log(String(-1.23));
            console.log(String(NaN));
        console.log(String(false));
        console.log(String(true));
        
        console.log(String(null));
        console.log(String(undefined));
        
        //隐式
        console.log(1+false); //1
        console.log("abc"-1); //NaN
        
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>类型转换</title>
    </head>
<body>
    <script>
        //Number()
        console.log(Number(false));  //0
        console.log(Number(true));   //1
        
        console.log(Number(""));   //0
        console.log(Number(" "));   //0
        console.log(Number("123"));   //123
        console.log(Number("123abc"));   //NaN
        
        console.log(Number(null));   //0
        console.log(Number(undefined));   //NaN
        
        console.log("-------------------------------");
        
        //Boolean
        console.log(Boolean(0));   //false
        console.log(Boolean(123));  //true
        console.log(Boolean(-1.23)); //true
        console.log(Boolean(NaN));  //false
        
        console.log(Boolean(""));  //false
        console.log(Boolean(" ")); //true
        console.log(Boolean("123abc")); //true
        
        console.log(Boolean(null));   //false
        console.log(Boolean(undefined));   //false
    </script>
</body>
</html>

七、数组

数组 [] : 存储多个数据 存储任意类型的数据 长度可以跟随需求动态的增删 定义: 1.new Array() 创建一个空数组 2.new Array(值列表) 创建数组的同时赋值 3.[值列表] 字面量创建数组的方式->推荐使用 长度属性: length 索引: 从0开始,每次+1 操作数组 : 数组名[索引]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>数组</title>
    </head>
    <body>
        <script>
            var array1 = new Array();
            console.log(array1);
        var array2 = new Array(1,2,3,4,5);
        console.log(array2);
        console.log(array2.length);
        console.log(array2[0]);
        
        var array3 = ["haha",123,false,null,undefined];
        console.log(array3);
        
        //修改数组中的数据
        array2[0] = 100;
        console.log(array2);
        
        array1[0] = false; 
        array1[1] = true; 
        array1[10] = null; 
        console.log(array1);
        console.log(array1[5]);
        
        //自定义属性: 当[]中的索引非0~正整数,会作为自定义属性存在
        array1[-5] = -5;
        array1["key"] = "value";
        console.log(array1);
        console.log(array1["key"]);
        
        console.log("----------------------for-------------------");
        //数组的遍历
        //普通for循环 : 不能遍历自定义属性,但是可以遍历empty位置
        for(var i=0;i<=array3.length-1;i++){
            console.log(array3[i]);
        }
        
        for(var i=0;i<=array1.length-1;i++){
            console.log(array1[i]);
        }
        
        console.log("----------------------for...in-------------------");
        //for...in : 可以遍历自定义属性,但是不可以遍历empty位置
        for(var index in array3){
            console.log(array3[index]);
        }
        
        for(var index in array1){
            console.log(array1[index]);
        }
        
        console.log("----------------------foreach-------------------");
        //foreach : 不可以遍历自定义属性,但是不可以遍历empty位置
        array3.forEach(function(element,index){
            console.log(element,index);
        });
        
        array1.forEach(function(element,index){
            console.log(element,index);
        });
        
    </script>
</body>
</html>

八、函数

函数 : 方法 封装功能 函数声明 * function 函数名(参数列表){ 函数体; } 调用: 执行函数中的代码 函数名(实参); 函数表达式 var 变量 = function 函数名(参数列表){ }; 函数表达式的函数名没有作用,一般省略,只有在使用递归的使用才有用 调用: 1.变量名(实参); 2.在函数表达式的最后添加()自调用 注意: 函数的参数可以省略var关键字定义 js中形参与实参可以不一一对应 形参默认值为undefined 函数的返回值如果没有定义,默认为undefined 在js中作用域只看函数 函数可以任意嵌套 如果定义相同的函数,后面的会覆盖前面的函数,不会报错

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>函数</title>
    </head>
    <body>
        <scr
           function fn1(name){
               console.log("名字为 : "+name);
               //return -1;
           }
console.log(fn1("张三","李四"));
       
       //函数表达式
       var f1 = function(){
         console.log("函数表达式1");  
       };
       
       f1();
       
       var f2 = function(a,b){
         console.log("函数表达式2");  
         console.log(a,b);  
         return a+b;
       };
       
       f2(11,12);
       //接收函数的返回值
       console.log(f2(3,5));
       var result = f2(5,8);
       console.log(result);
       
       //递归
       var f3 = function func(i){
           if(i==5){
               return;
           }
           console.log(i);
           func(++i);
           
       };
       f3(1);
       
       //函数表达式自调用
       var f4 = function(a,b){
         console.log("函数表达式4");    
         console.log(a,b);    
       }(1,3);
       
       //js中的函数可以任意嵌套
       /* function fun1(){
           console.log("fun1");
           function fun2(){
               console.log("fun2");
           }
           fun2();
       } */
       
       function fun1(){
           console.log("fun1");
           return function fun2(){
               console.log("fun2");
           };
       } 
       //调用fun1,调用fun2函数
       fun1()();
       //1)调用fun1 2)调用fun2   3)打印fun2返回值
       console.log(fun1()());
       
       function fn1(){
            console.log("第二个fn1");
       } 
       fn1();
    </script>
</body>
</html>

九、作用域

作用域提升 var i; function fn1(){ //作用域提升 //var j console.log(j); //局部变量 var j = 10; //全局变量 e = false; 作用域提升: js作用域只看函数 变量的作用域提升 : 通过var关键字声明的变量,把变量的声明提升到当前所在作用域的最上面 如果局部定义的变量没有通过var关键字声明,这个变量作为全局变量使用,要求使用之前所在的函数必须被调用过 函数的作用域提升 必须是通过函数声明的方式定义的函数存在函数的作用域提升问题 会被提升到当前所在作用域的最上方

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>函数</title>
    </head>
    <body>
        <script>
           console.log(i);
//全局变量
       var i = 1;
       
       console.log("------");
       fn1();
       console.log("------");
       
       function fn1(){
           //作用域提升
           //var j
           console.log(j);
           //局部变量
           var j = 10;
           //全局变量
           e = false;
       }
       //fn1();
      
       a = 11;
       console.log(a);
       
       console.log(e);
       
       var f1 = function(){
           console.log("函数表达式");
       }
       
       //块 : 不是作用域,只有语义化特点,作为整体看
       {
           var name = "zhangsan";
       }
       console.log(name);
       
        //|| && 当左右两变的操作数出现非boolean数据 :
        //1.先把第一个操作数转为boolean,进行判断
        //2.判断规则:
        //a) ||  : 左边的操作数转为boolean之后,结果为true么?如果为true,最终的结果为左边的操作数,如果不为true,最终的结果为右边的操作数
        //2) &&  : 左边的操作数转为boolean之后,结果为true么?如果为true,最终的结果为右边的操作数,如果为false,最终的结果为左边的操作数
        //console.log(null||"a");  //"a"
        console.log(null&&"a");  //null
        console.log(Boolean(null));
        
        // 值传递
        var num = 12;
        function change(n) {
            n = 30;
        }
        change(num);
        console.log(num);
        
        // 引用传递
        var obj = {name: "tom"};
        function paramter(o) {
            o.name = 2;
        }
        paramter(obj);
        console.log(obj.name);
        
        // 给形参o赋予了新的数组
        var obj2 = [1, 2, 3];
        function paramter2(o){
            o = [2, 3, 4];
            o[1] = 3;
        }
        paramter2 (obj2);
        console.log(obj2)
    </script>
</body>
</html>
上一篇:【python学习1】编写猜数字的小游戏


下一篇:常见几种跨域方式