Javascript 简单介绍-白红宇

Javascript 简单介绍

阅读量：4982 次

发布时间：2019-06-12

本文共 11422 字，大约阅读时间需要 38 分钟。

0 计算机组成 *

线程 cpu 内存主板显卡游戏热贵 8000 集成显卡

软件

- 应用软件：浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word

压缩

- 系统软件：Windows、Linux、mac OSX

硬件

- 三大件：CPU、内存、硬盘 -- 主板

- 输入设备：鼠标、键盘、手写板、摄像头等

- 输出设备：显示器、打印机、投影仪等

c 180分控制台

c--

1 学习js目标:

程序90% 来自生活

- 掌握编程的基本思维

- 掌握编程的基本语法

HTML和CSS 小米

2 课前说明

目标：掌握编程的基本思想

掌握JavaScript的基础语法,使用常见API(备注) 完成相应案例及练习和作业

培养独立解决问题能力

遇到问题先独立调试(牛X 从规范和调试开始)

能够独立写出所有案例代码

3 注意：

2. 注重基础，以最简单的案例说明问题，并以企业项目案例进行实践

3. 课上思考，课下提问。不需要深究的地方不要钻牛角尖。

4. 必须完成作业,基础坚挺的同学低调,基础薄弱同学多敲多问博客

几句话送给大家:**死磕到底！**

笔记和代码是”大家的”,

4 ##课外提示

1.金山打字敲代码用指法,一般坚持一周者即可熟练

2.码农不需要练就一阳指或者二指禅

3.可以使用金山打字通，此处并非打广告,个人建议，天天敲代码，

不停的反复的敲练习和作业，速度和基本功的快速提升 20遍 12k起 8k

奉劝各位:

5 解决一个问题

## 网页、网站和应用程序

网页：单独的一个页面

网站：一些列相关的页面组成到一起

应用程序：可以和用户产生交互，并实现某种功能。

=======================================================================================

1、Javascript前世今生 *

1.1、什么是Javascript

Javascript运行于Javascript 【解释器/引擎】中的解释性脚本语言（浏览器中）

Javascript运行环境：

1、Javascript解释器：NodeJS（软件）

2、嵌入在浏览器中的内核(引擎)

1.2、Javascript 发展 **

1、1992年 Nombas公司开发了一款脚本语言 ScriptEase ,可以嵌入在网页中

大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。Cmm 背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持与 C （和 C ++）足够的相似性，以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中，它首次向开发人员展示了这种语言的威力。

Nombas 最终把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）听起来过于消极，同时字母 C “令人害怕”。

现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。

2、1995年 Netscape[neitskeip]公司(美国Netscape公司，以开发Internet浏览器闻名) 为 [ˈnævɪgeɪtə(r)]Navigator2.0浏览器开发了一款脚本语言 LiveScript ,

为了赶时髦将其命名为 Javascript。Javascript与Java没有一点关系

3、1996年，Microsoft[maikrisouft] ，为了IE3.0，发布了一个Javascript克隆版本 JScript

4、1997年 Javascript1.1 作为草案提交给了 ECMA（欧洲计算机制造商协会）

--> ECMA-262标准 -->ECMAScript

1.3 Javascript (JS)的组成: *****

1、核心(ECMAScript, ES)语法

2、文档对象模型(DOM,Document Object Model) 一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

3、浏览器对象模型(BOM,Borowser Object Model) 弹出框、控制浏览器跳转、获取分辨率等一套操作浏览器功能的API.

1.4 Javascript特点 **

1、任何编辑工具都可以编写Javascript,语法类似于Java,C,...

2、无需编译

3、弱类型语言

由值来决定数据类型

1.5 基于对象的编程语言 **

java面向对象的语言

面向过程：亲力亲为

面向对向：委派多人干多事

万物皆对象

1.6 Javascript的用途 ****

用来给HTML网页增加动态功能。

最初的目的是为了处理表单的验证操作。

### JavaScript现在的意义(应用场景)

JavaScript 发展到现在几乎无所不能。

1. 网页特效客户端数据计算表单验证非空验证数据范围验证浏览器事件的触发和处理

2. 服务端开发(Node.js) 服务器的异步数据提交（ajax）

3. 命令行工具(Node.js)

4. 桌面程序(Electron)

5. App(Cordova)

6. 控制硬件-物联网(Ruff)

7. 游戏开发(cocos2d-js)

JavaScript和HTML、CSS的区别 *****

1. HTML：提供网页的结构，提供网页中的内容

2. CSS: 用来美化网页

3. JavaScript: 可以用来控制网页内容，给网页增加动态的效果

2、使用javaScript *****

2.1 浏览器说明 *

浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。

通俗的讲:可以显示页面的一个软件,

国内网民计算机上常见的网页浏览器有，QQ浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到的客户端程序。

常用的五大浏览器：chrome，firefox，Safari，ie，opera

我们用chrome(谷歌浏览器)

2.2、JavaScript初体验（JavaScript的书写位置）

CSS：行内样式、嵌入样式、外部样式

A:写在行内

B:写在script标签中

<head>

alert('Hello World!');

</script>

</head>

C: 写在外部js文件中，在页面引入

注意点

引用外部js文件的script标签中不可以写JavaScript代码

2.3语句

被Javascript引擎所解释执行的一句代码

组成：

表达式、关键字、运算符

运算符：+，-，*，/，%，> ....

表达式：由一个或多个运算符以及一个或多个操作数组成的。如：1+2，

特点：以分号表示结束

console.log();

document.write();

window.alert();

习惯:一行只写一条语句

注意：严格区分大小写

console.log();

console.Log();

2.4、注释

单行注释：//

多行注释：/* */

console.log();

/*window.alert();

document.write()*/

console.log();*/

3、变量

内存 : 临时性保存据算计程序在【运行过程中】要用到的数据。

TB->GB->MB->KB->B->bit

8bit = 1B

1024B=1kb

Javascript

硬盘 : 永久性保存数据

0x000000000000000000a13247aaccxx

3.1、什么是变量

就是内存中的一段空间，用于保存程序运行过程中要用到的数据。就是存储数据的容器。

3.2、为什么要使用变量

使用变量可以方便的获取或者修改内存中的数据

3.3、什么是变量名

内存空间的一个别名，为了方便记忆。即变量的名字。

3.4、如何使用变量到内存中开辟一段空间用于保存数据

语法：var 声明变量

var age;

变量的赋值

将数据保存进变量

运算符：= 赋值运算符

语法：

变量名=值;

var name;

name="张无忌";

初始化：声明变量并赋值

var 变量名称=值;

注意：没有被赋值的变量自动取值为undefined

var name;

var age;

var hobby;

一条语句中声明多个变量:

var name,age,hobby;

var name="张三丰",age=30;

3.5、变量名命名规范

1、要求

1、不允许使用关键字以及保留关键字命名

标准关键字：

eg : var , function , if , for ,true,false ...

保留关键字：

class,int,float,double ... ...

2、命名规范

a、可以包含字母、数字、下划线 _、$

b、不能以数字开头

var name;

var name1;

var 1name;错误

c、不允许重复

d、尽量见名知意

var name;

var age;

var a,b,c,d,....aa,ab,ac,ad;

var xingming,nianling;

e、推荐采用

匈牙利命名法

控件缩写+功能

txtName input text

rdoGender

chkHobby

selCity

下划线命名法

_功能名称

_name;

_age;

驼峰命名法

如果变量名称由多个单词组成，第一个单词全部小写，第二个单词开始，首字符变大小

userName

txtusernmae --> txtUserName

下面哪些变量名不合法

```

age18

18age

name

$name

_sex

&sex

theworld theWorld

3.6、变量使用注意问题

1、未初始化变量的使用

只定义未赋值，值为undefined

未定义，使用，错误，not defined

2、在可能的情况下，声明变量时尽量初始化

var age=10;

var name="张三";

var isHappy=true;

3、将变量的声明和赋值分开操作

var name;

var age;

name="";

age=18;

4、对变量进行的存取操作

1、设置变量的值(赋值，存)

var name="张三丰";//张三丰

name="张无忌";//张无忌

name+="殷素素";//张无忌殷素素 name = name + "殷素素"; i+=1;

name = name + "张翠山";//张无忌殷素素张翠山

name = name+""; ==> name+="";

特殊：

var i=10;

i++;

++i; ==> i=i+1;

注意：赋值时，=的左边一定是变量

2、获取变量的值(取值)

var uname="张无忌";

console.log(uname);

var newName = uname;

uname : 取值操作(=右边使用)

newName : 赋值操作(=左边使用)

4、运算符

1、算数运算符

+,-,*,/,%

%:取余(模),计算两个数字相除后的余数

5%2 结果为 1

3%5 结果为 3

常用场合：

1、获取数字的最后一位

1234

1234%10=123 ... 4

1234%100 = 12 ... 34

2、判断奇偶性或判断是某数字的倍数

58 % 2 结果是否为 0?

78 是 3的倍数吗？？

78 % 3 结果是否为 0 ？

+ ：

1、求和：数字类型的数值求和

2、"" 与 +联用 ,作用是追加

"张无忌" + 123 结果为:张无忌123

123 + "张无忌" 结果为:123张无忌

12+25 结果为：37

"12"+25 结果为：1225

'12'+25 结果为：1225

5、数据类型

1、什么是数据类型

保存在内存中的数据的类型，根据不同的类型内存中所开辟的空间也不一样

2、数据类型

1、原始类型 (基本类型)

1、number 类型

数字

可以表示 32 位 (4字节)的整数，或64位(8字节)的浮点数

浮点数：小数

var age;

age=12; //number

age=24.5;//number

2、string 类型

字符串

一系列的文本数据

注意：赋值时，必须使用 " " 或 ' ' 扩起

var name="张三丰";//string

var age = "12"; //string

特殊字符，可以通过转移字符实现

"Hello World"

console.log(""Hello World"");错误

console.log("Hello World");

3、boolean 类型

布尔

只表示肯定(真) 或否定(假)的数据

值：true(真) 和 false(假)

使用场合：作为程序的条件(判断、循环)

在与 number 类型做运算时，true=1，false=0

4、null 类型

空

5、undefined 类型

未定义

表示不存在的数据

2、引用类型

Object 对象

...

0 计算机组成 *

线程 cpu 内存主板显卡游戏热贵 8000 集成显卡

软件

- 应用软件：浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word

压缩

- 系统软件：Windows、Linux、mac OSX

硬件

- 三大件：CPU、内存、硬盘 -- 主板

- 输入设备：鼠标、键盘、手写板、摄像头等

- 输出设备：显示器、打印机、投影仪等

c 180分控制台

c--

1 学习js目标:

程序90% 来自生活

- 掌握编程的基本思维

- 掌握编程的基本语法

HTML和CSS 小米

2 课前说明

目标：掌握编程的基本思想

掌握JavaScript的基础语法,使用常见API(备注) 完成相应案例及练习和作业

培养独立解决问题能力

遇到问题先独立调试(牛X 从规范和调试开始)

能够独立写出所有案例代码

3 注意：

2. 注重基础，以最简单的案例说明问题，并以企业项目案例进行实践

3. 课上思考，课下提问。不需要深究的地方不要钻牛角尖。

4. 必须完成作业,基础坚挺的同学低调,基础薄弱同学多敲多问博客

几句话送给大家:**死磕到底！**

笔记和代码是”大家的”,

4 ##课外提示

1.金山打字敲代码用指法,一般坚持一周者即可熟练

2.码农不需要练就一阳指或者二指禅

3.可以使用金山打字通，此处并非打广告,个人建议，天天敲代码，

不停的反复的敲练习和作业，速度和基本功的快速提升 20遍 12k起 8k

奉劝各位:

5 解决一个问题

## 网页、网站和应用程序

网页：单独的一个页面

网站：一些列相关的页面组成到一起

应用程序：可以和用户产生交互，并实现某种功能。

=======================================================================================

1、Javascript前世今生 *

1.1、什么是Javascript

Javascript运行于Javascript 【解释器/引擎】中的解释性脚本语言（浏览器中）

Javascript运行环境：

1、Javascript解释器：NodeJS（软件）

2、嵌入在浏览器中的内核(引擎)

1.2、Javascript 发展 **

1、1992年 Nombas公司开发了一款脚本语言 ScriptEase ,可以嵌入在网页中

Nombas 最终把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）听起来过于消极，同时字母 C “令人害怕”。

现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。

2、1995年 Netscape[neitskeip]公司(美国Netscape公司，以开发Internet浏览器闻名) 为 [ˈnævɪgeɪtə(r)]Navigator2.0浏览器开发了一款脚本语言 LiveScript ,

为了赶时髦将其命名为 Javascript。Javascript与Java没有一点关系

3、1996年，Microsoft[maikrisouft] ，为了IE3.0，发布了一个Javascript克隆版本 JScript

4、1997年 Javascript1.1 作为草案提交给了 ECMA（欧洲计算机制造商协会）

--> ECMA-262标准 -->ECMAScript

1.3 Javascript (JS)的组成: *****

1、核心(ECMAScript, ES)语法

2、文档对象模型(DOM,Document Object Model) 一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

3、浏览器对象模型(BOM,Borowser Object Model) 弹出框、控制浏览器跳转、获取分辨率等一套操作浏览器功能的API.

1.4 Javascript特点 **

1、任何编辑工具都可以编写Javascript,语法类似于Java,C,...

2、无需编译

3、弱类型语言

由值来决定数据类型

1.5 基于对象的编程语言 **

java面向对象的语言

面向过程：亲力亲为

面向对向：委派多人干多事

万物皆对象

1.6 Javascript的用途 ****

用来给HTML网页增加动态功能。

最初的目的是为了处理表单的验证操作。

### JavaScript现在的意义(应用场景)

JavaScript 发展到现在几乎无所不能。

1. 网页特效客户端数据计算表单验证非空验证数据范围验证浏览器事件的触发和处理

2. 服务端开发(Node.js) 服务器的异步数据提交（ajax）

3. 命令行工具(Node.js)

4. 桌面程序(Electron)

5. App(Cordova)

6. 控制硬件-物联网(Ruff)

7. 游戏开发(cocos2d-js)

JavaScript和HTML、CSS的区别 *****

1. HTML：提供网页的结构，提供网页中的内容

2. CSS: 用来美化网页

3. JavaScript: 可以用来控制网页内容，给网页增加动态的效果

2、使用javaScript *****

2.1 浏览器说明 *

浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。

通俗的讲:可以显示页面的一个软件,

常用的五大浏览器：chrome，firefox，Safari，ie，opera

我们用chrome(谷歌浏览器)

2.2、JavaScript初体验（JavaScript的书写位置）

CSS：行内样式、嵌入样式、外部样式

A:写在行内

B:写在script标签中

<head>

alert('Hello World!');

</script>

</head>

C: 写在外部js文件中，在页面引入

注意点

引用外部js文件的script标签中不可以写JavaScript代码

2.3语句

被Javascript引擎所解释执行的一句代码

组成：

表达式、关键字、运算符

运算符：+，-，*，/，%，> ....

表达式：由一个或多个运算符以及一个或多个操作数组成的。如：1+2，

特点：以分号表示结束

console.log();

document.write();

window.alert();

习惯:一行只写一条语句

注意：严格区分大小写

console.log();

console.Log();

2.4、注释

单行注释：//

多行注释：/* */

console.log();

/*window.alert();

document.write()*/

console.log();*/

3、变量

内存 : 临时性保存据算计程序在【运行过程中】要用到的数据。

TB->GB->MB->KB->B->bit

8bit = 1B

1024B=1kb

Javascript

硬盘 : 永久性保存数据

0x000000000000000000a13247aaccxx

3.1、什么是变量

就是内存中的一段空间，用于保存程序运行过程中要用到的数据。就是存储数据的容器。

3.2、为什么要使用变量

使用变量可以方便的获取或者修改内存中的数据

3.3、什么是变量名

内存空间的一个别名，为了方便记忆。即变量的名字。

3.4、如何使用变量到内存中开辟一段空间用于保存数据

语法：var 声明变量

var age;

变量的赋值

将数据保存进变量

运算符：= 赋值运算符

语法：

变量名=值;

var name;

name="张无忌";

初始化：声明变量并赋值

var 变量名称=值;

注意：没有被赋值的变量自动取值为undefined

var name;

var age;

var hobby;

一条语句中声明多个变量:

var name,age,hobby;

var name="张三丰",age=30;

3.5、变量名命名规范

1、要求

1、不允许使用关键字以及保留关键字命名

标准关键字：

eg : var , function , if , for ,true,false ...

保留关键字：

class,int,float,double ... ...

2、命名规范

a、可以包含字母、数字、下划线 _、$

b、不能以数字开头

var name;

var name1;

var 1name;错误

c、不允许重复

d、尽量见名知意

var name;

var age;

var a,b,c,d,....aa,ab,ac,ad;

var xingming,nianling;

e、推荐采用

匈牙利命名法

控件缩写+功能

txtName input text

rdoGender

chkHobby

selCity

下划线命名法

_功能名称

_name;

_age;

驼峰命名法

如果变量名称由多个单词组成，第一个单词全部小写，第二个单词开始，首字符变大小

userName

txtusernmae --> txtUserName

下面哪些变量名不合法

```

age18

18age

name

$name

_sex

&sex

theworld theWorld

3.6、变量使用注意问题

1、未初始化变量的使用

只定义未赋值，值为undefined

未定义，使用，错误，not defined

2、在可能的情况下，声明变量时尽量初始化

var age=10;

var name="张三";

var isHappy=true;

3、将变量的声明和赋值分开操作

var name;

var age;

name="";

age=18;

4、对变量进行的存取操作

1、设置变量的值(赋值，存)

var name="张三丰";//张三丰

name="张无忌";//张无忌

name+="殷素素";//张无忌殷素素 name = name + "殷素素"; i+=1;

name = name + "张翠山";//张无忌殷素素张翠山

name = name+""; ==> name+="";

特殊：

var i=10;

i++;

++i; ==> i=i+1;

注意：赋值时，=的左边一定是变量

2、获取变量的值(取值)

var uname="张无忌";

console.log(uname);

var newName = uname;

uname : 取值操作(=右边使用)

newName : 赋值操作(=左边使用)

4、运算符

1、算数运算符

+,-,*,/,%

%:取余(模),计算两个数字相除后的余数

5%2 结果为 1

3%5 结果为 3

常用场合：

1、获取数字的最后一位

1234

1234%10=123 ... 4

1234%100 = 12 ... 34

2、判断奇偶性或判断是某数字的倍数

58 % 2 结果是否为 0?

78 是 3的倍数吗？？

78 % 3 结果是否为 0 ？

+ ：

1、求和：数字类型的数值求和

2、"" 与 +联用 ,作用是追加

"张无忌" + 123 结果为:张无忌123

123 + "张无忌" 结果为:123张无忌

12+25 结果为：37

"12"+25 结果为：1225

'12'+25 结果为：1225

5、数据类型

1、什么是数据类型

保存在内存中的数据的类型，根据不同的类型内存中所开辟的空间也不一样

2、数据类型

1、原始类型 (基本类型)

1、number 类型

数字

可以表示 32 位 (4字节)的整数，或64位(8字节)的浮点数

浮点数：小数

var age;

age=12; //number

age=24.5;//number

2、string 类型

字符串

一系列的文本数据

注意：赋值时，必须使用 " " 或 ' ' 扩起

var name="张三丰";//string

var age = "12"; //string

特殊字符，可以通过转移字符实现

"Hello World"

console.log(""Hello World"");错误

console.log("Hello World");

3、boolean 类型

布尔

只表示肯定(真) 或否定(假)的数据

值：true(真) 和 false(假)

使用场合：作为程序的条件(判断、循环)

在与 number 类型做运算时，true=1，false=0

4、null 类型

空

5、undefined 类型

未定义

表示不存在的数据

2、引用类型

Object 对象

...

转载于:https://www.cnblogs.com/xuaima/p/10435018.html

你可能感兴趣的文章

迅为iTOP-4412开发板-Android4.4-固定MAC

查看>>

centos下，安装MySQL以及配置远程连接等

查看>>

获取硬盘和CPU的序列号

查看>>

Python全栈开发 day2 - 数据类型详解

查看>>

葡萄城报表的数据可视化分析

查看>>

（转）面向对象的三大基石（封装，继承和复合，多态）

查看>>

jquery $.ajax $.get $.post的区别？

查看>>

python中运行pip出现Fatal error in launcher错误

查看>>

2017北京国庆刷题Day7 afternoon

查看>>

bzoj千题计划108：bzoj1018: [SHOI2008]堵塞的交通traffic

查看>>

C++集成设计环境——Code::Blocks安装过程

查看>>

Maven小记

查看>>

一定不要在头文件中using namespace XXX

查看>>

运行百度语音识别官方iOS demo报错: load offline engine failed: 4001

查看>>

THREE.OrbitControls参数控制

查看>>

iOS开发--XMPPFramework--好友列表（五）

查看>>