前端组第四次授课(JS第一节)

0x00写在前面

前端蒟蒻第一次正式授课,前面两位大牛W和Z已经为新同学们讲了讲HTML和CSS基础,该轮到咱讲JavaScript了

准备一天多时间,感觉要讲的东西好多,好害怕讲不完,也很紧张

真的轮到自己上场时发现一点也不紧张(毕竟时间不够),最后还是拖了7分钟(大悲)

不过授课效果应该还好吧,感觉该讲的基础都讲了吧(确信)

接下来,我就分享一下我讲课准备的讲义罢(

先放个pdf版,md版没通过安全检测,坏

大纲

  1. 从历史出发——历史上的矛盾——如何解决矛盾:谁?怎么解决?解决了什么?
  2. 着重讲矛盾:功能矛盾,个人体验矛盾,需求与生活矛盾:
  3. 只从语言本身出发,既和学习C语言一样学习JS,C的差别。

JavaScript的历史

当网上冲浪越来越流行时,对于开发客户端脚本的需求也逐渐增大。此时,大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络,即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是,仅仅为了简单的表单有效性验证,就要与服务器进行多次地往返交互。设想一下,用户填完一个表单,点击提交按钮,等待了 30 秒的处理后,看到的却是一条告诉你忘记填写一个必要的字段。

那时正处于技术革新最前沿的 Netscape,开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。

当时工作于 Netscape 的 Brendan Eich,开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。

因为 JavaScript 1.0 如此成功,Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候,微软决定进军浏览器,发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript(这样命名是为了避免与 Netscape 潜在的许可纠纷)。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉,但也成为 JavaScript 语言发展过程中的重要一步。

在微软进入后,有 3 种不同的 JavaScript 版本同时存在:Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是,JavaScript 并没有一个标准来统一其语法或特性,而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加,这个语言的标准化显然已经势在必行。

1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)。第 39 技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,该标准定义了名为 ECMAScript 的全新脚本语言。

在接下来的几年里,国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262)。从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript 实现的基础。

输出

console.log();控制台

注释

和C一样,

/*
这里的所有内容
都是注释。
*/

// 这是一条注释。

变量

六大变量

String,Number,Boolean,Array,Object

String

字符串(一串文本):字符串的值必须用引号(单双均可,必须成对)扩起来。

类似于C语言里的字符数组,C++里会提到

Number

就是数字,没C语言那么复杂,但是会出现精度问题

Boolean

代表逻辑的布尔值(真 / 假): true/false 是 JS 里的特殊关键字,无需引号

Array

数组:用于在单一引用中存储多个值的结构。和C的几乎没啥区别(是对象)

Object

对象:JavaScript 里一切皆对象,一切皆可储存在变量里。这一点要牢记于心。,以上五种全是对象。

运算符

+

将两个数字相加,或拼接两个字符串。

-,*,/

显然,但是和Python不同JS的话:

>>"a"*12
>>NaN

**,和Math.pow(x,y)相同

递增递减

++,–

赋值运算符

=

Mod

%

相等

==,值相等

严格相等

===,类型和值都要相等,PHP中也有这个,涉及安全问题

对象中的属性

“PI” in Math,判断是否存在

instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

js不讲人话

让我们看看java里的描述

instanceof 是 Java 的一个二元操作符,类似于 ==,>,< 等操作符。

instanceof 是 Java 的保留关键字。它的作用是测试它左边的对象是否是它右边的类的实例,返回 boolean 的数据类型。

可以用来检查类型,但是他不完美

js里面,准确来说没有类,对于使用过基于类的语言 (如 Java 或 C++) 的开发者们来说,JavaScript 实在是有些令人困惑 —— JavaScript 是动态的,本身不提供一个 class 的实现。即便是在 ES2015/ES6 中引入了 class 关键字,但那也只是语法糖,JavaScript 仍然是基于原型的。

/**
* @name instanceof示例1
* @description 检测字符串类型
*/
const simpleString = '这是简单的 String';
const newString = new String('这是 New 出来的 String');

console.log(simpleString instanceof String); // false,检查原型链会返回 undefined
console.log(newString instanceof String); // true
/**
* @name instanceof示例2
* @description 检测数字类型
*/
const simpleNumber = 123;
const newNumber = new Number(123);

console.log(simpleNumber instanceof Number); // false
console.log(newNumber instanceof Number); // true

/**
* @name instanceof示例3
* @description 检测对象类型
*/
const simpleOjbect = {};
const newObject = new Object();

console.log(simpleOjbect instanceof Object); // true
console.log(newObject instanceof Object); // true
var simpleStr = "This is a simple string";
var myString  = new String();
var newStr    = new String("String created with constructor");
var myDate    = new Date();
var myObj     = {};
var myNonObj  = Object.create(null);

simpleStr instanceof String; // 返回 false, 非对象实例,因此返回 false
myString  instanceof String; // 返回 true
newStr    instanceof String; // 返回 true
myString  instanceof Object; // 返回 true

myObj instanceof Object;    // 返回 true, 尽管原型没有定义
({})  instanceof Object;    // 返回 true, 同上
myNonObj instanceof Object; // 返回 false, 一种创建非 Object 实例的对象的方法

myString instanceof Date; //返回 false

myDate instanceof Date;     // 返回 true
myDate instanceof Object;   // 返回 true
myDate instanceof String;   // 返回 false

操作符

typeof

typeof "John"                // 返回 string
typeof 3.14                 // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

let和var,const

全局作用域

var carName = "porsche";

// 此处的代码可以使用 carName

function myFunction() {
 // 此处的代码也可以使用 carName
}

函数作用域

// 此处的代码不可以使用 carName

function myFunction() {
 var carName = "porsche";
 // code here CAN use carName
}

// 此处的代码不可以使用 carName

JavaScript 块作用域

{ 
var x = 10;
}
// 此处可以使用 x
{ 
let x = 10;
}
// 此处不可以使用 x

声明

在函数内声明变量时,使用 var 和 let 很相似。

它们都有函数作用域

如果在块外声明声明,那么 var 和 let 也很相似。

它们都拥有全局作用域

使用 JavaScript 的情况下,全局作用域是 JavaScript 环境。

在 HTML 中,全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象:

let不属于

重新声明

允许在程序的任何位置使用 var 重新声明 JavaScript 变量

在相同的作用域,或在相同的块中,通过 let 重新声明一个 var 变量是不允许的

在相同的作用域,或在相同的块中,通过 let 重新声明一个 let 变量是不允许的

在相同的作用域,或在相同的块中,通过 var 重新声明一个 let 变量是不允许的

在不同的作用域或块中,通过 let 重新声明变量是允许的

Const

通过 const 定义的变量与 let 变量类似,但不能重新赋值

JavaScript const 变量必须在声明时赋值

const PI;
PI = 3.14159265359; //错误
const PI = 3.14159265359;//正确

常量对象可以更改属性,添加属性,就是不能赋值

常量数组可以更改元素,添加元素,就是不能赋值

变量提升

var会

 var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y

var y = 7; // 初始化 y
//声明 (var y) 提升了,但是初始化(y = 7) 并不会提升

属性

Infinity

Infinity 属性用于存放表示正无穷大的数值。

负无穷大是表示负无穷大一个数字值。

在Javascript中,超出 1.7976931348623157E+103088 的数值即为Infinity,小于 -1.7976931348623157E+103088 的数值为无穷小

NaN

NaN 即非数值(Not a Number),NaN 属性用于引用特殊的非数字值,该属性指定的并不是不合法的数字。

NaN 属性 与 Number.Nan 属性相同。

提示: 请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等,包括它自己。

Undefined

undefined 属性用于存放 JavaScript 中未定义的值

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined

null

在 JavaScript 中 null 表示 “什么都没有”。

null是一个只有一个值的特殊类型。表示一个空对象引用

typeof undefined             // undefined
typeof null // object
null === undefined // false
null == undefined // true
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇