JavaScript简介

概念

• JavaScript主要用于HTML的页面，嵌入在HTML的源码中。，它存在于全世界所有 Web 浏览器中，能够增强用户与 Web 站点和 Web 应用程序之间的交互。
• JS是弱类型语言,没有类型声明,它的变量不必具有一个明确的类型。
  JS是脚本语言，换句话说，可以用来编程的并且直接执行源代码的语言,就是脚本语言。
• JS也是解释性的语言。何为解释性语言?是在运行的时候将程序直接翻译成机器的语言。
• JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
• HTML5的出现更是突出了JavaScript的重要性，例如HTML5的绘图支持、本地存储、离线应用、客户端通信等，都大量使用了JavaScript。
• JS不操作任何的数据，直接对用户和客户的输入做出相应。

特点

• 简单性：它是基于Java基本语句和控制流之上的简单而紧凑的设计，是学习Java的好过渡，而且，它的变量类型是采用弱类型，未采用严格的数据类型。
• 安全性：JS不允许访问本地硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效的防止数据的丢失。
• 动态性：JS可以直接对用户或客户输入做出响应，无须经过Web程序。它对用户的响应采用以事件驱动的方式进行，即由某种操作动作引起相应的事件响应，如：点击鼠标、移动窗口、选择菜单等。
• 跨平台性：JS依赖于浏览器本身，与操作环境无关。只要能运行浏览器的计算机，并安装了支持JS的浏览器就可以正确执行，从而实现了“编写一次，走遍天下”的梦想。

组成

由ECMAScript、文档对象模型（DOM）、浏览器对象模型（BOM）。

注：

• DOM描述了处理网页内容的方法和接口。通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性，可以对其的内容增、删、改、查。
• BOM描述了与浏览器进行交互的方法和接口
• ECMAScript描述该语言的语法和基本对象

图片1.png 图片2.png

开发工具

1、记事本
2、EditPlus
3、Notepad++
4、HBuilder
5、WebStrom
6、Sublime （较好）

Javascript的工作原理

图片3.png

JavaScript的基本语法
<script type=”text/javascript”>
JavaScript语句；
</script >
注：

• <script>…</ script>可以包含在文档中的任何地方，只要保证这些代码在使用前已读取并加载了所有的文档内容即可。所以，Script应写在body中的最后一个元素，以保证所有元素均被加载。
• <script>有一个必选的属性type,用来指明脚本的类型，常用的是type=”text/javascript”（传统的写法，浏览器支持较好）。type的属性值也可选text/javascript、application/javascript、text/vbscript、text/jscript、text/x-javascript等。

网页中引用JavaScript的方式

1.内部添加，使用<Script>标签
语法：<script type=”text/javascript” ></script>
注：Script应写在body中的最后一个元素，以保证所有元素均被加载。
2.链接外部JS文件
语法：<script type=”text/javascript” src=”xxx.js” ></script>
注：引入Script语句应写在body中的最后，以保证所有元素均被加载。
3.在HTML标签中，作为某个元素的事件属性值或者是超链接href属性值
示例：
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
注：当即有内部添加，又有链接外部的JS文件时，
内部添加的语句不能添加到链接外部的JS文件的语句中，需要重新写一个内部添加的<script>…<script>语句。

注意事项

• JavaScript的执行顺序：按照HTML文件中的顺序依次执行
• JavaScript严格区分大小写，大小写敏感
• JavaScript的语句与语句之间忽略空白符和换行符
• JavaScript通过\对代码进行这行操作
• JavaScript使用分号(;)结束语句时，最后一个的分号(;)可以省略，金陵不要省略。
• JavaScript可以使用大括号{}括成一个语句组，形成一个块block

注释

• 单行注释：//注释内容
• 多行注释：/注释内容/
• 文档注释：/*注释内容/
  注：2、3的结果是一样的。

基本操作

1.alert();页面弹出框
注：

• alert()的参数内容必须为字符串。
• alert()的参数内容为中文时必须加双引号或单引号，而变量不必加。
• alert()中换行时，使用转移字符\n。
• 双引号中不能嵌套双引号，单引号中不能嵌套单引号，若要使窗口中的文字带有双引号，则必须使双引号的外面再次嵌套一个单引号。
• 双引号内部不能换行。

2.document.write();向页面文档中写入内容(文本或标签)
注：

• 可以解析标签，换行使用
  
• 内容为字符串
• 如果在文档已加载完成后执行document.write(),整个HTML页面将被覆盖

3.console.log();向控制台写入内容(主要用于检错)
注：

• 只能写入文本，不能识别标签
• 用于检错，检错不建议使用alert().

关键字和保留字

• 关键字和保留字：在JS中具有特殊含义的单词
• Javascript 的保留关键字不可以用作变量、标签或者函数名。
• • 标记的关键字是 ECMAScript5 中新添加的。

tupian.jpg

标识符

标识符：给变量、函数和对象等指定的名字
标识符的命名规则：
1.区分大小写。
2.标识符可以由字母、数字、下划线(_)和美元($)组成，但不能以数字开头。
3.不能喝关键字重复，见名之意。
4.习惯上，采用驼峰式命名，处第一个单词外，剩余单词首字母大写。

变量

变量概念
用于保存值或表达式，变量就是它的值是可以被改变的。
变量的命名规范
同标识符的命名规范一样。
变量的声明
声明变量：var 变量名；
变量赋值：变量名=值；
声明变量同时赋值：var 变量名=值；

注：a、同时声明多个变量用逗号(,)分开 eg. var a=1,b=2;
b、如果再次声明了JavaScript变量，该变量也不会丢失其原始值
eg. var x=5; var x;
c、重新赋值会抹掉原来的变量值
eg. var x=5; var x=7;
d、声明也可以跨行 eg. var userbame,
sex;

重点：

JavaScript的系统提示框

confirm()：确定和取消的对话框

• 表现：消息确认框，有两个按钮，一个确定，一个取消，消息框上会显
  示提示信息
• 参数：(参数就是写在()里面的内容)
  参数只有一个，就是提示信息，提示信息是字符串的形式出现(意思是值必须有""或''引起来的)
• 返回值：这个确认框会返回一个结果，结果是boolean类型，要么是true，要么是false；”确认”是true，”取消”是false.

*alert()：提示框 *

• 表现：警告框，有一个按钮，显示确定，警告框显示提示信息
• 参数：只有一个，可以是任何类型
• 返回值：无返回值
  注：
• 内容若是字符串，则必须用双引号或单引号；若为变量名，则不用；若内容为数字，则不需要用双引号或单引号，直接写数字即可。
• \n转义字符是字符串的一种，+(加号)为字符串连接符。

prompt()：输入框
*表现：页面输入框，有两个按钮，一个确定，一个取消，消息框上会显 示提示信息，还会有一个输入框
*参数：有两个，均为字符串，第一参数是字符串类型，表示提示信息，第二个参数是输入框的默认值，第二个参数可以省略，若省略在ie中默认是undefined,在chrome和FF中默认是空字符串；若不省略，则第二个参数会显示在输入框中。
*返回值：返回的是输入的内容(字符串类型) 或者" "或者null
注：
*若一个变量，只定义未赋值，其值为undefined.
*返回值为字符串

总结

1、加号有两种用途：
a、”+”字符串连接符 b、运算符
2、parseFloat()
作用：将字符串类型的参数转换成浮点的数值类型。
3、document.getElementById('xx')
作用：是获取HTML中的Id号为xx的元素。
4、若将var numEl= document.getElementById('xx').value;
作用：就是获取xx元素的值，其为字符串类型。