day01

A.今天学到了什么

1.输出方式

<script>
        // console.log("hello world");
        alert("hello")
    </script>

2.变量申明

<script>
        // javascript 是一种弱类型语言，声明变量的时候，不用声明他的类型
        // var a=10;
        // var str="hello world";
        // 可以先声明在赋值

    </script>

<script>
        // 如果没有给变量赋值  会输出 undefined
        var a;
        console.log(a);
    </script>

3.申明提前

<script>
        // js在运行的时候将所有声明的变量，集中到作用域的顶部集中创建，赋值留在原地；
        console.log(a);
        // var a=10;
        let a=10;
    </script>

4.数据类型

4.1基本数据类型

 <script>
        // 1.number型
        var a=10;
        // 如何判断一个变量的类型 typeof
        console.log(typeof a);
        // 2.String 型
        var str="hello world";
        console.log(typeof str);
        // 3 boolean型
        var c=true;
        console.log(typeof c);
        // 4.undefined型
        var d;
        console.log(typeof d);

    </script>

4.2引用类型

    <script>
        //数组
        var a=[1,2,3];
        // 读取数组的值
        console.log(a[0]);
        // 获取数组的长度
        console.log(a.length);
        // 向数组的尾部添加一个值
        a[a.length]=4;
        console.log(a);
        
    </script

5.对象

<script>
        // 1.声明对象
        var obj={
            name:"xuao",
            age:22
        }
        // 2.读取对象属性
        console.log(obj.name);
        // 3.给变量添加属性
        obj.sex="男";
        console.log(obj);
    </script>

5.函数

<script>
        // function+函数名
        // 1.没有返回值
        function say(){
             console.log("没有返回值的函数");
        }
        // 调用
        say();
        // 2.有返回值
        function eat(){
            return "eat" 
        }
        var a=eat();
        console.log(a);  
    </script>

6.变量

   <script>
        // 在函数外部声明的变量叫全局变量
        var a=10;
        function fn(){
            // 在函数内部声明的变量叫局部变量
            var b= 20;
        }
        console.log(b);
    </script>

7.数据类型的转换

7.1基本转换

  <script>
            // 1.string  ,boolean--> number 语法 Number(str)
            // NaN 不是一个数字
            // 只能识别纯数字的字符串
            var str="10";
            var b="true";
            var c="10px";
            console.log(Number(str));
            // false =0  true =1;
            console.log(Number(false));
            console.log(Number(c));
        </script>

7.2自动转换

 <script>
        // 1.算术计算中的自动转换+,-,*,/,%
        // 在算术计算中，会将参与计算的值先转换为number再计算
        var a="10";
        var b=true;
        var c=a-b;
         var c=Number(a)-Number(b);
        console.log(c);
        // 特殊：在+运算中，倘若有一边为字符串 +就变成字符串拼接
    </script>

7.3比较运算的自动转换

<script>
        // 比较运算
        // 比较运算的自动转换：默认先将所有的类型转为number再进行比较
        // 比较运算的结果返回boolean
        var a=20;
        var b=true;
        console.log(a>b);
    </script

7.4字符串类型转换成number

<script>
        // 
        var a="12px";
        var b="12.33px";
        // 转换为整数
        console.log(parseInt(a));
        // 转换为小数
        console.log(parseFloat(b));
        // 必须要以数字开头
        var c="p1222";
        console.log(parseInt(c));
    </script>

7.5任意类型转化为字符串类型

   <script>
        // 两种方法
        var a=10;
        console.log(a.toString());
        console.log(String(a));
    </script>

7.6任意类型转换为boolean类型

 <script>
        // 语法 boolean();
        // 特点 ：在JS中占有五中值为false "" 0  NaN  undefined null
        var a=[1,2,3];
        var obj={
            name:"xxx"
        }
        var b=null;
        console.log(Boolean(obj));
        console.log(Boolean(b));
    </script>

8.自增运算符

 <script>
        var a=10;
        // a++;
        // ++在后 先运算再自增
        // ++在前  先自增再运算
        b=a++ +1;
        console.log(a);
        console.log(b);
    </script>

9.遍历

<script>
        // 遍历
        var arr=[1,2,3,4];
        for(var key in arr){
            console.log(arr[key]);
        }
        var obj={
            name:"ahfdshk",
            age:29
        }
        for( var k in obj){
            console.log(k)
            console.log(obj[k])
        }
    </script>

10.块级作用域

 <script>
        // es5之前没有块级作用域
        for(var i=0;i<5;i++){
            console.log("hello world")
        }
        console.log(i);
        // eS6之后就有块级作用域
        for(let k=0;i<5;i++){
            console.log("hello world")
        }
        console.log(k);
    </script>

11.break和continue的区别

 <script>
        for(let i=0;i<5;i++){
            if(i==3){
                break;
            }
            console.log(i)
        }
    </script>

12.如何获取一个节点

  <p id="test" class="one">hello wrold</p>
   
    <script>
        // 1.如何获取一个节点,di获取
        var test =document.getElementById("test");
        // 2.修改元素的内容 obj.innerHTML
        test.innerHTML="change";
        console.log(test)
    </script

12.1 一个事件

<p id="p">hello world</p>
    <button id="btn">changge</button>
    <script>
        var p=document.getElementById("p");
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            p.innerHTML="改变了"
        }
    </script

12.2通过标签获取

  <p>hello world</p>
    <p>hello world</p>
    <button id="btn">btn</button>
    <script>
        // 通过标签名获取,获取的是一个集合
        var p=document.getElementsByTagName("p");
        console.log(p);
        // p[0].innerHTML="change"; 

        var btn = document.getElementById("btn");
        btn.onclick=function(){
            for(let i=0;i<p.length;i++){
                p[i].innerHTML = "change";
            }
        } 
          
    </script>

12.3 通过class名获取

<!-- p.one{hello world}*4  +tab -->
    <p class="one">hello world</p>
    <p class="one">hello world</p>
    <p class="one">hello world</p>
    <p class="one">hello world</p>  
    <script>
        var ps = document.getElementsByClassName("one");
        console.log(ps);
    </script>

12.4 通过选择器获取

   <div class="one">hello world</div>
    <div class="one">hello world</div>
    <div class="one">hello world</div>
    <script>
        var one=document.querySelectorAll(".one");
        console.log(one);
    </script>