JavaScript基础内容

本文最后更新于:3 年前

JS用途

  之前了解的JS,只知道可以实现一些交互和动效,从服务器拿下数据等的作用,但基本上只能局限在浏览器内,除非自己搭个JS引擎在电脑上跑,不然也只能靠浏览器来跑。
  但在了解了一些关于Node.js的基础知识后发现,它提供了一个JS的运行环境,使得它可以在本地上跑,不局限于浏览器,可以像Java、python一样,写起后端来。(本文写的只是一些之前忘记了的JS知识,不涉及Node.js部分!!)

JS语法

  其实JS大多数语法跟Java很像,语法逻辑上基本上是一样的,以下只对不同的部分进行阐述。

JS数据类型

  JS的数据类型分为:基本数据类型 + 引用类型
  基本数据类型:

  • Number
    就是把整型和浮点数放一起了,还有NaN和Infinity这些特殊值
  • String
    字符串
  • Boolean
    就true|false
  • Null
    指向空指针
  • Undefined
    JS是弱类型语言,就一个var定义所有的变量(ES6可以用let和const定义局部变量),初值都是undefined
  • Symbol
    ES6新加的,用了symbol方法的变量后是此类型,意味unique独一无二

  引用类型:

  • Object
    就是对象,可以new Object(),一个个加,也可以{}直接写(就是JSON格式里的object)
  • Array
    数组,可以new Array(),里面可以写array‘s length,也可以写数组的内容,当然也可以如[‘a’,123,1.23]这样写,毕竟JSON就是JS的标记法。它这个数组内容是支持任意类型。
  • Function
    函数/方法。通过function funcName(param1,...){...}这样定义,也可以是匿名函数,然后将函数指针交予一个变量,如var f = function(param1,...){};

JS事件处理

  事件指的是用户和网页进行某一种交互,事件处理就是事件发生时该执行的操作。
  我们可以使用事件监听器用来处理事件,事件监听器主要的作用就是:监听事件,当事件发生做出操作。
  JS有提供很多的事件,如鼠标、键盘、窗口事件等,我们可以通过JS来将具体的事件(HTML元素属性)和事件发生后的操作(就是自己写函数)进行绑定,从而形成事件监听器。

  • 在HTML元素里指明attribute
    <button id="myBtn" onclick="btn()"></button>,这里的事件的attribute即使onclick绑定了JS里写的方法btn();
  • 在JS里绑定
1
2
3
4
function btn(){
alert("event of click");
}
document.getElementById("myBtn").onclick=btn;

JS一些别的知识

  DOM(Document Object Model)文档对象模型,浏览器加载的时候会构建一个DOM,这个东西是树结构。
  DOM树的节点分为:

  • 元素/标签节点(即每一个标签均为一个标签节点/元素节点,是最主要的应用。type为1);
  • 属性节点(是元素节点的内容,可通过getAttributeNode()获得,也可以在JS自己setAttributeNode()进去,type为2);
  • 文本节点(就是不含于标签的文本,type为3);
  • 文档节点(是后面所述的document,根节点,type为9);
      在DOM树中,Document是根节点(document对象),其余的节点是标签节点文本节点(不含于标签内),这些个节点被称为Element对象,可以通过document对象的getElementById()等方法获得(这里及下面谈论的都是元素/标签节点)。
      而Element对象可以帮助我们set/get标签的属性(attributes)或是内容(innerHTML/innerText);

  Element对象带有nodeName、nodeValue、nodeType等属性,可以让我们区分是哪一种类型的节点。
  如上述所说的文本节点,一般都是通过Element对象的childNodes()获得。

  BOM(Browser Object Model)浏览器对象模型,使得JS和浏览器具有交互能力。BOM核心对象是window,表示当前浏览器的窗口,我们所有的全局对象都是window的属性,document对象也是。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!