JavaScript基础

目录

一 . 什么是JavaScript ?

二 . JavaScript语言的发展历程 ?

三 . JavaScript的组成

四 . JavaScript的基本结构

五 . JavaScript的运行顺序

六 . 输出语句

七 . JavaScript的执行原理

八 . 使用客户端脚本语言的好处 ?

九 . 在网页中引用JavaScript的方式

十 . 变量的声明和赋值

十一 . 常用的基本数据类型

十二 . 数组

十三 . 运算符号

十四 . 逻辑控制语句

十五 . 中断循环

十六 . 注释

十七 . 关键字

十八 . 保留字

十九 . 常用的输入输出

二十 . 语法约定

二十一 . Chrome开发人员工具

二十二 . JavaScript中的函数

二十三 . 自定义函数

二十四 . 调用函数

二十五 . 常见的事件

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

一 . 什么是JavaScript ?

答 : 1 . JavaScript是一种描述性语言 , 也是一种基于对象(Object)和事件驱动(Event Driven)的 , 并具有安全性能的脚本语言 ; 

      2 . 他与HTML(超文本标记语言)一起 , 在一个Web页面中链接多个对象 , 与Web客户实现交互 ;

      3 . 无论在客户端还是服务器端 , JavaScript应用程序都要下载到浏览器的客户端执行 , 从而减轻了服务器的负担 ;

      4 . JavaScript的语言和java类似 , 是边执行边解释的 ;

二 . JavaScript语言的发展历程 (了解一下即可)?

答 : 1 . 1992年 , Nombas公司开发了一种称为Cmm的嵌入式脚本语言 , 并把它捆绑在一个称为CEnvi的产品中 , 之后又将其改名为ScriptEase ; 

      2 . Netscape公司为了扩展其浏览器的功能 , 开发了一种名为LiveScript的脚本语言 , 并与1995年将其更名为JavaScript ; 

      3 . 之后Microsoft公司进军浏览器市场 , 发布了IE3.0 , 并搭载了JavaScript的复制版 , 称为JScript , 到此时为止 , 有三种不同的JavaScript版本同时存在 : Netscape公司的JavaScript , IE中的JScript , CEnvi软件中的ScriptEase ; 

      4 . 此时的JavaScript(这么称呼或有不准确)没有一个标准来统一其语法和特性 , 这几种版本之间也互有冲突 , 为了解决这一问题 , JavaScript1.1作为一个草案提交给欧洲计算机制造商协会(ECMA) , 最终ECMA-262标准应运而生 , 该标准定义了称为ECMAScript的脚本语言 ;

      5 . 后来国际标准化组织以及国际电工委员会(ISO/IEC)也采纳了ECMAScript作为标准 ;

      综上所述 , ECMAScript是一种脚本语言的标准 , JavaScript语言就是遵循ECMAScript标准的一种实现 ;

三 . JavaScript的组成

答 : 1 . 尽管ECMAScript是一个重要的标准 , 但它并不是JavaScript的唯一部分 , 也不是唯一被标准化的部分 ;

      2 . 实际上 , 一个完整的JavaScript是由以下三个不同的部分组成 :

⑴ . ECMAScript标准

是一种开放的 , 被国际上广泛接受的 , 标准的脚本语言规范 , 不予任何具体的浏览器绑定 , ECMAScript主要描述了语法 , 变量和数据类型 , 运算符 , 逻辑控制语句 , 关键字和保留字 , 对象 ;

ECMAScript是一个描述 , 规定了脚本语言的所有属性 , 方法和对象的标准 , 我们一定要遵守 ;

⑵ . 浏览器对象模型

浏览器对象模型(Browser Object Model , BOM) , 提供了独立于内容与浏览器窗口进行交互的对象 , 使用浏览器对象模型可以实现与Html的交互 , 如网上常见的弹出窗口 , 前进后退功能都是浏览器对象控制的 ;

⑶ . 文档对象模型

文档对象模型(Document Object Model , DOM) , 是HTML文档对象模型(HTML DOM)定义的一套标准方法 , 用来访问和操纵HTML文档 , 如网上商城常见的随鼠标移动显示大的图片 , 弹出小提示都是文档对象的功劳 ;

四 . JavaScript的基本结构

答 : JavaScript代码是由<script>标签对嵌入HTML文档的 ; 

      示例 :

    <script type="text/javascript">
//type指定了文本使用的语言类别为text/javascript,该标签对可以放在文档任意位置
    </script>

五 . JavaScript的运行顺序

答 : 1 . 浏览器在遇到<script>标签时 , 将逐行读取内容 , 直到遇到</script>结束标签为止 ;

      2 . 之后浏览器将会检查JavaScript的语法 , 如果有任何错误 , 则会在警告栏内显示 , 如果没有错误 , 则浏览器编译并执行语句 ;

六 . 输出语句

答 : 1 . document.write()用来向页面输出可以包含HTML标签的内容 ; 

      2 . alert("弹出内容") ;

      示例 :

<script type="text/javascript">
    document.write("<h1>HelloWorld</h1>")
</script>

七 . JavaScript的执行原理

答 : 在JavaScript中 , 浏览器客户端与应用服务器端采用 请求/响应 模式进行交互 ; 

      1 . 发送请求 : 浏览器客户端向服务器发送请求 , 也就是用户在地址栏输入要访问的页面 , 该页包含JavaScript程序 ;

      2 . 数据处理 : 服务器端将某个包含JavaScript的页面进行处理 ;

      3 . 发送响应 : 服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端 , 然后由浏览器客户端从上至下逐条解析HTML标签和JavaScript , 并将页面效果呈现给用户 ;

八 . 使用客户端脚本语言的好处 ?

答 : 1 . 包含JavaScript的页面只要下载一次即可 , 这样能减少不必要的网络通信 ;

      2 . JavaScript程序有浏览器客户端执行 , 而不是由服务器端执行 , 因此能减轻服务器端的压力 ;

九 . 在网页中引用JavaScript的方式

答 : 1 . 内部 : 直接使用<script>标签对将代码加入HTML文档 , 适合用于特效代码少的单个页面 ;

      2 . 外部 : 将js代码写入一个外部文件中 , 以*.js为扩展名保存 , 然后将该文件指定给<script>标签中的"src"

属性 , 这样就可以引用这个外部文件 , 适合应用于代码较多 , 重复应用于多个页面 ;

      示例 :

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

      3 . 直接在HTML标签中 : 适合极少代码的情况 , 仅用于当前标签 ;

      示例 :

<input name="btn" type="button" value="弹出消息框" οnclick="javascript:alert('欢迎你');"/>

十 . 变量的声明和赋值

答 : JavaScript是一种弱语言类型 , 没有明确的类型 , 也就是说 , 在声明变量时 , 不需要指定变量的类型 , 变量的类型由赋给变量的值决定 ; 

变量使用关键字var声明 , 例如 : var 合法的变量名(命名规则同java相同) ;

特别注意 :

1 . JavaScript区分大小写 , 所以大小写不同的变量名代表不同的变量 ;

2 . 由于JavaScript是一种弱语言类型 , 因此允许不声明变量而直接使用 , 系统将会自动声明该变量 ;

<script type="text/javascript">
    x=88;//没有声明变量,直接使用,但这种方式出错不容易查找,因此不推荐,要养成良好的编程习惯
</script>

十一 . 常用的基本数据类型

答 : 1 . undefined : 未定义类型 ;

      2 . null : 空类型 ;

      3 . number : 数值类型 ;

      4 . String : 字符串类型 ;

      5 . boolean : 布尔类型 ;

      6 . typeof : ECMAScript提供了typeof运算符来判断一个值或变量究竟属于哪种数据类型 , 语法如下 :

      示例 :

<script type="text/javascript">
    var width,height=10,name="rose";
    var date=new Date();
    var arr=new Array();
    document.write("width:"+typeof(width)+"<br/>");//undefined
    document.write("height:"+typeof(height)+"<br/>");//number
    document.write("name:"+typeof(name)+"<br/>");//String
    document.write("date:"+typeof(date)+"<br/>");//Object
    document.write("arr:"+typeof(arr)+"<br/>");//Object
    document.write("true:"+typeof(true)+"<br/>");//boolean
    document.write("null"+typeof(null)+"<br/>");//Object
</script>

      返回结果有以下几种 :

      ⑴ . undefined : 未声明或者声明未赋值非引用类型返回该结果 ;

      ⑵ . number : 数值类型返回该结果 ;

      ⑶ . String : 字符串类型返回该结果 ;

      ⑷ . boolean : boolean类型返回该结果 ;

      ⑸ . Object : null类型 , 数值类型等引用类型返回该结果 ;

      特别注意 : 

      ⑴ . null表示"什么也没有"的占位符 , undefined实际上是由null派生而来的 , JavaScript把他们定义为相等 , 尽管这两个值相等 , 但含义不同 , undefined表示未声明或声明了但未赋值 , null表示该变量被赋予了一个空值 ;

      ⑵ . number类型既可以表示32位整数 , 又可以表示64位的浮点数 ;

            整数可以表示为8进制或16进制 , 8进制首位数字必须是0 , 其后的数字可以是任何八进制数字(0~7) ;

            16进制数字的首位数字也必须是0 , 后面的任意的16进制的数字和字母(0~9)和(A~F) ;

            对于非常大的和非常小的数 , 可以用科学计数法来表示 , 它也是number类型 ;

            另外还有一个特殊值NaN(Not a number) , 表示非数 , 也是number类型 ;

      ⑶ . JavaScript不对"字符"和"字符串"加以区分 , 他们都是String类型 ;

           JavaScript中的String也是一种对象 , 和Java中的String对象类似 , 它也有一个length属性 , 表示字符串的长度 , 包含空格 , 调用length的语法如下 :

<script type="text/javascript">
    var str="this is javascript";
    var strLength=str.length;
</script>

            JavaScript中也有许多方法用来处理和操作字符串 , 常用方法如下 :

            ★ indexOf(str,index) : 查找某个指定的字符串在字符串中首次出现的位置 , 找到返回位置 , 没-1 ;

               index是可选参数 , 如果省略该参数 , 会从字符串的首字符开始查找 ;

            ★ charAt(index) : 返回在指定位置的字符 ;

            ★ toLowerCase() : 把字符串转换为小写 ;

            ★ toUpperCase() : 把字符串转换为大写 ;

            ★ subString(index1,index2) : 返回位于指定索引index1和index2之间的字符串 , 包含1不包含2 ;

            ★ split(str) : 将字符串分割为字符串数组 ;

十二 . 数组

1 . 同java中的数组一样 , javascript中的数组也是具有相同数据类型的一个或多个值得集合 , 数组有一个名称 , 用下表区分数组中的每一个值 , 数组的下表从0开始 ;

2 . javascript中创建数组的语法如下(可以在创建的时候直接给数组赋值) : 

    ⑴ . var arr=new Array(size) ;

    ⑵ . var arr=new Array("apple","orange","banana") ;

    ⑶ . var arr=["apple","orange","banana"] ;

    也可以用下标分别为数组中的元素赋值 , 和java一样 , 不在赘述 ;

    其中 :

      new是创建数组的关键字 , Array表示数组的关键字 , size是数组的长度 , 为整数 ;

3 . 数组的常用属性和方法 :

    ★ length : 数组的长度属性 , 数组中元素最大下标 "length-1" , 可以设置或返回数组的长度 ;

    ★ join(分隔符) : 把数组的所有元素放入一个字符串 , 通过一个分隔符进行分隔 ; 

    ★ sort() : 对数组排序 , 默认升序;

    ★ push() : 向数组末尾添加一个或多个元素 , 并返回新的长度 ;

    示例 :

<script type="text/javascript">
    //声明一个字符串并赋值
    var fruit="apple,orange,peach,banana";
    //以','为基准将字符串转化为一个字符串数组
    var arrList=fruit.split(",");
    //通过分隔符'-'将数组分割,并放入一个新的字符串中
    var str=arrList.join("-")
    //输出前后对比
    document.write("分隔前:"+fruit+"<br/>");
    document.write("分割后:"+str+"<br/>");
</script>

十三 . 运算符号

1 . 与java中一样 , 在javascript中 , 常用的运算符可以分为 算数运算符 , 比较运算符 , 逻辑运算符 , 赋值运算符 ;

    ★ 算数运算符 : + , - , * , / , % , ++ , -- ;

    ★ 比较运算符 : > , < , >= , <= , == , != , === , !== ;

    ★ 逻辑运算符 : && , || , ! ;

    ★ 赋值运算符 : = , += , -= ;

    特别注意 :

    ⑴ . ==表示等于 , !=表示不等于 ;

    ⑵ . ===表示恒等 , !==表示不恒等 ;

    ⑶ . ==用于一般比较 , 在比较时会进行自动类型转换 ;

    ⑷ . ===表示严格比较 , 只要类型不匹配就返回false ;

    例如 : "1"==1 , 返回true ; "1"===1 , 返回false ;

十四 . 逻辑控制语句

答 : javascript中的逻辑控制语句也分为两类 : 条件结构 和 循环结构 ;

      1 . 条件结构 : if 和 switch 结构 ;

      2 . 循环结构 : for循环 , while循环 , do-while(循环) ;

          javascript提供了常用于对数组或者对象的属性进行操作的循环 , for-in循环 , 基本语法如下 :

         for(i in 数组名){ //javascript语句; }

         特别注意 : 

            1 . i 可以是指定的变量 , 可以是数组元素 , 也可以是对象的属性 ;

十五 . 中断循环

答 : 1 . break : 立即退出整个循环 ;

      2 . continue : 结束当次循环 , 根据判断条件决定是否进入下一次循环 ;

      示例 :

<script type="text/javascript">
    var arr=["America","Greece","Britain","Canada","China","Egypt"];
    var index=0;
    for(i in arr){
        if((arr[i].indexOf("A")!=-1)||(arr[i].indexOf("a")!=-1)){
            index++;
        }else{
            continue;
        }
    }
    document.write("包含A或a的字符串一共有 : "+index+"个");
</script>

十六 . 注释

答 : 1 . 单行注释 : //开始 , 行末结束 ;

      2 . 多行注释 : /* 开始 , */ 结束 ;

十七 . 关键字

关键字	关键字	关键字	关键字	关键字
break	case	catch	continue	default
delete	do	else	finally	for
function	if	in	instanceof	new
return	switch	this	throw	try
typeof	var	void	while	with

十八 . 保留字

保留字	保留字	保留字	保留字	保留字
abstract	boolean	byte	char	class
const	debugger	double	enum	export
extents	final	float	goto	implements
import	int	interface	long	native
package	private	protected	public	short
static	super	synchronized	throws	transient
volatile

十九 . 常用的输入输出

答 : 1 . 警告 : alert("提示内容");

      2 . 提示 : prompt("提示信息","输入框的默认信息");

      特别注意 :

          1 . prompt第二个参数如果省略 , 默认显示 undefined , 通常可以将第二个参数设置为空串'' ;

          2 . prompt取消或者直接关闭窗口都返回 null , 如果单机确定将会返回一个字符串类型的数据 ;

二十 . 语法约定

答 : 1 . jacascript区分大小写 , 大小写字母是不能互相替换的 , 几个规则如下 :

          ★ 关键字永远都是小写 ;

          ★ 内置对象以大写字母开头 ;

          ★ 对象名称通常小写 ;

          ★ 方法以匈牙利命名法命名 ;

     2 . 变量 , 对象 , 函数名称

          ★ 与java相同 , 不再赘述 ;

     3 . 分号

          ★ 允许结尾没有分号 , 如果没有分号将会视代码的结尾看做该句语句结尾 , 但出于代码规范性的考量 , 不建议在书写javascript代码时省略分号 ;

二十一 . Chrome开发人员工具

答 : 1. Elements : 用于查看和编辑当前页面中所有的HTML和CSS元素 ;

      2 . Console : 用于显示脚本中所输出的调试信息 , 或运行测试脚本等 ;

      3 . Sources : 用于查看和调试当前页面所加载的脚本的源文件 ;

      4 . Network : 用于查看HTTP请求的详细信息 , 如请求头 , 响应头及返回内容等 ;

      5 . TimeLine : 用于查看脚本执行时间 , 页面元素渲染时间等信息 ;

      6 . Profiles : 用于查看CPU执行时间与内存占用等信息 ;

      7 . Resource : 用于查看当前页面所请求的资源文件 , 如HTML , CSS样式文件等 ;

      8 . Audits : 用于优化前端页面 , 加速网页加载速度等 ;

二十二 . JavaScript中的函数

答 : 在javascript中 , 函数类似于java中的方法 , 但js中的函数使用更简单 , 不需要定义属于哪个类 , 所以也就不需要 "对象名.方法名( )" 的方式 , 直接使用函数名称来调用函数即可 ;

      ★ parseInt( ) : 将非数字的原始值转换为整数 ;

            示例 :

    var num1=parseInt("78.89");  //返回值为78

    var num2=parseInt("4567color");  //返回值为4567

    var num3=parseInt("this36");  //返回值为NaN

      ★ parseFloat( ) : 将非数字的原始值转换为浮点数 ;

            示例 :

    var num1=parseInt("4567color");  //返回值为4567

    var num2=parseInt("45.54");  //返回值为45.54

    var num3=parseInt("45.54.54");  //返回值为45.54

    var num4=parseInt("color4567");  //返回值为NaN

      ★ inNaN( ) : 检查一个值是不是非数字 , 通常用于逻辑判断 ; 

      特别注意 : 只要目标是非数字的时候 , 才会返回true , 如果是number类型的数据 , 返回的是false ;

二十三 . 自定义函数

答 : 同java一样 , javascript需要先定义函数才能调用函数 ;

      1 . 在javascript中 , 自定义函数由关键字 function , 函数名 , 一组参数及置于括号中的待执行的javascript语句组成 , 语法如下 :

      function 函数名(参数1,参数2,参数3,...){

           // javascript 语句 ;

          [return  返回值]

}

      特别注意 :

          ★ function是定义函数的关键字 , 必须有 ;

          ★ 因为js本身是弱语言类型 , 所以它的参数也没有类型检查和类型固定 , 参数可以没有 , 也可以有N个 ;

          ★ return语句用来规定函数返回的值 ;

二十四 . 调用函数

答 : 1 . 要执行一个函数 , 必须先调用这个函数 , 调用函数时 , 必须指定函数名及其后面的参数(如果有参数的话) , 函数的调用一般和时间结合使用 , 语法格式 : 

      事件名="函数名( )" ;

      示例 :

<body>
<input name="btn" type="button" value="输入次数!" οnclick="welcome(prompt('请输入次数!',''))">
<script type="text/javascript">
    function welcome(count){
        for(var i=0;i<count;i++){
            document.write("<h4>welcome!</h4>");
        }
    }
</script>
</body>

      特别提示 :

          ★ 一定要养成用表达式或者调用方法来表示参数的习惯和能力 , 例如上面的 onclick 部分 ;

二十五 . 常见的事件

1 . 一般事件

2 . 页面相关事件

3 . 表单相关事件

4 . 滚动字幕事件

5 . 编辑事件

6 . 数据绑定事件

7 . 外部事件