javascript简单入门

JavaScript

1. 简述JavaScript

JavaScript：是一种弱类型脚本语言，其源码不需要经过编译，而是由浏览器解释运行，用于控制网络的行为

• jQuery：一个库，封装了许多方法。优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能。在前端看来使用它仅仅是为了兼容IE6，7，8。

• JavaScript几大框架：Angular、React、Vue、Axios

• UI框架：

  • Ant-Design：阿里巴巴出品，基于React的UI框架
  • ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
  • Bootstrap：Twitter推出的一个用于前端开发的开源工具包
  • AmazeUI：一款HTML5跨屏前端框架

• JavaScript构建工具：Babel、WebPack

• 微信小程序：方便开发微信小程序UI的框架：WeUI

JavaScript的设计思想：

• 借鉴C语言的基本语法
• 借鉴Java语言的数据类型和内存管理
• 借鉴Scheme语言，将函数提升到“第一等公民”（frist class）的地位
• 借鉴Self语言，使用基于原型（prototype）的继承机制

2. 基本使用及HelloWorld

• 引入JavaScript

  • 可以直接嵌入在html代码中（内部引入）

    • 利用<script></script>标签

    • 将其同样放在head标签内部

    <script>
        alert("hello,world");
    </script>

    • 上代码实现的是弹窗效果

  • 可以单独使用一个文件（外部引入）

    • 与CSS类似，也可以单独写一个.js文件，里面是JavaScript的代码

    • 然后在html代码中进行引入。引入并不是使用link标签，而还是使用<script></script>

    <script src="konjavascript.js"></script>
     
    <script src="js文件路径"></script>

    • 注意script必须成对出现，不能使用自闭合标签像这个<script.../>
    • 有一个type属性不需要显式定义，默认是JavaScript

• 注释写法：//我是注释

3. 浏览器控制台使用

• 基本语法
  • 定义变量：弱类型 变量类型不存在
    • 所有都是 var xxx = ...
    • var可写可不写（弱类型，类比python）
  • 条件控制：if/else/else if
  • 基本语法balabala与c类似
• JavaScript代码调试
  • 使用浏览器
  • 浏览器-审查元素-控制台 里面可以写JavaScript代码
  • 常用console.log()：打印变量

4. 数据类型快速浏览

弱类型指的是在写代码的时候不需要指定类型，但是实际上数据还是有类型的区分

数据类型（typeof）

• number：不区分小数和整数

  • 特殊的有NaN（not a number，但是类型是number）、Infinity、...

• string：没有char的概念

• bool：...

• ...

• null：空

• undefined：未定义。例如数组越界的时候不报错但是是undefined

• 一些运算符

  • = == ===
    • =：赋值
    • ==：判断相等（仅需要值相同即可，不需要类型相同）
    • ===：绝对等于（必须类型和值都相同）
      • 坚持使用===来比较
      • NaN===NaN：结果为false（NaN与所有东西都不等，包括自己）
      • 方法：isNaN()

• 使用规则啥的类似于python

5. 严格检模式strict

考虑一些问题：

• 定义变量的时候：var表示自适应，根据定义的位置决定，不加默认是全局变量

• 定义变量的两个关键字var和let

  • 作用域：var是函数作用域，let是块作用域
  • 使用：let不能在定义之前访问该变量，但是var可以
    • 局部变量建议都是用let

严格检查模式：'use strict'

• 将这个字符写到.js文件的第一行
• 使用严格检查模式！

6. 字符串类型详解

• 字符串：双引号单引号都行

• 转义符：\

• 长字符串：飘号（自命名的），可以带换行

  let a = `aksldjkasd
  asdasd
  asdasda
  asdasdasd
  asdasd`;

• 格式字符串：利用${}嵌入变量（EL表达式？）

• 字符串的每一位可以获取，但是不可变（不可用赋值号来直接改变）

• 一些方法：

  • .length()
  • .toUpperCase()
  • .toLowerCase()
  • .indexof()
  • .substring()
  • ...

7. 数组类型详解

数组可以包含任意类型的数据。

• 长度arr.length
  • 可以直接给length赋值，这样数组的长度会发生变化，填充元素为empty，使用的时候为未定义
  • 或者元素丢失
• 下标索引.indexOf()
• 截取数组.slice()
  • 截取数组的一部分，返回一个新数组。类似于substring
• .push()和.pop()
• .unshift()和shift:
  • unshift：压入到头部
  • shift：弹出头部的第一个元素
• .sort
• .reverse
• .join()

8. 对象类型详解

JavaScript也是面向对象的语言。

JavaScript中键值对，键是字符串，值可以是任意类型

定义对象是使用键值对的形式：

var person = {
    name:xxx，
    age:xxx,
    email:xxx,
    score:xxx
};

• JS中对象使用大括号表示
  • 用键值对来描述属性，属性之间使用逗号隔开
  • 对象赋值，直接用=
  • 使用一个不存在的对象属性，不会报错，而是undefined
  • 可以动态删减属性
    • delete
  • 动态添加：直接用=
  • 判断一个属性是否在对象中in
    • 包括它父类的属性也会查找
  • 判断一个属性是否是这个对象自身拥有的.hasOwnProperty()
    • 不去查找父类

9. 分支和循环详解

流程控制：

• 判断控制

  • if/else/else if

• 循环控制

  • while / do while

  • for

    • 其中循环变量用let

    for(let i=0;i<xxx;i++)

  • 引入一个foreach循环

  • for in 循环：与python中的还是有一些区别，需要注意

var arr = [3,4,5];
for(var x in arr){
    console.log(x)
}
for(var y in arr){
    console.log(y)
}

• 第一个循环打印0，1，2
• 第二个循环打印3，4，5
• for in获取的是下标或者是key
• for of获取的是真实值value
  • for of不能用于不可迭代的类型

10. Map和Set集合

ES6的新特性

Map：类似python中的字典

var map = new Map()

• 可以用二维数组来初始化（小数组存放键值对的关系）
• 通过.get(key)方法来获取值value
• 通过.set(key,value)来设置值
• delete

Set：无需不重复的集合

var set = new Set()

• 用数组来初始化

• 一些方法：

  • .add()
  • delete
  • has()

• 遍历Map和Set只能使用for of

  • 使用for in没有效果

var map = new Map([['a',1],['b',2],['c',3]]);
var set = new Set([1,1,2,3,4,4,5])
for(let x of map){
    console.log(x);
};
for(let x of set){
    console.log(x);
}

11. 函数的定义和参数获取

• 定义函数一：

function 方法名(参数)
{
    ...
    return xxx
}
function abs(x)
{
    return x>0?x:-x; //这个运算符也是存在的
}

• 不用显式指定返回类型

• 用function表示定义函数

• 如果没有执行return，函数执行也会返回结果，结果是NaN（再次表明JavaScript很随意，很难报错）

• 定义方式二：

var abs = function(x){
    return x>0?x:-x;
}

• function(x){...}是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用

• 参数问题：可以传递任意参数，也可以不传递参数

  • 这样的随意性就会带来不好

  • 假设参数不存在，如何规避？

    function abs(x)
    {
        if(typeof(x) !== 'number')
            {
                throw('Not a Number')
            }
        return x>0?x:-x;
    }

  • 假设参数存在多个：

    • 使用arguments，这是JavaScript免费赠送的一个关键字

      • 代表传递进来的所有参数，组织成数组形式
      • 但是最终生效的x，还是第一个传进来的生效（即arguments[0]）

    • 使用rest，可以获取除了第一个参数之外的后面的参数，组织为数组形式

      • ES6引入的新特性
      • 使用的时候，放在最后面...rest，接收多余参数。

    function abs(x,...rest)
    {
        console.log(arguments);
        console.log(rest);
    }

    • 对于上面的函数，调用abs(1,2,3)
    • 输出结果为：[1,2,3] [2,3]

12. 变量的作用域、let、const详解

• var定义变量实际是有作用域的

  • 在函数体内定义的变量在函数体外不能使用
  • （如果一定要在函数体外使用，需要使用‘闭包’相关概念）
  • 自己有就找自己的，不然往上找

• 自动提升声明，但是不提升赋值？？

• 养成规范：所有的变量定义都放在函数的开头，不要乱

  • 类似C

• 全局对象，默认所有的全局对象都会绑定在window对象上

  • JavaScript的实际上的仅仅一个全局作用域

• 由于所有的全局对象都会绑定到window对象上，多个文件之间就可能会出现命名冲突的情况

• 所以一般会有以下规范，在一个文件中，所有的全局对象都绑定在自己的一个对象上

  // 这是一个.js文件
  'use strict';
  var xxx = {};// 定义一个用来绑定其他对象的对象
  
  //下面定义对象（包括变量和函数）
  xxx.a = 1;
  xxx.b = 2;
  xxx.f = function(){
      ....
      return 0;
  }

  • 类似于C++中的命名空间

• 局部作用域 let

  • ES6引入的新特性

• 举个栗子：for(let i=0;i<100;i++)

• 建议使用var

• 常量 const：常量定义的之后不允许修改

13. 方法的定义和调用、apply

方法：对象里面的函数

• 重新提示，JavaScript的对象类似于python中的字典，利用{}

var student1 = {
    name:zhangsan;
    age:18;
    // 方法
    run = function(){
        console.log("逃离罗翔老师")
    }
}

• 依然存在this关键字，指向调用它的对象

• apply：在JS中可以控制this的指向

• 函数名.apply(需要调用这个函数的对象，函数需要的参数[组织成数组的形似])

14. JSON对象

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

• 在JavaScript中，一切皆对象

• 任何JS支持的类型都可以使用JSON来表示

• 格式：

  • 对象使用{}
  • 数组使用[]
  • 键值对使用key:value

• 对象转化为json字符串：

  JSON.stringify(对象)

• json字符串转化为对象：

  JSON.parse(JSON字符串)

15. 面向对象原型继承

JavaScript的面向对象有点区别：

传统的面向对象：

• 类：模板
• 对象：实例

类似继承的原型__proto__

可以通过指定这个参数，来指定某个对象的原型是谁：

xiaoming.__proto__ = Student

• 这种方法可以随意指定，在运行期间也可以修改

• 实际效果就是父类，于是改进成为父类

16. 面向对象class继承

• class关键字
  • ES6

1. 定义一个类，属性和方法

   class Student{
       constuctor(name){ //构造器（类似c++构造函数）
           this.name = name;
       }
       hello(){
           alert('Hello')
       }
   }
   
   var xiaoming = new Student('xiaoming');
   var xiaohong = new Student('xiaohong');

   • 开始正规了起来

2. 继承

   class xiaoxuesheng extends Student{
       constructor(name, grade){
           super(name);
           this.grade = grade;
       }
       xiaoxueshengnohello(){
           alert("hello,woshixiaoxuesheng");
       }
   }

   • 本质还是修改了原型，就是写法上对后端更加友好

• 原型链：原型的原型的原型，开始套娃
  • 原型一直追溯，最终肯定到oject，而object的原型也是object（点不完）

17. 操作BOM对象

• JavaScript诞生是为了能够在浏览器中运行

DOM：一套操作HTML标签的API

BOM：一套操作浏览器的API

• 浏览器对象模型

• window对象：（最顶层对象）

  • window代表浏览器窗口

  window.alert(xxx)
  window.innerHeight
  window.innerWidth
  window.outerHeight
  window.outerwidth
  ...

• 下面的重要对象都附属于window对象

• Navigator：封装了浏览器的信息

  • navigator
  • 里面的信息可以人为修改，不建议使用这些属性来判断和编写代码

• screen：屏幕信息（width，height）

• location：

  • 代表当前页面的url信息
    • host：主机
    • href：链接
    • protocol：协议
    • reload()：方法，刷新
    • assign(url)：跳转到设定的url

• document：代表当前的页面

  • HTML，DOM文档树
  • 获取具体的文档树结点，达到控制网页行为的目的
  • 可以获取网页的cookie
  • 服务器端可以设置cookie：httpOnly

• history：浏览器的历史记录

  • 实现了前进，后退操作
  • back()、forward()

浏览器网页就是一个DOM树形结构

• 更新DOM节点
• 遍历DOM节点（得到）
• 删除DOM节点
• 增加DOM节点

DOM对象：文档对象模型

• DOM节点，树形结构中的节点

后面的操作都是要调用document中的方法：

• 获取DOM节点
  • 在html，css中，获取是通过选择器来实现的，选择器又有基于标签，id和类等等。
  • 这里也是同样的思想
  • document.getElementsByTagName()
  • document.getElementById()
  • document.getElementsByClassName()
    • 这里同样有css中选择器的返回规则
    • id选择器返回具体的某一个元素
    • 标签选择器和类选择器返回元素的列表
  • 获取子节点：.children
  • ...
• 要想操作就首先需要定位到那个节点

获取了节点之后才能进行相关的操作。假设已经获得了节点为id1，则可以调用相关的方法。

• 操作文本：（利用=赋值）
  • .innerText：修改文本的值
  • .innerHTML：增加html代码，可以增加一些样式（可以解析html文本标签）
• .style：可以修改风格，其中又有很多属性可以设置
  • .color
  • .fontSize
  • .padding

删除节点的步骤：（不能自己删除自己）

1. 获取父节点
2. 通过父节点删除自己

<div id='father'>
    <h1>
        标题一
    </h1>
    <p id='p1'>
        p1
    </p>
    <p class='p2'>
        p2
    </p>
</div>

<script>
    //下面要删除p1节点
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
</script>

• father.removeChild()：需要传入的参数是将要删除的那个DOM对象节点

插入节点：

• .appendChild()
• 传入参数为需要添加的DOM节点
  • 可以是新创建的节点，也可以是事先存在的节点
  • 如果是事先存在的节点，会造成位置的移动而不是复制过来

创建节点：

• .createElement()
• 传入标签的值，例如document.createElement('p')表示创建一个空的p标签

18. 获得和设置表单的值

表单标签，form。它也是DOM树中的一个节点。

• 表单的目的是提交信息

• .value：得到输入框的值

• ...多种方法

19. 表单提交验证及前端密码MD5加密

<!DOCTYPE html>
<html lang= 'en'>
    <head>
        <meta charset='UTF-8'>
        <title>Title</title>
    </head>
    <body>
        <form action='post'>
            <p>
                <span>用户名</span> <input type='text' id='username'>
            </p>
            <p>
                <span>用户名</span> <input type='passward' id='passward'>
            </p>
            
            <button type='button' onclick="aaa()">
                提交
            </button>
        </form>
        
        
        <script>
            function aaa(){
                var uname = document.getElementById('username');
                var pwd = document.getElementById('passward');
                console.log(uname.value);
                console.log(pwd.value);
             
            }
        </script>
    </body>
</html>

参考文章

1. JavaScript教程 - 廖雪峰的官方网站 (liaoxuefeng.com)