js第一周学习

day1

   # JavaScript概述
        什么是：简称js，是一个运行在【js解释器】中的一个【解释型】【弱类型】【面向对象】的脚本语言。
        1.js解释器：
            1.浏览器自带js解释器
            2.以后我们确实也会自己安装一个js解释器-node.js
        2.编译型：在运行程序前，需要先检查程序是否报错，如果有报错直接不运行，比如：Java，C#，c++ --较为严格
          解释型：在运行程序之前，不需要检查程序是否报错，直接运行，碰到错误了才停止，比如：JavaScript，PHP--较为自由
        3.弱类型：变量想保存什么数据类型就保存什么数据类型，由数据决定了数据类型是什么，比如：JavaScript，PHP--自由
          强类型：变量能保存什么数据类型，需要提前声明出来，由数据类型来决定能保存什么的数据是什么，比如：Java，c--严格


    # JavaScript特点：
        1.用任何文本编辑器编写代码：HBuilder,VSCode,记事本开发都可以
        2.解释型
        3.弱类型
        4.面向对象：以后我们会经常见到带有一种写法：万物皆对象
                对象名.属性名；
                对象名.方法名（）;
    # JavaScript如何使用：
        1.js的引入方式有两种：
                1.在HTML中书写一个script标签： -仅用于测试使用

                                ```<script>
                                    js代码
                            </script>
                                ```
                 2.创建一个xx.js文件，再在HTML进行引入---正式开发
                             如何引入：<script src="xx.js">不能在这里面书写js代码</script>
          2.打桩输出：疯狂打桩：非常重要的一种找错方式：3种
                  1.在控制台输出日志：console.log（）；
                  2.在页面输出：document.write（）；
                  3.在弹出框输出：alert（）；
          3.变量和常量：
              变量：简单来说就是一个值能变化的数据/量
                  何时：如果以后某个数据我们要反复使用，最好把它先保存成一个变量，以后只需要使用变量名相当于就是在使用变量里对的数据/量
                  语法：var 变量名=值；
                  特殊：
                      1.面试题：内存和变量有区别么？
                          硬盘：保存数据/文件，机械盘和固态盘
                          CPU：中央处理器--用于计算的
                          内存：是程序在运行过程中【临时】用到的数据空间
                              内存空间：时机保存数据的地方
                              内存地址：内存空间的门牌号
                      2.变量名其实不是随便的
                          1.不能以数字开头
                          2.建议：尽量的要见名知意
                          3.使用驼峰命名
                          4.name是一个关键字，不管你保存的数据类型是什么，都会转为字符串
                          5.千万不要把关键字当做变量名
                      3.如果你想要创建多个变量，没有必要每个都写var 可以用逗号隔开，最后分号结尾
              常量：一旦创建，直就不允许修改了
                  语法：const 常量名=值；
          4.算术运算符：+，-，*，/，%：前四个用法和数学差不多，
                  %：取余，俗称模，两数相除，不取商，而取除不尽的余数
                      作用：
                          1.判断奇偶性
                          2.取出一个数字想要的后n位
                              1234%10-->4
                              1234%100-->34
                              1234%1000-->234
                  特殊：
                      1.算数运算符具有隐式转换，默认：都是转为数字在运算
                          特殊在+运算，如果碰到了一个字符串，两边都会变成字符串进行拼接
                         2.-*/%：其实字符串也能转为数字，但是前提是一个纯数字，但凡包含一个非数字字符，则为NaN：纯粹的垃圾：Not aNumber ：直译：不是一个数字，但是确实是一个数字类型，但不在三界之中
                         NaN：全是缺点：1.NaN参与任何算数运算结果认为NaN
                                         2.NaN参与任何比较运算结果都为false
        5.数据类型：
            原始/基本/值类型：5个
                1.String---字符串，取值有无数个，但是必须用“”包裹
                2.Number---数字，取值有无数个，直接书写
                3.Boolean---布尔，取值只有两个（true或false）
                4.Undefined ---变量如果声明了，但是没有赋值的话，默认值就为underline，只有这一个取值（没有什么用处）
                5.Null---空，取值只有一个null ，释放内存/变量
             引用/对象类型：11个对象（属性和方

day2

# 数据类型的转换:[一切的页面上获取的数据类型都是字符串]
    JavaScript是一个弱类型的语言
    由数据决定了我们的数据类型是什么
        1		number
        "1"		string

        number + number = number
        string + number = string
    查看数据类型：typeof（）；
    1.隐式转换：程序内部的转换
        算术运算符具有隐式转换
           作用：我们如果精通了隐式转换，跟本不需要console.log（）就能知道结果
                默认：都是转为数字，再运算
                特殊：1.不管是什么运算，只要没碰上字符串，都会隐式转换为数字进行运算
                    true->1
			false->0
			undefined->NaN
			null->0
                    2.+运算并且碰上字符串，则为拼接，最后结果为字符串
                    3.-*/%，就算是字符串1也会隐式转换为数字，前提是纯数字字符串，否则最后的结果为NaN
                    NaN：不是一个数字 ，但是确实是数字类型，只不过不在三界之中
                        全是缺点：1.不大于，不小于，不等于任何值，包括自己
                        2.参与任何算数运算+-*/%，结果仍为NaN
                      问题：正是因为NaN参与任何比较运算结果都为false，甚至自己都不等于所以我们没办法用一个普通的比较运算来判断X是不是NaN
                      解决：！isNaN(x):此方法不管你放的X是什么，都会隐式转换为数字
                          true->说明是一个有效数字
                          false->说明是一个NaN
                       目的：防止用户恶意输入，但是目前为止，只能防止数字
     2.显式转换：也叫作强制转换：
         何时使用：隐式转换出来的结果不是我们想要的，先强制转换为需要的，再计算
         如何使用：
             1.转为字符串：
                 var str=xx.toString();//xx不能是undefined和null，undefined和null不能使用，操作
                 因为页面上获取的数据都是字符串，所以几乎用不上此方法
              2.转为数字类型：
                  1.parseInt(x)；-parse 解析 int 整型
                      执行原理：从左向右依次读取每个字符，直到遇到不认识的字符停止
                      去掉单位
                   2.parseFloat（x）；
                       执行原理：几乎和parseInt一致，但是认识第一个小数点
                   3.Number(x);隐式转换的底层原理


   # 函数
       function：自定义函数：也称之为方法：需要【预定义好】的，可以反复使用的一个代码段
       rotate（）-完成了一个根据角度制顺时针旋转45度的功能
       js中的函数---完成了一个。。。的功能
       1.创建函数：
           function 函数名（）{
                   代码段；//若干操作
               }
        2.调用函数：
            1.直接在js中程序员写几次调用，就会执行几次操作 ----函数名（）；
            2.让用户来自己触发：
                <elem onclick="函数名()"></elem>
        3.以后何时使用函数：
            1.每次写完代码段都要封装成一个函数，因为函数的js优先性最高，属于第一等公民
            2.不希望一打开页面就执行
            3.能够反复执行
            4.他是独立的功能体
            5.不用自己释放内存，哈数调用完会自动释放内存
         4.带参函数：
             语法：形参：其实就是一个变量名，不需要var
                 function 函数名(形参,...){
			函数体;
		}
              调用：实参：实际参数
                       函数名(实参,...);

		function zwjs(name,age,hobby){
			console.log("我的名字叫"+name+"，今年"+age+"岁，喜欢"+hobby);
		}
		zwjs("张三丰",128,"打太极");
		zwjs("张无忌",18,"撩妹");
		zwjs("张三",28,"说法");	
                特殊：实参的个数以及顺序 和 形参的个数以及顺序一致
           5.普通函数：操作永远是固定的
               带参函数：根据传入的实参，执行略微不同的操作
               
               
# 3.分支结构
    1、代码流程控制语句：
	1、顺序结构：默认的，代码从上向下

	2、分支结构：根据条件不同，选择部分代码执行

	3、循环结构：根据条件满不满足，考虑要不要再执行一次相同 或 相似代码

2、关系/比较运算符：> < >= <= == !=
	结果：一定都是一个布尔值

	注意：==才叫比较		=叫赋值：右边的东西放到了左边保存起来

3、逻辑运算符：
	&&：与（并且）：全部条件都满足，结果为true
			只要有一个条件不满足，结果为false

	||：或：全部条件都不满足，结果为false
		只要有一个条件满足，结果为true

	 !：颠倒布尔值

4、分支的语法：
	1、一个条件一件事，满足就做，不满足就不做
		if(条件){
			操作
		}

	2、一个条件两件事，满足就做第一件，不满足就做第二件
		if(条件){
			操作;
		}else{
			默认操作;
		}

	3、多个条件多件事：满足谁就做谁
		if(条件1){
			操作1;
		}else if(条件2){
			操作2;
		}else if(条件3){
			操作3;
		}else{
			默认操作;
		}

	else可以省略，但是不推荐
            
            

day3

# 1.循环结构：
    反复执行相同 或相似的代码
        循环三要素：
            1.循环条件：从哪里开始，到哪里结束
            2.循环体：操作-要做什么事
            3.循环变量，变量要变化
      1.while循环：其实循环从宏观上看是一起执行的，但是微观上是一次次执行的
      语法：
          var 循环变量=几；
             while（循环条件）{
                 循环体；
                 循环变量变化
                 }
        执行原理：先判断循环条件满足与否，如果为true，则执行，如果为false 则停止
        特殊：死循环：永远不会结束的循环，但是真有用：往往不确定循环次数的时候就会用到死循环
        while(true){
		循环体;
	}
             往往死循环还要搭配上退出语句break；只能写在循环最后
        2.for循环：执行原理和while一样，只是语法更加简洁
            for(循环变量的创建;循环条件;变量的变化){
	循环体;
}
        特殊：1.循环变量的创建和循环变量的变化，其实可以写多个
            2.死循环：for（；；）{}
    总结：1.while：语法更加繁琐，建议只用于不确定循环次数的时候---死循环
            2.for：语法更为简洁，建议只用于确定循环次数的时候---大部分情况
    问题：函数 和 循环都是可以反复执行的，区别在哪里
            函数：要么程序员调用几次，执行几次，或者用户触发几次执行几次
            循环：程序员写好的，而且几乎是一瞬间执行完毕
# 2.数组
    1.创建数组：
        1.直接创建：var arr=[];//空数组
            var arr=[元素，。。。。];
        2.构造函数方式：var arr=new Array();//空数组--个人不推荐使用
    2.访问/获取：获取出数组中某个元素
            数组名[下标]
    3.添加/覆盖：数组名[下标]=新元素；
            特殊：1.下标处没有元素，则为添加
               2.下标处有元素，则为覆盖/替换
     4.数组的三大不限制：
         1.不限制元素类型
         2.不限制元素个数
         3.不限制下标越界--算是一个缺点
             获取时--下标越界，返回undefined
             添加时 - 下标越界，会变成稀疏数组，导致下标不连接
     5.数组有一个唯一的属性：数组名.length; - 获取数组的长度
             三个固定套路：
                 1.向末尾添加元素：arr[arr.length]=新元素；
                 2.获取倒数第N个元素：arr[arr.length-n];
                 3.缩容：删除末尾n个元素：arr.length-=n;
      6.其实经常我们不会拿出数组中的某一个来做操作，往往是拿出所有元素来做操作
          遍历数组：将数组中的每一个元素取出来执行 相同 或 相似的操作
          公式：
              for（var i=0;i<arr.length;i++）{
                  arr[i];//当前次元素
                      }

day4

# 1.JavaScript其实是由三部分组成：
    1.ECMAScript（3/5/6）-核心语法：经常性做算法题，语法很关键-内功心法
    2.DOM--Dociment Object Model:文档对象模型
    3.BOM - Browser Object Model:浏览器对象模型
    
# 2.DOM概述：Document Object Model:文档对象模型 - 操作文档（html/css）
    DOM树：DOM将HTML看做了一个倒挂的树状结构：树根其实是一个document对象
            document对象：不需要我们创建，一个页面自带一个document 
            作用：只要是对象一定有两个东西（属性和方法）：提供了我们找到&操作元素的方法
            
    
# 3.查找元素：
    1.通过HTML特性去查找元素
        1.通过id查找元素：
            var elem=document.getElementById("id值");
               特殊：1.如果有多个相同id，只会找到返回第一个 - id是唯一不重复的
                   2.返回的结果：<li id="li">油条</li> - 这个才能称之为叫做一个DOM元素/节点/对象。
                   3.前端一般不能用id - id一般是留给后端使用，而且id也不好用
         2.通过class名查找元素：
             var elems=ducoment/parent.getElementsByTagName("class名");
             特殊:1.返回的结果：不是一个DOM元素/节点/对象，是一个DOM集合，是不能直接用于任何操作的
                     解决：要么用下标拿到某一个，要么遍历拿到每一个
                  2.parent：代表的是你已经找到的某个父元素
     2.通过关系 获取元素：前提：至少要先找到一个元素：
         父元素：elem.parentNode; - 单个元素
         子元素：elem.children; - 集合：集合不能直接操作
         第一个子元素：elem.firstElementChild;
         最后一个子元素：elem.lastElementChild;
         前一个兄弟元素：elem.previousElementSibling;
         后一个兄弟元素：elem.nextElementSibling;
      *****注意：单个元素找到的就是单个元素，没找到的是null
              多个元素找到了是一个集合，没找到是[];**


# 4.操作元素:<div class id title href style="样式">内容</div>
    1.内容：
        1.innerHTML：获取 或 设置元素的内容部分，并且能够识别标签
                获取：elem.innerHTML;
                设置：elem.innerHTML="新内容";
        2.innerText:获取 或 设置元素的文本部分，不能识别标签
                获取：elem.innerText;
                设置：elem.innerText="新文本";
        以上两个是对双标签使用
        
        3.value：获取 或 设置 input的内容部分
                 获取：input.value;
                 设置：input.value="新文本";
                 
     2.属性：
         1.获取属性值：elem.getAttribute("属性名");
             简化版：elem.属性名；
         2.设置属性值：elem.setAttribute("属性名","属性值");
             简化版：elem.属性名=“新属性值”;
      简化版虽然简单，但是有缺陷
          1.class必须写为className
          2.只能操作标准属性，不能操作自定义属性
        个人建议：优先使用简化版，简化版满足不了，再用标准版做补充
      3.样式：
          样式有三种使用方式：
              1.内联
              2.内部
              3.外部 - 符合内容HTML和样式JS的分离原则
            更喜欢操作内联样式：
                1.内联样式的优先级最高 - 保证我们js写的样式必然生效
                2.只会操作当前元素 - 不会牵一发而动全身
            如何：
                获取：elem.style.css属性名；
                设置：elem.style.css属性名=“css属性值”;
                    特殊：1.设置css属性名如果有横线要去掉横线，变为小驼峰命名
                    2.获取只能获取到内联样式 - 忍忍就过去了
            ** 获取：往往用于判断
             设置：其实就是修改**
    
# 5.绑定事件：
    符合内容HTML与央视css与行为JS的分离原则
     单个元素：
         elem.onclick=function(){
                 this - >就是绑定事件的这个元素
                         }
     多个元素：
         for(i=0;i<elems.length;i++){
                 elems[i].onclick=function(){
                     this - >是当前触发事件的元素
                             }
                                 }
                                 
                                 
                                 

1个小练习

// 开关门效果 `
...

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>

	<script>
  //找到按钮

</script>   `