search

AlexZ33 / lessions

自己练习的各种demo和课程
12 stars 2 forks source link

JavaScript教程：JavaScript发展史 #80

Open AlexZ33 opened 4 years ago

AlexZ33 commented 4 years ago

JavaScript发展史

1.1 Javascript的起源

1.1.1 简介

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏"用户名"要求填写，浏览器就无法判断访问者是否真的填写了，只有让服务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。

作者

因此，网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得，没必要设计得很复杂，这种语言只要能够完成一些简单操作就够了，比如判断用户有没有填写表单。

Brendan Eich。1995年4月，网景公司录用了他。
Brendan Eich的主要方向和兴趣是函数式编程，网景公司招聘他的目的，是研究将Scheme语言作为网页脚本语言的可能性。
仅仅一个月之后，1995年5月，网景公司做出决策，未来的网页脚本语言必须”看上去与Java足够相似”，但是比Java简单，使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了。
Brendan Eich被指定为这种”简化版Java语言”的设计师。
但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。
由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果Brendan Eich预见到，未来这种语言会成为互联网第一大语言，全世界有几百万学习者，他会不会多花一点时间呢？

设计思想

总的来说，他的设计思路是这样的：

（1）借鉴C语言的基本语法；
（2）借鉴Java语言的数据类型和内存管理；
（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
（4）借鉴Self语言，使用基于原型（prototype）的继承机制。

所以，Javascript语言实际上是两种语言风格的混合产物—-（简化的）函数式编程+（简化的）面向对象编程。这是由Brendan Eich（函数式编程）与网景公司（面向对象编程）共同决定的。

小结

JavaScript是 Netscape 公司于 Sun 公司合作开发的。在“javascript”出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基础部分。而在“javascript”出现之后，网页的内容不再局限于枯燥的文本，他们的可交互性得到了显著的改善。
Javascript的第一个版本，即javaScript1.0版本，出现在1995年推出的Netscape Navigatior住在这浏览器市场，微软的IE浏览器则扮演这追赶者的角色。微软在推出IE 3的时候发布了自己的VBScript语言并以JScript为名发布了javaScript的一个版本，一次很快跟上了Netscape的步伐。

注意： javascript 与 java的区别

Javascript 与 Sun公司开发的Java程序语言没有任何联系。 Javascript最开始的名字LiveScript, 后来选择"Javascript"作为其正式名称原因，大概是想让它听起来有系出同门的感觉。但是这个命名导致了误导，让java与JavaScript被不了解的人混为一谈，而这种混淆又因为各种web浏览器确实具备这样或那样的Java客户端支持功能而进一步加剧。 事实上，Java在理论上几乎可以部署在任何环境，但Javascript却倾向于应用在web浏览器（nodejs另说）                                                                                                                                                                            

JavaScript是一种脚本语言，JavaScript脚本通常只能通过Web浏览器去完成某种操作而不是像普通意义上的程序那样可以独立运行。因为需要有Web浏览器进行解释和执行，所以JavaScript脚本不像Java和C++等编译型程序设计语言那样用途广泛。不过，这种相对的简单性也正是JavaScript的长处：因为比较容易学习和掌握，所以JavaScript很受那些本身不是程序员，但希望能够通过简单的剪贴操作把脚本嵌入他们的现有网页中的普通用户们的欢迎。

JavaScript还向程序员提供了一种操作Web浏览器的手段。例如

拓展阅读：

1.1.2 发展时间轴

（所以ECMAScript是核心部分）

至此，javascript从大杂烩借鉴了其他语言而组成的语言，到现在拥有了：

成为了前端必备的动态语言

1.1.3 什么是JavaScript？

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript的组成部分？

1.2 DOM

1.什么是window?
window：是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象

2.什么是document?
document是window的一个属性, 这个属性是一个对象
document: 代表当前窗口中的整个网页,
document对象保存了网页上所有的内容, 通过document对象就可以操作网页上的内容

3.什么是DOM?
DOM 定义了访问和操作 HTML文档(网页)的标准方法
DOM全称: Document Object Model, 即文档模型对象
所以学习DOM就是学习如何通过document对象操作网页上的内容

获取DOM

1.在JavaScript中HTML标签也称之为DOM元素
2.使用document的时候前面不用加window

var num = 666;
window.num;
num;
//同理可证
window.document;
document;

1.通过id获取指定元素
由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回Null
注意点: DOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)

let oDiv = document.getElementById("box");
    console.log(oDiv);
    console.log(typeof oDiv);

2.通过class名称获取
由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组

let oDivs = document.getElementsByClassName("father");
    console.log(oDivs);

3.通过name名称获取
由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
注意点:
getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中，getElementsByName() 方法还会返回那些 id 为指定值的元素。

let oDivs = document.getElementsByName("test");
    console.log(oDivs);

4.通过标签名称获取
由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组

let oDivs =  document.getElementsByTagName("div");
    console.log(oDivs);

5.通过选择器获取
querySelector只会返回根据指定选择器找到的第一个元素

// let oDiv = document.querySelector("#box");
    // let oDiv = document.querySelector(".father");
    let oDiv = document.querySelector("div>form");
    console.log(oDiv);

6.通过选择器获取
querySelectorAll会返回指定选择器找到的所有元素

1.获取指定元素所有的子元素

let oDiv = document.querySelector("div");
    // children属性获取到的是指定元素中所有的子元素
    // console.log(oDiv.children);
    // childNodes属性获取到的是指定元素中所有的节点
    // console.log(oDiv.childNodes);
    for(let node of oDiv.childNodes){
        // console.log(node.nodeType);
        // if(node.nodeType === 1){
        if(node.nodeType === Node.ELEMENT_NODE){
            console.log(node);
        }
    }

2.什么是节点?
DOM对象(document), 这个对象以树的形式保存了界面上所有的内容
HTML页面每一部分都是由节点(标签(元素),文本,属性)

3.获取指定节点中的第一个子节点

let oDiv = document.querySelector("div");
console.log(oDiv.firstChild);
//   获取指定元素中的第一个子元素
console.log(oDiv.firstElementChild);

4.获取指定节点中最后一个子节点
console.log(oDiv.lastChild);
4.获取指定元素中最后一个子元素
console.log(oDiv.lastElementChild);

5.通过子元素获取父元素/父节点

let item = document.querySelector(".item");
console.log(item.parentElement);
 // console.log(item.parentNode);
 // let parentEle = item.parentElement || item.parentNode;
 // console.log(parentEle);

6.获取相邻上一个节点
console.log(item.previousSibling);
// 获取相邻上一个元素
// console.log(item.previousElementSibling);

7.获取相邻下一个节点
console.log(item.nextSibling);
// 获取相邻下一个元素
console.log(item.nextElementSibling);

节点增删改查

<body>
<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>
<script>
 // 1.创建节点
 // let oSpan = document.createElement("span");
 // console.log(oSpan);
 // console.log(typeof oSpan);
 // 2.添加节点
 // 注意点: appendChild方法会将指定的元素添加到最后
 // let oDiv = document.querySelector("div");
 // oDiv.appendChild(oSpan)
 // let oA = document.createElement("a");
 // oDiv.appendChild(oA);
 // 3.插入节点
 // let oSpan = document.createElement("span");
 // let oDiv = document.querySelector("div");
 // let oH1 = document.querySelector("h1");
 // let oP = document.querySelector("p");
 // // oDiv.insertBefore(oSpan, oH1);
 // oDiv.insertBefore(oSpan, oP);
 // 5.删除节点
 // 注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除
 //         元素是不能够自杀的
 // console.log(oSpan.parentNode);
 // oSpan.parentNode.removeChild(oSpan);
 // oDiv.parentNode.removeChild(oDiv);
 // 5.克隆节点
 // 注意点: cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true
 let oDiv = document.querySelector("div");
 // let newDiv =  oDiv.cloneNode();
 let newDiv =  oDiv.cloneNode(true);
 console.log(newDiv);
</script>
</body>

元素属性操作

无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们,
系统在包装这个对象的时候会自动将元素的属性都包装到这个对象中,
所以只要拿到这个对象就可以拿到标签属性,操作标签属性

let oImg = document.querySelector("img");
 // let oImg = document.createElement("img");
 console.dir(oImg);

1.如何获取元素属性

let oImg = document.querySelector("img");
  console.log(oImg.alt);
    // console.log(oImg.getAttribute("alt"));
    // 注意点: 通过对象.属性名称的方式无法获取到自定义属性的取值
    //         通过getAttribute方法可以获取到自定义属性的取值
    console.log(oImg.nj);
    console.log(oImg.getAttribute("nj"));

2.如何修改元素属性

let oImg = document.querySelector("img");
    // oImg.title = "新的title";
    // oImg.setAttribute("title", "新的title222");
    // 注意点和获取元素属性一样
    // oImg.nj = "123";
    oImg.setAttribute("nj", "123");

3.如何新增元素属性

let oImg = document.querySelector("img");
    // oImg.it666 = "itzb";
    // 注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改
    oImg.setAttribute("it666", "itzb");

4.如何删除元素属性

let oImg = document.querySelector("img");
 // oImg.alt = "";
 // oImg.removeAttribute("alt");
 // 注意点和获取元素属性一样
 // oImg.nj = "";
    oImg.removeAttribute("nj");

元素内容操作

<body>
<div>
    我是div
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>
<script>
 // 1.获取元素内容
 /*
   1.innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
   2.innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格
   */
 /*
   let oDiv = document.querySelector("div");
   console.log(oDiv.innerHTML);
   console.log(oDiv.innerText);
   console.log(oDiv.textContent);
   */
 // 2.设置元素内容
 /*
   特点:
   无论通过innerHTML/innerText/textContent设置内容, 新的内容都会覆盖原有的内容
   区别:
   如果通过innerHTML设置数据, 数据中包含标签, 会转换成标签之后再添加
   如果通过innerText/textContent设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置
   */
 let oDiv = document.querySelector("div");
 // oDiv.innerHTML = "123";
 // oDiv.innerText = "456";
 // oDiv.textContent = "789";
 //  oDiv.innerHTML = "<span>我是span</span>";
 //  oDiv.innerText = "<span>我是span</span>";
 //  oDiv.textContent = "<span>我是span</span>";
 setText(oDiv, "www.it666.com");
 function setText(obj, text) {
 if("textContent" in obj){
            obj.textContent = text;
        }else{
            obj.innerText = text;
        }
    }
</script>
</body>

操作元素样式

<head>
    <meta charset="UTF-8">
    <title>07-JavaScript-操作元素样式</title>
    <style>
 .box{
 width: 200px;
 height: 200px;
 background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
 // 1.设置元素样式
 /*
    let oDiv = document.querySelector("div");
    // 第一种方式
    // 注意点: 由于class在JS中是一个关键字, 所以叫做className
    // oDiv.className = "box";
    // 第二种方式
    // 注意点: 过去CSS中通过-连接的样式, 在JS中都是驼峰命名
    // 注意点: 通过JS添加的样式都是行内样式, 会覆盖掉同名的CSS样式
    oDiv.style.width = "300px";
    oDiv.style.height = "300px";
    oDiv.style.backgroundColor = "blue";
    */
 // 2.获取元素样式
 let oDiv = document.querySelector("div");
 // oDiv.style.width = "300px";
 // 注意点: 通过style属性只能过去到行内样式的属性值, 获取不到CSS设置的属性值
 // console.log(oDiv.style.width);
 // 注意点: 如果想获取到CSS设置的属性值, 必须通过getComputedStyle方法来获取
 // getComputedStyle方法接收一个参数, 这个参数就是要获取的元素对象
 // getComputedStyle方法返回一个对象, 这个对象中就保存了CSS设置的样式和属性值
 let style = window.getComputedStyle(oDiv);
 console.log(style.width);
</script>
</body>

DOM事件

1.什么是事件?
用户和浏览器之间的交互行为我们就称之为事件, 比如：点击，移入/移出

2.如何给元素绑定事件?
在JavaScript中所有的HTML标签都可以添加事件
元素.事件名称 = function(){};
当对应事件被触发时候就会自动执行function中的代码

let oBtn = document.querySelector("button");
    oBtn.onclick = function () {
 alert("按钮被点击了");
    }
 // 注意点: 如果给元素添加了和系统同名的事件, 我们添加的事件不会覆盖系统添加的事件
 let oA = document.querySelector("a");
    oA.onclick = function () {
 alert("a标签被点击了");
 // 以下代码的含义: 用我们添加的事件覆盖掉系统同名的事件
 return false;
    }

1.3 作业（task）

https://gitee.com/turingitclub/javascript-learning/tree/dev/task01

1.4 拓展阅读