浅识JavaScript | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第5天。

1.JavaScript概述

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式.

2.在页面中使用JavaScript的三种方式

1）外链式：将JavaScript写在.js的文件里，通过script标签将其引入。

<script src="my.js"></script>

2）嵌入式：将JavaScript写在script标签里。

 <script>
     alert('弹出窗口')
 </script>

3）内联式：将JavaScript脚本作为属性直接写入元素标签里。

<input type="button" value="点击" onclick="alert('您点击中了')">

以上这三种方法，在日常开发中，我更推荐使用外链式，它保证了js代码和html代码分别独立，相互干扰性小，耦合低。

3.JavaScript获取页面元素的几种方法

1）利用id选择器获取页面元素

var timer = document.getElementById('time');

2）利用标签获取元素，返回的是获取过来元素对象的集合，以伪数组的形式存储的

var lis = document.getElementsByTagName('li');

如果需要依次打印里面的元素对象，可以采用遍历的方法

for(var i = 0;i < lis.length;i++){
      console.log(lis[i])
    }

3）通过类名获取页面元素

 var boxs = document.getElementsByClassName('.box');

4）通过CSS选择符方式获取页面元素

querySelector返回指定选择器的第一个元素对象

var firstBox = document.querySelector('.box');

querySelectorAll返回指定选择器的首页元素对象集合

var allBoxs = document.querySelectorAll('.box');

5）获取特殊元素的方法

获取body元素

var bodyEle = document.body;

获取html元素

var htmlEle = document.documentElement;

4.JavaScript的事件三要素

1）事件源：事件被触发的对象

2）事件类型：如何触发，触发了什么事件，例如鼠标点击（onclick)，鼠标经过触发以及键盘按下等等

3）事件处理程序：通过一个函数赋值的方式来完成

例如：

<button id="btn">点击</button>

var btn = document.getElementById('btn');

btn.onclick = function () {

     alert('点击成功');
     
   }