JavaScript 开发基础一

日子很长
115 阅读13分钟

什么是Javascript？

JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。
JavaScript语言的前身叫作Livescript。

为什么JavaScript非常值得我们学习？

  1. 所有主流浏览器都支持JavaScript。
  2. 目前，全世界大部分网页都使用JavaScript。
  3. 它可以让网页呈现各种动态效果。
  4. 做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。

JavaScript的特点：

  1. 简单、易学、易用:学习环境无外不在，只要有文本编辑器，就能编写JavaScript程序。
  2. 跨平台:IE、Navigator
  3. 事件驱动式的脚本程序设计思想
  4. 动态、交互式的操作方式

JavaScript的作用： 交互式操作、表单验证、网页特效、Web游戏 、服务器脚本开发等

JavaScript的编写环境：文本编辑器

JavaScript的执行平台：Web浏览器

JavaScript的执行方式：解释执行（由上而下）

JavaScript与Java的区别(掌握)：

  1. 它们是两个公司开发的不同的两个产品，Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合 于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能而开发 的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。
  2. JavaScript是基于对象的，而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单 的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是 一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
  3. 两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而 客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。 JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客 ，由浏览器解释执行。
  4. 两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中 变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。
  5. 格式不一样。Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码 的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML 文档就像编辑文本文件一样方便。
  6. 嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaScript使用来标识，而 Java使用 ... 来标识。
  7. 绑定和动态绑定。Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检 查，如不经编译则就无法实现对象引用的检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查。

JavaScript组成

  • ECMAScript(核心)：ECMA - 欧洲计算机组织;ECMAScript描述了语言的语法和基本对象
  • DOM对象(文档对象模型)：document object model,描述了处理网页内容的方法和接口
  • BOM对象(浏览器对象模型)：browser object model,描述了与浏览器交互的方法和接口

JavaScript语句引入

  1. 在html内部插入JavaScript,必须使用script标签,标签会告诉html在何处开始和结束
案例：在页面中输出一句话"Hello Script"，在以后调错时会经常用到这个方法alert()
	<script type="text/javascript">
	    alert("Hello JavaScript！")
	</script>
  1. 从html外部引入JavaScript文件(开发中最常用的方法，建议熟练使用此方法)
<script src="js/hello_js.js" type="text/javascript" charset="utf-8"></script>
  1. 注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

JavaScript注释：

  • 注释的作用是提高代码的可读性，帮助自己和别人阅读和理解你所编写的JavaScript代码，注释的内容 不会在网页中显示。注释可分为单行注释与多行注释两种。
// js中的单行注释
/* js中的多行注释 */
  • 为了方便阅读，注释内容一般放到需要解释语句的结尾处或周围。

JavaScript的格式

  1. JavaScript区分大小写；
  2. JavaScript脚本程序须嵌入在HTML文件中；
  3. JavaScript脚本程序中不能包含HTML标记代码；
  4. 每行写一条脚本语句，语句末尾以加分号结束；
  5. JavaScript脚本程序可以独立保存为一个外部文件，但其中不能包含标签。

JavaScript输出：JS中没有任何打印或者输出的函数;但可以通过以下不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 console.log() 写入到浏览器的控制台。

JavaScript语法

javaScript是一个程序语言，语法规则定义了语言结构
JavaScript是一个脚本语言，轻量级但功能强大的编程语言

常量(即：字面量):在程序执行过程中不会发生改变的量，常见的常量如下：

布尔型常量 true false			
整数常量 231  898  0x5ff(0X5ff)
浮点型常量  3.14   .34	3.23e+3  -3.23E-3
字符串常量  "My JavaScript"	"您好，JavaScript"
    alert中使用的转义字符   \n(换行)  \t(制表符)  \r(返回)  \’(单引号 )  \”(双引号 )  \\(反斜杠 )
数组常量	 hobby=["听音乐","看电影"]

变量

变量的概念:

  1. 从字面上讲，就是在程序执行过程中可以发生改变的量
  2. 从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做宾馆的房间，可以用A001,B002等名称代表不同房间，A001就是房间的名字（也就是变量的名字）。

变量的声明：var 变量名 = 变量的初始化值;

变量的命名规则:

  1. 由数字、字母、下划线(_)及美元符号($)组成,数字不能开头
  2. 区分大小写
  3. 不能是js中的关键字或保留字(js使用的一些具有特殊意义的英文单词，如：var)
  4. 注意：在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量；变量虽然也可以不声明，直接使用，但不规范，尽量先声明，再使用

变量的作用域(位置)

  • 全局变量：在函数外声明的变量，在整个js脚本中的任何位置都可以被引用，一般都声明在脚本文件的顶部

  • 局部变量：在 JavaScript 函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问它(该变量的作用域是局部的)；您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量，只要函数运行完毕，本地变量就会被删除。

  • 注：如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明，即使它在函数内执行

变量的生命周期

  1. JavaScript 变量的生命期从它们被声明的时间开始。

  2. 局部变量会在函数运行以后被删除。

  3. 全局变量会在页面关闭后被删除。

数据类型的分类

原始数据类型：存储在栈(stack)中的简单数据段，它们的值直接存储在变量访问的位置；简单说，就是一个字面值，它是不可变的

数字（Number）类型:整型(12,34,45)、浮点型(12.34,.001)  注：NaN(Not a Number):代表非数字值得特殊值(如: 8/0,var b = number.NaN)  Infinity(无穷)
文本（String）类型:字符串常量("Hello Js"、"您好")、转义字符("\t" "\\")
布尔（Boolean）类型:有且只有两个值  true 和 false
undefined(未定义)类型:已定义但没有被赋值得量  如：var a; alert(a);
Null(空)类型:不存在的量         注：undefined类型从null类型派生出来的，因此 null==undefined得到的结果是true

引用数据类型：存储在堆(heap)中的对象，存储在变量出的值是一个引用，指向存储对象的内存处；也就是说，遇到引用值，处理的就是对象

对象（Object）类型:常用的js对象有Boolean Number Array String Date Math RegExp(正则)，js中所有的对象都继承自Object对象
            实例化(创建)一个对象  var obj = new Object();
可以使用instanceof运算符来判断对象的类型(instanceof只能用作引用类型),语法: "hello" instanceof String;

数据类型转换及typeof操作符

Js中数据类型的转换

js作为一门弱类型的编程语言，声明时直接使用var声明变量即可，系统会根据值得类型进行类型得自动匹配，即: Js拥有动态类型。

数据类型的转换有两种:
	1. 隐式转换 借助+ -符号  如: 12 + "" 会将number类型隐式转换成string类型 ; true+10
	2. 显示转换 借助一些内置函数或方法实现 如: toString()方法  parseInt()、parseFloat():String类型的数值可以调用
		例:其它数据类型转换成布尔型:一般有值就是true,没有值就是false
	        var a = Boolean(""); //false  
	        var b = Boolean("Hello"); //true
	        var c = Boolean(21);  //true
typeof(arg)操作符:用来检测变量的数据类型，就一个参数(arg参数为自定义的变量)
typeof一般只能返回如下几个结果："number数字"、"string字符串"、"boolean布尔值、"object(对象 数组 和 null)"、"function函数"和"undefined未定义"
	 例：判断一个变量是否存在 if(typeof(a)!="undefined"){alert(true)} ,这里不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错
	 注意:引用数据类型使用typeof()时永远返回object类型，这就需要用到instanceof来检测某个对象是不是另一个对象的实例
  1. 各种数据类型转换为字符串
toString()方法   例：var a = 10;  var b = a.toString();
String()方法       例： var a = 32 | true | false ;  var str = String(a);
  1. 各种数据类型转换为数值
parseInt()、parseFloat()方法:String类型数值作为参数调用才能正确运行，其它参数对象返回NaN
        例：var str = "123.45";   var str2 = "abc";
            var b = parseInt(str);     //123
            var c = parseFloat(str);   //123.45
            var d = parseInt(str2);    //NaN
Number()方法	
        例：var a = Number(new Object());   //NaN
            var b = Number(false);          //0
            var c = Number(undefined);      //NaN
            var d = Number("hello");        //NaN
            var e = Number("12.3");         //12.3
  1. 各种数据类型转换为布尔值 一般有值得就是true,没有值得就是false
var a = Boolean("");      	//false
var b = Boolean("Hello");       //true
var c = Boolean(12);		//true
  1. typeof操作符:使用 typeof 操作符来检测变量的数据类型，只有一个参数；typeof一般只能返回如下几个结果："number数字"、"string字符串"、"boolean布尔值、"object(对象 数组 和 null)"、"function函数" 和 "undefined未定义"
举例：判断一个变量是否存在 if(typeof(a)!="undefined"){alert(true)} ,这里不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错
注意：在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型
     的对象，它都返回 “object”。这就需要用到instanceof来检测某个对象是不是另一个对象的实例。

表达式的概念：是由运算元和运算符(可选)构成，并产生运算结果的语法结构。

运算符

  • 算术运算符 + - * / %(取余) ++(递增) --(递减)
  • 赋值运算符 =　+=　-=　*=　/=　%=(取余)
  • 关系(比较)运算符 ==　　!=　　= = =（值及类型）　　!==（值及类型） <　　<=　　>　　>=
注意: 1. 比较运算符返回得结果是一个Boolean值
      2. 数字比较不用多说，如果是字符串比较(含数字字符串如："25"<"18"),则按照字母的码值来比较(前面的比后面的小，小写的都比大写的大)
      3. =  ==  ===区别
            = ： 赋值运算符 var a = 12;
            ==: 比较值是否相等(js为弱类型语言，字符串"25"和数字25比较结果为true)
            ===:比较值和数据类型是否相等(类型不同，字符串"25"和数字25比较结果为false)
  • 逻辑运算符 &&(逻辑与)　　||(逻辑或)　　!(逻辑非)
注：1. &&：有一个不是逻辑值，只要第一个操作数的值为flase，则返回第一个操作数的值flase，否则，返回第二个操作数的值(true、字符或非零的数字)
    2. ||：有一个不是逻辑值，只要第一个操作数的值为true、字符或非零的数字，则返回第一个操作数的值，否则，返回第二个操作数的值
  • 条件运算符:三元运算符
语法: (条件表达式)?表达式条件成立输出的值:表达式条件不成立输出的值;
举例: var a = 10,b = 20;    var maxNum = (a>b)?a:b;

  • 运算符优先级:小括号优先级最高，赋值运算符优先级最低

      	.	
        类型 	    运算符 
  	括号	      () 
  	一元 	 ! - ++ -- typeof
  	算术 	    * / + -  
  	位位移 	    << >> >>>  
  	比较 	 < <= > >= == !=  
  	位逻辑 	    &  ^  |  
  	逻辑         && ||  
  	三元条件       ? 
  	赋值 	 =  +=  -=  *=  /=  %=

特殊运算符的介绍

1、new运算符：创建对象（实例） 　　　

语法：对象名称=new 对象类型（参数）
举例： var str = new String();//创建一个无参的对象

2、this运算符：表示当前对象

语法：this[.属性]
举例：<marguee onmouseover="this.stop();" onmouseout="this.start();">滚动标签设置鼠标事件</marquee>

拓展(详见图片资料或内存图):

为什么会有栈内存和堆内存之分？

通常与垃圾回收机制有关:目的是为了使程序运行时占用的内存最小。
1. 当一个方法执行时，每个方法都会建立自己的内存栈，在这个方法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈也将自然
销毁了。因此，所有在方法中定义的变量都是放在栈内存中的；
2. 当我们在程序中创建一个对象时，这个对象将被保存到运行时数据区中，以便反复利用（因为对象的创建成本通常较大），这个运行时数据区就是堆内存。堆内
存中的对象不会随方法的结束而销毁，即使方法结束后，这个对象还可能被另一个引用变量所引用（方法的参数传递时很常见），则这个对象依然不会被销毁，只有
当一个对象没有任何引用变量引用它时，系统的垃圾回收机制才会在核实的时候回收它。

栈（操作系统）：由操作系统自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。

堆（操作系统）： 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表

avatar
文章
阅读
粉丝