JavaScript 基础学习

1.前言

1.1 JS简介

JSON(JavaScript Object Notation,)JS 对象简谱,是一种轻量级的数据交换格式。
它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

1.2 浏览器调试基础

调试窗口如下：

Elements：常用于复刻网页。
Console：用于调试JavaScript内容
Source：用于断点调试功能。
Network：用于抓包。
Application：

1.3 JavaScript基本语法

  • JavaScript内部标签必须成对出现，一定不能使用自闭和标签。
  • 弱变量类型，仅有一个变量类型：var 例如：var x = 1或者var name = zfy
  • JS严格区分大小写，但不区分整数和小数。
  • 存在NaN（Not a Number）数据类型，其与包括自己的所有类型均不相等。只能通过 isNaN(待判别对象)方法进行判别。
  • 在JS代码首行输入'use strict'进入 严格模式，会严格检查语法问题。
  • console.log()：JS代码均是通过console（控制台）执行.如：console.log（）为执行操作 输出。

2. JS数据类型

2.1 JavaScript 运算符

绝大部分运算符于Java相同，如下仅介绍不同处：
比较运算符：
== 等于：JavaScript中仅判别值是否相等，值相等的异类型会输出true。
=== 绝对等于：即类型与值均相等才输出true，一般应当使用此符号。

注意，数值比较时，存在精度损失的问题。

2.2 数组与对象

JavaScript中，数组可以放入不同类型的元素，若索引超出数组范围，则输出undefined。
对象的创建无需new一个，直接属性赋值即可（属性值使用 : ，不同属性之间使用 , ）。类似于python。
通常，数组使用中括号[]，对象使用大括号{}，例如：

var array = [1,2,3,'hello',null,false]
var student = {name:"zfy",age:22,gender:man}

2.3 流程控制

包括常见的if,for,which,forEach。与Java基本相同。
while 循环：

while (age<100){
            age = age + 1;
            console.log(age)
        }

for循环:

for (let i = 0; i < 100; i++){
            console.log(i)
        }
  • console.log()：JS代码均是通过console（控制台）执行，.log为执行操作 输出。
  • let也是变量类型，其仅存活在for块内。（反之，若使用var i 则for外也能使用i，不合适）

for Each 循环
其通过函数遍历数组。

var age = [1,2,3,4,5,6,7]
age.forEach(Function (value)){
    console.log(value)})

2.4 Map,set 和 Iterable

a. Map集合
Map集合，即python的字典，内部储存着若干 键值对。形式为：map[['key',value],[],[]]
map.get()：查询键值对
map.set('Key',Value)：添加新的键值对
map.delete()：删除键值对

var map = new Map([['Tom',100],['Jack',90],['Mary',80]]);
var name = map.get('Tom');
map.set('admin',123)
map.delete('Jack')
console.log(map)

b. Set集合
Set集合是无序不重复的集合，其自带去重功能。
console.log(set.has(value))为查询集合内是否存在某元素，输出为一个布尔值。

var set = new Set([3,1,1,1,2,4,6]) //set自动去重
set.add(9)
set.delete(1)
console.log(set.has(4))

c. iterator 和 遍历
使用for of 循环遍历列表/Map/Set。

var set = new Set([3,1,1,1,2,4,6])
for(let x of set){
   console.log()
}

3. JS 函数

3.1 函数的定义

函数通过function定义,有两种方式定义：

  1. function name(x){}其中x为其需要接受的实参，name为函数名此为后端常用。
 function abs(x){
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }
  1. var name = function(x){} 此处function(x)为一个匿名函数，将其值赋予name调用。此为前端常用。
 var abs = function(x){
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }

3.2 函数的调用

  • 参数问题：JS（中的函数）可以传递任意数量的参数，也可以不传递参数。
  • 假如不存在参数，需要设置手动抛出异常（if{}throw{}）
  • arguments是JS中的一个关键字，其代表所有传递的参数，是一个数组。
  • 可以用argument来遍历函数的所有参数，从而知道到底有多少参数。

3.3 变量的作用域

  • JS中，var定义的变量是有作用域的。
  • 函数体中声明的变量，仅作用于函数内。即在函数体外不可使用（闭包）
  • 内部函数可以访问其外部变量，但反之不成立。
  • 假如，内部函数变量与外部函数变量重名，则查找规则为 由内向外 查找（即内部优先）。
  • JS的变量定义无视位置，但赋值遵循顺序原则（即不能先调用后赋值）。通常来说，会将所有变量定义放在函数头部。
function zfy(){
            var x = "x" + y;
            console.log(x);
            y = 'y';
          //Uncaught ReferenceError: y is not defined
        }

3.4 全局变量/局部作用域/常量

a. 全局变量

  • 所有的全局对象都默认挂在window下面：
var x = 'xxx'
alart(x);
window.alart(x);
//二者是等价的
  • JS实际上只有一个全局作用域，任何变量都会全局查找。（最后查到window下面）
  • 将自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题。
       var zfy = {}; //定义唯一全局空间，自定义方法均寄存于此。
        
        zfy.name = 'zfy'
        zfy.add = function (a,b){
            return a + b;
        }

b. 局部作用域变量
使用let类型定义局部作用域变量，保证其正确退场。
for(let i = 0; i < 100; i++){}
如果是：
for(var i = 0; i < 100; i++){}
则在for之后还能调用i，这显然不合适。

c. const定义常量
const PI = '3.14'定义了常量PI。
常量是只读变量，其值不可修改。

3.5 方法

方法就是把函数放在对象里面，对象包含两个部分：属性和方法。
方法的调用一定要带括号（）

Java中：this是无法定义指向的，其默认指向调用它的那个对象。
JS中：可以通过apply定义this的指向（调用对象），其适用于方法的主动调用。
如getAge(zfy,int[])就是对zfy对象调用函数。

4. 内部对象

4.1 内部时间对象

这里介绍一些无法见名知意的对象：
.getData：获得日期
.getDay：获得星期几
.getTime：获得时间戳（这是一个统一且唯一的数字，其记录自1970年开始计数以来度过的时间。

4.2 Json对象

  • Json是一种简洁的轻量级数据交换格式。
  • 在JS中一切皆为对象， 不同对象格式如下：
    对象：{}
    数组：[]
    键值对：key:value

4.2.1 JSON字符串

JSON字符串是一种格式化的字符串，而对象是键值对形式的。
JS对象：’var obj = {a: ‘hello’,b:’bye’};’，对象内储存的是键值对。
JSON字符串：var json = ‘{“a”:”hello”,”b”:”bye”}’,可以看出，他是纯字符串形式的。

4.2.2 对象的转换

对象转换为json字符串：var jsonUser = JSON.stringify(user);
json字符串转换为对象(参数为JSON字符串)：var obj = JSON.parse(‘{“name”:”zfy”,”age”:3 , “Grendel”:”man”}’)

4.2.3 Ajax

  • 原生的js写法，xhr异步请求。
  • JQuey 封装好的方法。
  • axios 请求。

5. 面向对象的编程

Js中对象的特性：

  1. 原型（对象）：通过.proto继承原型（对象）。从而可以调用方法。eg: zfy.__proto__ = student;即zfy对象继承了student对象。
  2. 原型链：对象会继承原型对象，原型也会继承原型，可以“无限叠加”形成原型链。最后会指向object对象。
  3. class继承：即创建类，为常用的继承方式。继承必须先实现父类构造函数中的声明（通过super(xxx) ）：
    如父类构造函数为constructor(name){} 子类构造函数如下：
constructor(name,grade){
super(name);
this.grade = grade;
}
  1. constructor(xxx , xxx){}构造器：class的构造函数，xxx是其需要接收的参数。

6. 操作BOM对象

  • BOM：(Browser Object Model)浏览器对象模型。JS本身就是为浏览器运行而生的。
  • window对象：浏览器窗口，属性与浏览器窗口相关。window.innerHeight , ‘window.outerwidth’ 同时，所有的全局对象都默认归属于window下。
  • navigator对象：封装了浏览器的信息。如navigation.appVersion 用于查询版本号，以此判断是否匹配。但此类对象属性可以被人为修改，因此不常用。
  • screen对象：屏幕相关属性。如screen.width会返回像素值。
  • location对象：（重要）代表当前页面的URL信息。其中属性：host：主机 ，href：当前指向的位置 ， protocol：协议类型。 方法：f .reload()：重新加载，.assign(‘http://……’)：设置新的跳转地址。
  • document对象：当前页面文档（文字）信息/获取具体的文档树节点，通过文档树可以可以操作浏览器。如document.title = zfy会将网址标题改为zfy。可以通过document.cookie()获得用户信息（即你的账号信息），这是不安全且易被劫持的。可以使用httpOnly设置只读，保护信息安全。
  • history对象：浏览器的历史记录，即历史栈。history.back()后退一步，history.forward()前进一步。

7. 操作DOM对象

Document Object Model 文档对象模型。
核心：浏览器网页就是一个DOM树形结构，他能实现如下几个功能：

  • 更新DOM节点。
  • 遍历DOM节点。
  • 删除DOM节点。
  • 添加DOM节点。
    简而言之，就是前端版的增删查改。
    例如：
  1. 获取节点（查）document.getElementById/ClassName/TagName();获取节点对象。
  2. 更新节点（改）id1.style.color = ‘red’;修改颜色id1.innerText();修改文本样式。
  3. 删除节点（删）：1.获取父节点，**2.通过父节点删除自己。
    **father.removeChild(p1)father是父类，p1是其下的子类。
    删除节点是一个动态的过程！！！删除多个节点的时候，children属性是在时刻变化的。例如：
//父节点下有三个子节点
father.removeChild(father.children[0])
father.removeChild(father.children[1]) 
father.removeChild(father.children[2])

这样删除是错误的，因为在删除了一号子节点之后，列表索引刷新，因此就不存在[2]号元素了。
4. 插入节点（增）：此为最复杂的操作。我们获得了某个DOM节点，假设这个dom节点是空的，那么通过innerHTML就可以添加一个元素。
但如果此DOM节点已经存在元素，就不能这样添加了，会产生覆盖。此时需要使用追加操作。
追加操作
创建一个新的标签，并赋予其id和内容。再通过追加操作增加节点。

8. 操作表单（进行验证）

表单包括什么？

  • 文本框 text
  • 下拉框 <select>
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password
  • ...
    表单的目的：获得需要的提交信息

8.1 提交表单

9. JQuery

  • 定义：JQuery是封装好的JavaScript库，内含大量封装好的函数。
  • JQuery的操作很简单，通过如下格式完成：$(selector).action()
    $为JQuery符号，后面分为两部分，即选择器+事件，通过选择器选择合适的节点（就是css选择器），再对其执行事件。
    eg:('#test-jquery').click(function(){alert('Hello,JQuery!);})此处事件为click，点击后触发的具体操作为function内内容。
  • 具体的多项操作，参考JQuery的官方文档（jQuery API），有详细的解释。
  • jQuery的Ajax()，格式：$('selector').ajax()。此部分是jQuery的重点部分，未来会详细介绍。

10. 前端的学习技巧

  1. 如何巩固JS：看JQuery源码，看开源的小游戏代码。一定要多看，多改，多练。
  2. 巩固HTML.CSS：扒网站，将好的网站全部下载下来，然后一步步对应修改看效果。
  3. 后端涉及到逻辑的锻炼，而前端基本上就是多看多练。
posted @ 2022-02-24 20:39  青梧成林2022  阅读(75)  评论(0)    收藏  举报