js入门

javascript 入门
作用: 验证发往服务器端的数据,增强用户体验度
历史:…
js的使用方式:
1.行内
2.内部
页面中的任意地方,定义一对script标签对,其中定义js代码
3.外部
外部定义js文件,在页面中的script标签的src属性中定义js的位置
注意:不能使用一个script标签,同时定义js代码并且引入外部文件,无效
js在html中的位置:可以在任意位置
1.head中 便于后期维护—配合window.onload使用
2.body结束之前 防止没有加载的内容获取不到

 <div id="box">AI只能电饭煲</div>
    <button type="button" onclick="console.log('点我一下,让你加入百度,改变世界!!!,给他们老板泼水!!!')">普通按钮</button>
    <script>
        alert("345676889");
        console.log(document.getElementById("box"));
    </script>

 <meta charset="UTF-8">
    <title></title>
    <!--内部使用js-->
    <script>
        alert("123465");
        //待页面加载完成之后执行的内容
        window.onload=function(){
            console.log(document.getElementById("box"));
        }
    </script>
    <!--引入外部js文件-->
    <script src="js/first.js"></script>

js中定义变量:
* 使用关键字var定义,因为js是一门弱类型语言,动态语言
* 声明的同时赋值,先声明后赋值
* 注意:
* 1.js中的变量,不赋值存在默认值undefined,声明了没赋值
* 2.如果变量没有定义,js中依旧无法使用
* 3.同时定义多个变量,可以一个语句中打印,使用,进行分隔
* 4.变量的作用域提升问题
* 只要有变量,这个变量只有变量的声明才会被提升到当前作用域的最上面 var a;赋值不会被提升
* 5.js中的变量可以存储任意类型的数据
* 6.js可以省略var关键字定义变量,但是这个变量不会发生作用域提升,提升作用域只会找var关键字

 var a;
        console.log(a); //undefined
        a="haha";
        console.log(a);

        var  x=3,y=4,z="呵呵";
        console.log(x,y,z);

        var arr=[1,2,3,4];
        var fn=function(){

        };

        var obj={};

        xiaoxin="蜡笔小新";
        console.log(xiaoxin);

数据类型:
* 基本数据类型
* 数值型 Number-----蓝色
* 整数,小数,正数,负数
*
* NaN : NOT A NUMBER 不是一个数字
* 如何获取NaN类型数据:
* 1.自己赋值
* 2.运算无法得到正确结果
*
* 字符串 String-----黑色
* “”|’’ 其中存放任意字符定义字符串
*
* 布尔 Boolean-----蓝色
* true|false
*
* Null 空 -----灰色
* 如何获取Null类型数据:
* 1.自己赋值
* 2.没有,回去不到,就是null
*
* Undefined 未定义
* 如何获取Undefined类型数据:
* 1.自己赋值
* 2.声明没有赋值
*
* 复合数据类型
* 对象
* 一切皆对象
* {} 中定义对象
* 对象中的数据以键值对的形式存在
* 多个键值对之间使用,进行分隔
* 称键值对为对象的属性
* key–满足标识符的命名要求
* value–任意类型的数据
* key和value之间使用:连接
* 所有的key默认在底层都是字符串,标准的标识符的写法key可以省略""

 var num1=1.1;
        var num2=NaN;
        var num3=5/'ABC';
        console.log(num1);
        console.log(num2);
        console.log(num3);

        var str1="";
        var str2=" ";
        var str3="123";
        console.log(str1);
        console.log(str2);
        console.log(str3);

        var flag=false;
        console.log(flag);

        var ns1=null;
        console.log(ns1);

        var person={
            name:'zhangsan',
            age:18,
            123:false,
            "abc 123":123
        };
        console.log(person);

        function f(){
            console.log("我是一个函数");
        }
        f();

对象类型不参与类型转换
1.显示类型转换
任意类型都是可以转为String,boolean,Number
通过这样的三个函数进行类型转换
String(“数据”) 返回值字符串类型的数据
Number(数据)
Boolean(数据)
把不同类型的特殊数据拿以上三个方法进行测试,总结规律
2.隐式类型转换
不是为转换类型,而是为了进行运算等操作,不得不转换类型的

 console.log(Number(''));    //0
        console.log(Number(''));    //0
        console.log(Number('123')); //123
        console.log(String(0));
        console.log(String(false));
        console.log(Boolean(2,2));
        console.log(Number("123anc"));  //NaN

        console.log(1+'');  //作为字符串连接符使用
        console.log(1-'2'); //先把''转为数字再运算

  console.log(Number(''));    //0
        console.log(Number(''));    //0
        console.log(Number('123')); //123
        console.log(String(0));
        console.log(String(false));
        console.log(Boolean(2,2));
        console.log(Number("123anc"));  //NaN

        console.log(1+'');  //作为字符串连接符使用
        console.log(1-'2'); //先把''转为数字再运算

console.log(1);推荐使用console.log进行测试
* js中不同类型的数据可以参数运算, 隐式类型转换,自动转为数值型
*
* + 字符串连接符
*
* = == === 区别
* = 赋值
* == 比较内容是否相等
* === 比较类型和内容是否全部相等
* 先比较类型,类型相等才比较内容
*
*
* 逻辑运算符:
* java中两边的操作数只能为booelan类型
* js中两边的操作数可以为其他类型
* 如果两边的操作数为其他类型,非boolean类型的数据出现的时候
* 结果肯定为其中一个操作数之一
* && 第一个操作数转为boolean,如果为false,结果为第一个操作数
* 如果为true,结果为第二个操作数
* || 第一个操作数转为boolean,如果为false,结果为第二个操作数
* 如果为true,结果为第一个操作数
*
* {} 块
* java中{}作为作用域,js中没有作用域的作用,只有语义化的概念
* js中只有函数是左右域

 console.log(1);
        console.info(1);
        console.error(1);
        console.warn(1);

        console.log(1+true);
        console.log(2/'a');
        console.log(2/null);

        console.log(Number(null));
        console.log("------"+Number("false"));

        console.log(1 == '1');
        console.log(false == "false");  //false
        console.log(false == 0); //true

        console.log(1 === '1');  //false
        console.log(false === 0); //false

        console.log( 3 > '5');

        console.log( "---------------------------------------");
        //! 非 取反
        console.log( !true);
        console.log( !!true);
        console.log( !!!true);
        console.log( !1+","+Boolean(1));
        console.log( !undefined+","+Boolean(undefined));
        console.log( Boolean(null));

        console.log( "--------------------&&-------------------");
        console.log(true && 1);
        console.log('' && 1);
        console.log(true || 1);

        console.log( "--------------------{}-------------------");
        console.log(a);
        {
            var a=3;
        }
        console.log(a);

数组:
存储任意个,任意类型的数据,长度可变,索引
数组的构建方式:
1) new Array(); 构建一个空数组
2) new Array(数据值1,2,3,4…); 创建的同时就赋值
2) [1,2,3,4…]; 字面量的创建方式—推荐
根据索引操作数组中的数据 数组名[索引] 索引从0开始
最后一个数据的索引 : length-1
length 属性 数组的长度
当数组的索引非正常形式,作为自定义数组属性存在

数组的常用方法:
slice 截取（切片）数组，原数组不发生变化
参数1个 从参数位置开始截取到最后
参数2个 从第一个参数位置开始,到第二个参数位置结果,不包含结束位置
原数组不发生改变
splice 剪接数组，原数组变化，可以实现前后删除效果
参数1个 从参数位置开始截取,到最后
参数2个 从参数1开始截取,截取第二个参数个数据
参数3,到n个 从参数1开始截取,截取第二个参数个数据,用第三个参数开始的参数作为替换的数据放在原数组的位置
原数组发生改变,变为剩下的数据

  var arr1=new Array();
        arr1[0] =3;
        arr1[1] ='哈哈';
        arr1[2] = false;
        console.log(arr1);

        var arr2=new Array(null,undefined,1,'');
        console.log(arr2);
        //推荐
        var arr3=['white','red',undefined,'green','yellow'];
        console.log(arr3);
        console.log(arr3.length);
        arr3.length=10;
        console.log(arr3.length);
        console.log(arr3);
       // arr3.length=2;
       //console.log(arr3);

        //遍历
        // 普通for循环
        for(var i=0;i<=arr3.length-1;i++){
            console.log(arr3[i])
        }
        console.log(i);

        //for in   注意:空的位置undefined值遍历不到
        for(var n in arr3){
            console.log(arr3[n]);
        }

        //foreach  注意:空的位置undefined值遍历不到
        arr3.forEach(function(ele,index,arr){
            console.log(ele+","+index+","+arr);
        });

        arr3["哈哈"]="haha";
        console.log(arr3["哈哈"]);
         console.log(arr3.slice(2));
        console.log(arr3);

        console.log(arr3.slice(2,4));
        console.log(arr3);


        console.log(arr3.splice(2,4,'1','2','3'));
        console.log(arr3);