01—JavaScript概述

一、初识Javascript

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

JavaScript是一种功能强大的编程语言，用于开发交互式的web页面和给页面添加动态效果。js是网景公司（Netscape）的产品，javaScript之父是布兰登。最早取名为LiveScript。之所以将 LiveScript 更名为 JavaScript，是因为 JavaScript 是受 Java 的启发而设计的，因此在语法上它们有很多相似之处 ，JavaScript 中的许多命名规范也都借鉴自 Java，还有一个原因就是为了营销，蹭 Java 的热度。

1、JS的组成部分：

JavaScript所指代的范围要比ECMAScript更加广泛。JavaScript可以分为3个部分：

核心（ECMAScript）

DOM（文档对象模型）

BOM（浏览器对象模型）

完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。

2、特点：

1.js是脚本语言，采用小程序端的方式实现编程

2.js是解释性语言，根据代码顺序逐一解释，其中某一行有错，js就会卡在此处无法进入下一步。

3.Js是一种基于对象的语言

4.js跨平台性

3、javascript开发工具：

Spket：Spket IDE - JavaScript Editor

Netbeans：Welcome to Apache NetBeans

Ixedit：http://www.ixedit.com/

codepress：CodePress - Real Time Syntax Highlighting Editor written in JavaScript

Webstorm：WebStorm: The JavaScript and TypeScript IDE, by JetBrains

Komodo Edit：Komodo IDE By ActiveState - One IDE for All Your Languages

scripted：GitHub - vmware-archive/scripted: The Scripted code editor

二、基本语法

1、区分大小写

2、；为每一行的结束符

要求:    无论换行与否语句结束都加分号

3、注释

单行注释以//开头

/*多行注释*/

4、命名规范

注意:变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。

1.  匈牙利命名法：

基本原则是：变量名=属性+类型+对象描述，其中每一对象的名称都要求有明确含义，可以取对象名字全称或名字的一部分。要基于容易记忆容易理解的原则。保证名字的连贯性是非常重要的。

举例：

hwnd ： h 是类型描述，表示句柄， wnd 是变量对象描述，表示窗口，所以 hwnd 表示窗口句柄；

pfnEatApple ： pfn 是类型描述，表示指向函数的指针， EatApple 是变量对象描述，所以它表示指向 EatApple 函数的函数指针变量。

g_cch ： g_ 是属性描述，表示全局变量，c 和 ch 分别是计数类型和字符类型，一起表示变量类型，这里忽略了对象描述，所以它表示一个对字符进行计数的全局变量。

上面就是HN命名法的一般规则。

1.  帕斯卡拼写法(PascalCase):  

  帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。帕斯卡命名法指当变量名和函式名称是由二个或二个以上单词连结在一起，每个单词首字母大写。而构成的唯一识别字时，用以增加变量和函式的可读性。

命名规则

单字之间不以空格断开或连接号（-）、底线（_）连结，第一个单词首字母采用大写字母；后续单词的首字母亦用大写字母

例如：FirstName、LastName。

每一个单词的首字母都采用大写字母的命名格式，被称为“Pascal命名法”，源自于Pascal语言的命名惯例，也有人称之为“大驼峰式命名法”（Upper Camel Case），为驼峰式大小写的子集。

1.  驼峰法:    

JavaScript 中通常推荐使用驼峰法，jQuery 及其他 JavaScript 库都使用驼峰法。

驼峰命名规范(包括函数名，变量等):

1. 名字中可以有字母、下划线或者美元符号、数字
2. 必须以字母、下划线或者美元符号开始，不能数字开头，也不能使用特殊符号。
3. 命名不能是系统的关键字：比如new ,if,class......
4. 区分大小写
5. 命名最好用有意义的名称。比如说name,people......

5、单双引号的使用规范（外层使用单引号里面就是用双引号）

6、常量

1. 常量是从始至终不能被改变的数据。比如: 数字 123 可以是常量，字符串 "hello" 也是一个常量......
2. 常量通常用来表示固定不变的量，比如圆周率，万有引力常量。

7、变量

变量：从字面上看，变量是可变的的量，从编程角度讲，变量是用于存储数据的容器

在 JavaScript 中创建变量通常称为“声明”变量，使用关键字 var来声明变量。

声明变量：

1. 先声明后赋值  var age; age=20;
2. 边声明边赋值   var  age=9;
3. 多变量一起声明（用逗号隔开）var a,b; a=0;b=90
4. 多变量一起声明一起赋值 var  age=9,name=”张三”;

1. 变量不仅可存放具体值，还可以存放运算结果
2. 同一个变量可以多次赋值，后赋的值会覆盖前面的值

三、输入 输出工具

1、直接写入 HTML 输出流，输出到页面

会以ＨＴＭＬ的语法解析里面的内容

语法:document.write(参数1,参数2,参数3,...) 它们将按顺序被追加到文档中。

注：您只能在 HTML 输出中使用 document.write。如果您在文档加载完成后使用该方法，会覆盖整个文档。

2、输出弹窗

弹出带有一条指定消息和一个确定按钮的警告框

语法: window.alert(对话框中显示的纯文本);

3、输入弹窗

显示可提示用户进行输入的对话框

语法: prompt(对话框中显示的纯文本,默认的输入文本);

两个参数均为可选。

4、控制台输出信息

console.log("我是日志信息")

在控制台上输出的信息,浏览器按下 F12 打开控制台,Console 即控制台

可以接受任何字符串、数字和js对象，可以看到清楚的对象属性结构,不会阻塞程序的执行.

5、输出确认弹窗

语法：confirm(对话框中显示的纯文本);

四、浏览器载入JavaScript代码的三种方式

1、js内部引入，写在<script>标签中

<script type=”text/javascript”>...........</script>

使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):<script src="myscript.js">

2、以外部文档形式连接到HTML文档中

<script type="text/javascript" src="one.js"></script>

3、直接在HTML标签中的js代码

<a href=”javascript:alert('我是在html标签里的js代码')”>提示框</a>

<!--引入区域-->

<!--1.js可以引入文档中的任何区域，js都可以正确执行-->

<!--2.js通常写在head区域或者body区域-->

<!--执行顺序-->

<!--1.代码在执行过程中，另一段代码想要执行就必须等当前代码执行完成后才可以进行-->

<!--2.JS是按照语句出现的先后顺序执行,和引入方式无关-->

五、DOM的阻塞

1.DOM: js操作网页的接口，全称为“文档对象模型”(Document Object Model)。可以简单理解成页面中的元素

2.DOM树:元素和元素之间的关系,可以简单理解成页面中的元素。

3.js的执行会阻塞页面结构的加载,此时 DOM树是不完整的，这样在调用一些 js代码时就可能报错。

4.防止阻塞的两种方法:

<!--a.把所有js代码放在body区域的最后-->

<!--b.添加window.onload事件,表示网页加载完毕后(包括图片、css文件等等)执行的操作-->

Window.οnlοad=function(){

        代码体；

}

六、JS 的阻塞

js代码有错误时，从此处代码开始以后的代码都不会被执行

检查错误代码方法：

1、看控制台信息

2、使用alert()语句确定错误范围，再逐一查错。

练习 1：

使用 js 提供的输入款，获取用户输入的信息，

名字，年龄，地址，电话号码，

使用 js 语法输出在页面的 div 中

练习 2：

交换两个变量的值,a=22,b=33,使用控制台输出 a=33,b=22