JavaScript学习笔记（持续更新中）~

第一章 JavaScript简介

  • 1.1、JavaScript的起源
  • 1.1.1JavaScript的组成
  • 1.2、JavaScript的使用
  • 1.2.1、JavaScript书写位置
  • 内嵌写法
  • 外部写法
  • 1.2.2、JavaScript的注释
  • 单行注释
  • 多行注释
  • 1.2.2、JavaScript输出
  • 控制台输出
  • 页面输出
  • 弹窗输出
  • 1.2.3、JavaScript数据类型和变量
  • 声明变量
  • 数据类型
  • 1.2.4、JavaScript的DOM操作
  • 1.2.5、JavaScript的条件语句与循环语句
  • 条件语句
  • 循环语句
  • while循环
  • do...while循环
  • for循环
  • for...in循环
  • for...of循环
  • 总结

第一章 JavaScript简介

1.1、JavaScript的起源

JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。但是，有的同学可能会有疑问，这些验证，后端不也可以进行验证吗？确实，后端程序的确可以进行这些验证，但你要清楚，在1995年那个年代，网速是非常慢的，向后端发送一个请求，浏览器很久才能得到响应，那这无疑是一种非常不好的用户体验。

为了解决前端验证的问题，当时的浏览器巨头NetScape（网景）公司就开发出一种脚本语言，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。但是你要清楚，Java和JavaScript是没有什么关系的，只不过当时Java非常流行，为了蹭热度，才将LiveScript更名为JavaScript，它们的关系就像雷锋和雷峰塔的关系一样，没啥关系。

但是，浏览器开发商不止网景一家，还有一个大家都知道的公司，微软公司，它们的主打产品是IE（Internet Explorer）浏览器，当网景公司的Netscape Navigator浏览器推出JavaScript语言时，微软就急了啊，好家伙，人网景都推出了专门用于前端验证的语言，不仅大大减少了后端程序的压力，还提高了用户的体验。我微软这么大的公司不也得整一个，在1996年，微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。

于是在市面上存在两个版本的JavaScript，一个网景公司的JavaScript和微软的JScript，虽然当时浏览器的巨头是网景，但是网景的浏览器是收费的，虽然微软的IE浏览器在全球的市场份额远远不及网景，但是微软的拳头产品是Windows操作系统，每一个操作系统都自带一个IE浏览器并且免费，那么，未来的发展大家可能也想到了，网景让微软给干倒闭了，1998年11月，网景被美国在线（AOL）收购。

老大哥就是老大哥，为了抢先获得规则制定权，网景最先将JavaScript作为草案提交给欧洲计算机制造商协会，也就是ECMA组织，希望能将JavaScript做成行业标准，最终在网景、SUN以及微软等公司的参与下，由一众程序员和相关组织人员组成的第39技术委员会也就是TC39发布了ECMA-262标准，这个标准定义了名为ECMAScript的全新脚本语言，为啥又来了个ECMAScript？

因为Java是SUN的商标，SUN授权了NetScape可以叫JavaScript，但是ECMA没有SUN的授权就不能叫JavaScript，哪怕NetScape成员特别希望ECMA把它叫做JavaScript，但是ECMA也有成员并不希望这个标准就叫JavaScript，总之经过几轮磋商和博弈，ECMAScript这个名字就定下来。

1.1.1JavaScript的组成

javascript分为三部分 DOM：文档对象模型 BOM：浏览器对象模型 ECMAScript：主要指的是语法，比如声明变量，函数，条件判断，循环等

1.2、JavaScript的使用

1.2.1、JavaScript书写位置

内嵌写法
<script>
   console.log('hello word')
</script>
外部写法
<script src="idenx.js"></script>

1.2.2、JavaScript的注释

注释中的内容不会被解析器解析执行，但是会在源码中显示，我们一般会使用注释对程序中的内容进行解释。

JS中的注释和Java的的一致，分为两种：

单行注释：// 注释内容

多行注释：/* 注释内容 */

单行注释
//这是单行注释
多行注释
/**
 *这是多行注释
/

1.2.2、JavaScript输出

控制台输出
<script>
    console.log('hello word')
</script>
页面输出
<script>
    document.write("Hello,World!");
</script>
弹窗输出
<script>
    alert("Hello,World!");
</script>

1.2.3、JavaScript数据类型和变量

声明变量

声明变量用let声明常量用const是ES6新增的声明变量的关键词，之前声明变量的关键词是var。

数据类型

1、字符串型（string）：单引号’'双引号""都可以使用。

2、数值型（number）：整数、小数都可以。

3、布尔型（boolean）：true，false。

4、undefined型（undefined）：undefined表示声明了，但是未赋值的变量，或者访问不存在的属性或索引。

5、null型（null）：表示空或者没有。

除了5种之外的类型都称为Object。

1.2.4、JavaScript的DOM操作

DOM:每个HTML标签都在dom中表示为一个节点（node），节点之间存在父子、兄弟关系，通过dom，可以使js编程，来修改网页结构，样式，内容。

属性

说明

getElementById

用于根据元素的id属性获取HTML文档中的元素。

getElementsByTagName

这个方法返回一个节点的集合，这个集合可以当做一个数组来处理。

getElementsByClassName

返回文档中所有指定类名的元素集合 。

getAttribute

使用getElementById()或者使用getElementByTagName()方法取出来的节点元素的属性名称。取得属 性的名称之后，我们就可以用getAttribute()方法将它的属性值拿出来了。

setAttribute

添加指定的属性。

textContent

设置或者获取标签中的文本内容。

createElement

在对象中创建一个新的对象。

appendChild

在节点的子节点列表末添加新的子节点。

insertBefore

在节点的子节点列表任意位置插入新的节点。

1.2.5、JavaScript的条件语句与循环语句

条件语句

if…else语句是一种最基本的控制语句

const score = 60
    if (score >= 80) {
        console.log("优秀")
    } else if (score >= 60) {
        console.log("及格")
    } else {
        console.log("不及格")
    }

switch语句更适用于多条分支使用同一条语句的情况。

switch (语句) {
    case 表达式1:
        语句...
    case 表达式2:
        语句...
    default:
        语句...
}
循环语句
while循环
while(条件表达式){
    语句...
}
do…while循环
do{
    语句...
}while(条件表达式);
for循环
for(初始化表达式 ; 条件表达式 ; 更新表达式){
    语句...
}
for…in循环
for(let liskey in arr){
        console.log(liskey)
for…of循环
for (let value of arr){
        console.log(value)
    }
总结

for循环适用于已知循环次数的情况 while适用于未知循环次数 do while与while类似，但只执行一次在判断条件 for in适用于遍历对象的可枚举属性，更适合于遍历对象而不是数组 for of 用于遍历可迭代对象（数组、对象都可以）