JavaScript简单入门（二）

4、函数

4.1定义函数

方式一

  function abs(x) {
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }

方式二

var abs=function (x) {
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

参数问题：JavaScript可以任意个参数，也可以不传参数

arguments

关键字，代表传递进来的所有参数，是一个数组！

rest

ES6引入的新特性，获取除了已定义的参数之外的所有参数！

function(xx,xx,…rest){}

只能写在最后面，必须用…标识

4.2变量的作用域

在JavaScript中，var定义变量实际上是有作用域的。

假设在函数体中声明，则再函数体外不可使用（非要实现的话，可以考虑闭包）

function f() {
    var x=1;
}
x=x+1;//Uncaught ReferenceError: x is not defined

内部函数可以访问外部函数的成员，反之则不行！

假设内部函数变量与外部函数的变量重名时：

function f() {
    var x=1;
    function f1() {
        var x=2;
        console.log('in'+x);
    }
    f1()
    console.log('out'+x);
}

//输出：in2 out1

函数查找变量从自身函数开始，由内向外查找。假设外部存在同名的函数变量，则内部函数会屏蔽外部函数的值！

提升变量的作用域

function f1() {
    var x="x"+y;
    console.log(x);
    var y='y';
}

//结果：xundefined

说明js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值。

//全局变量
x=1;
function f(){
    console.log(x);
}

f();
console.log(x);

全局对象window

var x='xx'
alert(x);
alert(window.x);//默认所有的全局变量都会自动绑定在window对象下

alert()这个函数本身也是一个window变量

提示：将自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部变量域：let

function a(){
    for(var i=0;i<10;i++){
        consloe.log(i)
    }
    console.log(i);//i依旧能使用  
}


function b(){
    for(let i=0;i<10;i++){
        consloe.log(i)
    }
    console.log(i);//无法使用 
}

常量const

只读变量，无法修改

4.3方法

方法就是把函数放在对象的里面，对象只有两个东西：属性，方法

 var tyl={
        name:'tyl',
        age:20,
        //方法
        score:function () {
            return this.age*100;
        }
    }
 
 //方法调用要带()

this指向调用它的对象

apply

所有的function都有apply方法，可以指向调用对象

5、对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"

5.1Date

var now=new Date();//Thu Feb 13 2020 17:13:10 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime();//时间戳 全世界统一
console.log(new Date(1581585190751));//时间戳转换为时间

5.2 JSON

JSON([JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

在js中，一切皆为对象，任何js支持的类型都可以用JSON来表示；

格式：

• 对象都用{}
• 数组都用[]
• 所有的键值对都用key：value

var user= {
     name: "tyl",
     age: 1,
     sex: "男"
 }

 //对象转化为json字符串 "{"name":"tyl","age":1,"sex":"男"}"
 var json_user=JSON.stringify(user);

 //json字符串转换为对象 参数为json字符串
 var obj=JSON.parse('{"name":"tyl","age":1,"sex":"男"}');

JSON与js对象的区别：

var obj={a:'hello',b:'one'};
var json='{"a":"hello","b","one"}'

5.3Ajax

• 原生的js写法，xhr异步请求
• JQuery封装好的方法
• asios 请求

6、面向对象编程

6.1 原型对象

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 //添加一个属性
Person.prototype.nationality = "English";
 //添加一个方法
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

​ 1、 ES6之后，引入class关键字

//ES6之后
class Student{

    constructor(name){
        this.name=name;
    }

    hello(){
        alert('hello')
    }
}

var xiaoming=new Student('xiaoming');
var xiaohong=new Student('xiaohong');

2 、继承

class XiaoStudent extends Student{
    constructor(name,grade){
        super(name)
        this.grade=grade;
    }

    myGrade(){
        alert("我是小学生！")
    }
}

var xiaoming=new Student('xiaoming');
var xiaohong=new XiaoStudent('xiaohong',1);

本质依旧是原型对象，且可以发现原型的原型会一直到object，最终形成原型链

7操作BOM对象（重点)

浏览器介绍

js和浏览器的关系？

js的诞生就是为了能够在浏览器中运行！

BOM：浏览器对象模型

• IE
• Chrome
• Safari
• FireFox

三方：QQ浏览器、360浏览器

window

代表浏览器窗口

Navigator

封装了浏览器的信息

screen

代表屏幕尺寸

location

代表当前页面的URL信息

document

代表当前的页面，HTML DOM文档树

可以获取具体的文档树节点

获取cookie

history

代表浏览器的历史记录

8、操作DOM对象（重点）

DOM：文档对象模型

核心：浏览器网页是一个Dom树形结构

• 更新：更新Dom节点
• 遍历dom节点
• 删除
• 添

获取Dom节点原生代码，之后可以用jQUery

//对应css选择器
var h1=document.getElementsByTagName("h1");
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');

var childrens=father.children;//获取父节点下所有子节点

更新节点

//操作文本
p1.innerText='p1...' //修改文本值
p1.innerHTML='<strong>hello</strong>'
//操作css
p1.style.color='yellow'

删除结点

//先获取父节点，再删除自己
var self=document.getElementById('p1');
father=self.parentElement;
father.removeChild(p1)

注意：删除多个结点时，children是在时刻变化的，以下操作是错误的

//删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[3]);

插入结点

我们获得了某个Dom结点，假设这个dom结点时空的，我们通过innerHTML就可以增加一个元素，但是这个DOM结点已经存在元素了，我们就不能这么操作，会产生覆盖！

追加方式：

var list=document.getElementById('lsit');
var js=document.getElementById('js');//已经存在结点
father.appendChild(js);

创建方式：

//创建一个新的结点
var newp=document.createElement('p');
newp.id='newp';
newp.innerHTML='新标签';
list.appendChild(newp);

//创建一个style标签
var myStytle=document.createElement("style");
    myStytle.setAttribute('type','text/css');
    myStytle.innerHTML='body{background-color:yellow;}'

    var head=document.getElementsByTagName("head")[0];
    head.appendChild(myStytle);

插入方式

//要包含的结点，insertBefore(newNode,targetNode)
p2.insertBefore(js,p2);

9、操作表单（验证）

表单：form

• 文本框 text
• 下拉框
• 单选框 radio
• 多选框 checkbox
• 隐藏框 hidden
• 密码框 password
• …

表单的作用：提交信息

获取要提交的信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的value，无法更改-->
    <p>
        <span>性别:</span>
        <input type="radio" name="sex",value="man",id="boy">男
        <input type="radio" name="sex",value="woman",id="girl">女
    </p>
</form>

<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');
    //得到输入框的值
    // input_text.value 
    //修改输入框的值
    input_text.value='123'
    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，选中为true
</script>

提交表单

MD5加密密码，表单优化，采用一个隐藏的input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--表单绑定提交事件
οnsubmit=绑定一个提交检测的函数，true，false
将这个结果返回给表单，用onsubmit接收
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return f()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <!--此时采用name属性可以在抓包中被发现原始密码,-->
        <!--<span>密码：</span><input type="password" id="password" name="password">-->
        <span>密码：</span><input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">

    <!--方式二：按钮绑定事件 onclick被点击-->
    <!--<button  type="submit" οnclick="f()">提交</button>-->
    <button  type="submit" >提交</button>
</form>


<script>
    function f() {
      var uname=document.getElementById('username');
      var pwd=document.getElementById('input-password');
      var md5pwd=document.getElementById('md5-password');
      console.log(uname.value);
      console.log(pwd.value);
       //MD5算法
        md5pwd.value=md5(pwd.value);
        console.log(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false，阻止提交
        return true;
    }
</script>
</body>
</html>