JS输出、获取元素，变量，事件组成，流程控制，对象，函数

1.JS输出、获取元素：
输出数据：

• 输入框：prompt（）------取过来的值为字符型；

• 弹出警告框：alert();

• 将内容写到 HTML 文档中: document.write()方法 ；

• 写入到浏览器的控制台： console.log() ；
  

• 将内容写入html中： innerHTML、innerText;
  innerText与innerHTML两个属性的区别：
  同：
  都是可读写的，可以获取元素里面的内容；
  异：
  innerText不能识别Html标签 会去除空格和换行；
  InnerHTML能识别html标签
  即div.innerHTML='<strong>今天是</strong>2019'----其中“今天是”将会变粗
  且保留空格和换行；

获取元素

• 通过 id 获得： document.getElementById()-------id是大小写敏感的字符串

<p id="demo"><p>

 document.getElementById('demo').innerHTML='内容';

• 通过标签名获得：getElementTagName()方法；
• 通过类名获得：getElementByClassName()----获得某些元素集合

<div class="fly">倾听</div>
<div class="fly">蜻蜓</div>


var x=document.getElementByClassName('fly');
console.log(x);

两个div中的内容都将输出

• 返回指定选择器的第一个元素-----querySelector 里面选择器需要加符号 .fly #demo li

<div class="fly">倾听</div>
<div class="fly">蜻蜓</div>

var x=document.getquerySelector('.fly');
console.log(x);

将只得到第一个div中的内容

-返回指定选择器的所有元素集合-----querySelectorAll

<div class="fly">倾听</div>
<div class="fly">蜻蜓</div>

var x=document.getquerySelectorAll('.fly');
console.log(x);

将得到两个div中的内容
2.JS变量
变量名：

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

全局变量：函数外的变量，作用域为全局，即任何地方都可访问；
局部变量：函数内部变量，只可在函数内部被访问；
声明(创建)变量：使用 var关键字

var x;

给变量赋值：

x='demo';

或

var x='demo';

let关键字：只在 let 命令所在的代码块 {} 内有效----作用域只在循环体内，循环体外的变量不受影响

<script>
var  x = 10;
// 这里输出 x 为 10
{  
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10
document.getElementById("demo").innerHTML = x;
结果为 10
</script>

const关键字：声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改
（定义了一个常量引用一个值，用 const 定义的对象或者数组，是可变的）

变量提升：

• var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明

• let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用

• const声明的常量必须初始化
  重置变量

• 使用 var 关键字声明的变量在任何地方都可以修改；

• 在相同的作用域或块级作用域中，不能使用 const 关键字来重置 var 和 let关键字声明的变量；

• 在相同的作用域或块级作用域中，不能使用 const 关键字来重置 const 关键字声明的变量；

• const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的

3.JS对象
对象：带有属性和方法的特殊数据类型
对象的创建：
（1）var x=new 对象名；等价于x=new 对象名；
（2）以字面量来创建对象：{name1:valu1,name2:valu2}
如：person={age=“50”,color="blue};
（3）构造函数来创建对象：
function 构造函数名(){
this.属性=值；
this.方法=function(){}
}
不需要return 就可以返回结果
对象的调用：
（1）对象里面的属性调用：对象.属性名-----”小点可以理解为的“
（2）另一种调用：对象[‘属性名’]，方括号里面的属性必须加引号
（3）对象里面调用方法：对象.方法名()------方法名后面一定要加括号
（4）调用构造函数 必须使用 new
如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个对象。
如果不 new 的话函数内的 this 指向的是 window。
对象属性的调用：对象名.属性名

var small={
     name:'小小'，
     age:'7',
     goodBye:function(){
           console.log('good');
     }
     
}

属性或者方法采用： 属性名： 属性值
多个属性之间用逗号隔开
对象方法的调用：对象名.方法名（）

small.goodBye();

prototype（原型对象）：增加属性或方法
即：构造函数名.prototype.新属性或者新方法

4.JS函数
函数步骤：1.声明 2.调用
执行过程：先调用后声明，将实参传给形参，函数结果应该给调用者

如果实参多于形参，取到形参个数；反之则输出undefined；
函数的调用

• 函数名()

• 使用方法被调用
  

• 使用构造函数被调用（创建一个新的对象）
  
  箭头函数
  (参数1，参数2，参数3)=>{函数声明}
  (参数1，参数2，参数3)=>表达式（单一）
  相当于 ：（参数1，参数2，参数3）=>{return 表达式；}
  隐式函数：在函数中调用的参数就是隐式函数；
  call（）和apply（）---------两者第一个参数必须是对象本身
  区别：apply()将多个参数结合为一个数组传入；
  call()直接作为call的参数传入；

函数返回值return：
（1）return后面的代码不会被执行；
（2）return只能返回一个值------可以用数组或者对象等返回多个值
5.JS事件组成
事件组成：
（1）事件源—事件被触发的对象 如：按钮
var btn=document.getElementById(‘btn’);
（2）事件类型----如何触发什么事件 如：鼠标点击（onclick）还是鼠标移动
（3）事件处理程序—通过一个函数赋值的方式 完成如：
btn.οnclick=function(){ }
6.流程控制：顺序、条件语句、循环语句
顺序：根据先后来流程执行
条件语句：if语句、else语句、if else if语句、switch语句、三元运算符

if语句：

条件成立执行代码，否则什么也不做
if(条件表达式){
  条件成立执行的代码语句
}

else语句：

if（条件表达式）{
   执行语句1
}else{
   执行语句2
}
如果表达式为真则执行语句1，假则为语句2

if else if语句

switch语句:

将表达式与value相匹配，如匹配则执行相应语句，如均不匹配则执行最后的语句

三元运算符：
条件表达式 ？ 执行语句1：执行语句2
如果条件表达式为真则执行1，如果为假反之

循环语句：for循环，while循环，do while循环，for in循环
for循环：循环代码块一定的次数

while循环：在指定条件为真时循环执行代码块

do while循环：至少执行一次循环，若符合条件则继续执行

for in循环：对象属性将全部输出