Java Script

本文主要是介绍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>

这篇关于Java Script的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

Java Script

一、入门

二、定义位置

三、变量

四、运算符

五、数据类型

六、类型转换

七、数组

八、函数

九、作用域

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯