JavaScript基础(一)

1,什么是javascript

javaScript 是因特网上最流行的脚本语言,它存在于全世界所有 Web浏览器中,能够增强用户与Web站点和Web应用程序之间的交互。

脚本语言:脚本语言又被称为扩建的语言,或者动态语言,是一种解释型语言,由解释器来运行,用来控制软件应用程序,脚本通常以文本保存,只在被调用时进行解释或编译

2,javascript的作用

作用:

1. 可以通过js去操作css

2. 可以通过js去对表单数据进行校验。

3. 可以通过jshtml代码动态操作

3,javascript历史

Netscape(网景) 发明了JavaScript1997年由来自由来自 NetscapeSun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262,该标准定义了名为ECMAScript的全新脚本语言。

从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript实现的基础。

ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性、方法和对象。其他语言可以实现ECMAScript来作为功能的基准,JavaScript就是这样:


4,javascript组成

javascript的核心ECMAScript描述了语言的语法和基本对象。

一个完整的javaScript实现是由下面三个不同部分组成的。

导入javascript方式

1,html页面中直接插入javascript

如需在 HTML 页面中插入 JavaScript,请使用<script>标签。

<script> </script>会告诉JavaScript在何处开始和结束。

<script> </script>之间的代码行包含了JavaScript

例如:


那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。

注意:<script>标签可以出现在html页面的任意位置,但实际操作中,一般会写在<head>标签中。.

但是不绝对,在开发中有可能将JavaScript标签放置到整个html页面最后,因为解释性语言是从上到下,从左到右执行的,如果上面head中的JavaScript代码需要用到下面的一些标签,在解释的时候下面还没有加载,就不可能找得到。


扩展:

1,编译性语言:把所有东西都加载到内存里面了再去运行。

2,解释性语言:读一条执行一条,速度会快一些。

Java也是解释性语言,java虽然需要编译,但是是编译完之后再解释。

JavaScript是纯解释性的语言,就是你写的时候就一条条加载。所以在写解释性语言的时候,如果能用一条语句搞定的就不要用多条,因为效率要高。


2,引入外部的javascript(使用<script src=””>

有时,你也许希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。

为了达到这个目的,你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

例如:


注意:外部的js文件中不能包含<script>标签。

在导入外部js文件的<script>标签中不能在写javascript代码。

例如:



javascript基础语法

javascript基础语法-变量声明:

变量是用于存储信息的容器

javascript中的变量与我们在java中的变量一样。

javascript中使用 var运算符(variable的缩写)加变量名定义的

JavaScript 变量名称的规则:

变量对大小写敏感(y Y 是两个不同的变量)

变量必须以字母或下划线开始 

HTML,CSS对大小写不敏感,但是由于 JavaScript 对大小写敏感,变量名也对大小写敏感。

Java是强类型语言:就是声明完是什么类型就是什么类型,在内存中是固定的。

JavaScript是一种弱类型语言:对类型的概念很模糊,一个变量可以接受多个完全不同类型的值,后面的值覆盖前面的。



javascript基础语法-数据类型:

ECMAScript中,变量可以存在两种数据类型,即原始类型与引用类型。

原始类型

原始类型,可以理解成是一个值类型。简单说,就是一个字面值,它是不可变的,例如: 10  “abc”

ECMAScript有五种原始类型

String  javascript中字符串字符串字面值,可以使用单引号或双引号声明。

Number 在javascript中任何数字都看成是Number类型,它即可以表示32位整数,也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。

Boolean 它有两个值truefalse.

Undefined:该类型只有一个值undefined.表示的是未初始化的变量

Null 该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true.

 

对变量或值调用 typeof运算符将返回下列值之一:

undefined - 如果变量是 Undefined 类型的

当声明好变量后,没有给变量赋值,则变量类型为undefined类型

undefined类型怎么判断?if(a == undefined)    注意:千万不要把undefined加上双引号。

boolean - 如果变量是 Boolean 类型的

number - 如果变量是 Number 类型的

string - 如果变量是 String 类型的

object - 如果变量是一种引用类型或Null类型的

注意您也许会问,为什么 typeof运算符对于null值会返回"Object"。这实际上是JavaScript最初实现中的一个错误,然后被ECMAScript沿用了。现在,null被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

引用类型

引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。

从传统意义上来说,ECMAScript 并不真正具有类

ECMAScript 定义了对象定义,逻辑上等价于其他程序设计语言中的类。

对象是由 new 运算符加上要实例化的对象的名字创建的

var obj=new Object();

Object对象自身用处不大,但是 ECMAScript 中的 Object 对象与Java中的java.lang.Object相似,ECMAScript中的所有对象都由这个对象继承而来,Object对象中的所有属性和方法都会出现在其他对象中

常用的javascript对象有Boolean,Number,Array,String,Date,Math,RegExp.

可以使用instanceof运算符来判断对象的类型。


javascript基础语法---四种创建数组的方式

在javascript中没有集合这一概念,只有数组这一存储数据的容器,下面列举四种在javascript中创建数组的方式:

1. new Array() 默认长度为0

2. new Array(n)指定长度

3. new Array(“a”,”b”,”c”)创建数组时直接指定值

4. var arr=[1,2,3,4];

其中前三种是使用javascript中内置对象Array的构造函数的三种不同方式来创建的,第四种没有用到Array对象来创建数组对象。

Js中的数组元素可以是任意类型,并且js中的数组长度也是可变的。例如:new Array(123,"aaa",true);也是可以的

例如 var arr1 = new Array(); arr["name"] = "tom"   alert(arr["name"]) 也是可以的


javascript基础语法---三种定义函数的方式


   1)正常方式:function mysum(num1,num2){return num1+num2;}

        function mysum(num1,num2){
		return num1 + num2;
		}
	var myresult = mysum(100,200);
	alert("myresult="+myresult);


   2)构造器方式:new Function("num1","num2","return num1+num2;") 

注意:Function 为大写    是javascript中的一个内置对象

	var youresult = new Function("num1","num2","return num1+num2");
	alert( youresult(1000,2000) );


   3)直接量或匿名或无名方式:var mysum = function(num1,num2){return num1+num2;} 

由于此种方式为匿名函数,因此声明了一个函数名以便调用
	var theyresult = function(num1,num2){
	return num1 + num2;
 	}
	alert( theyresult(10000,20000) );



问题:如果我们在调用函数时,使用add(1,2,3,4)是否会出现问题哪?

如果是在java中我们这样调用一定会有问题的,但是对于javascript来说,是不会有问题的。

简单的说,也就是函数调用时传递的参数不一定要与函数声明时的参数个数一致。

问题:如果调用时传递的参数与函数定义时参数个数不一致,那么我们在函数中如果获取多余的参数哪?

javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数。

<script type="text/javascript">
	//创建函数
	function add(a, b) {
		//在函数中如果要获取所有参数列表中的信息可以使用argument来操作
		for(var i=0;i<arguments.length;i++){
			alert(arguments[i]);
		}
	}
	add(1,2,3,4);
</script>

函数参数与返回值

java中我们定义一个方法,如果这个方法有返回值,我们必须做到以下两点:

1. 在方法声明时,必须声明其返回值类型,如果无返回值需要使用void

2. 方法有返回值,我们在方法中需要使用return来返回结果。

那么我们在javascript中应该怎样处理一个函数的返回值哪?

对于javascript来说,我们不必须在创建函数时,来声明其返回值类型,无返回值也不需要使用void来声明,但是,如果一个函数要想返回结果,我们在函数中必须使用return来返回结果。

<script type="text/javascript">
	//创建函数
	function add(a, b) {
		//返回a与b的和	
		return a+b;
	}
	//在调用函数时,我们就可以直接使用一个变量来接收函数的返回结果
	var sum=add(1,2,3,4);
	alert(sum)


javascript基础语法-自定义对象

数组,Date对象,Number,Math类这些都是javascript的内置对象,我们可以直接使用。但是有时候我们需要根据需求自己定义一些对象供我们使用,这就是自定义对象。
在javascript中没有类这一概念,只要有函数即可创建对象。
下面列举四种创建自定义对象的方式:

方式一:无参构造函数 

function Person() {
	window.document.write("constructor()<br>");
}

var person = new Person();   如果在函数名的前面加上一个new关键字,就是创建了一个对象,反之则是调用这个函数
//定义属性
person.name = "jack";
person.age = 23;
//定义方法
person.work = function() {
	window.document.write("person working...<br/>");
};
//获取构造函数
window.document.write(person.constructor + "<br/>");

window.document.write(person.name + "," + person.age + "<br/>");
person.work();

方式二:有参构造函数   类似java中的构造方法

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.work = function() {
		alert(this.name + ":" + this.age);
	}
}

var person = new Person("jack", 28);
person.work();

JS在new Person()会做如下事:

1,创建一个新对象。

2,this指向新对象。

3,执行构造方法中的代码。

4,返回新对象。



方式三:object函数创建对象    javascript定义了一个无参的object函数

/*
 * 自定义对象Object方式
 *
 *  */
var person = new Object();
person.name = "jack";
person.age = 28;
person.sayHello = function() {
	document.write(this.name + ":" + this.age);
}
person.sayHello();

方式四:字面量方式创建对象

var person={
name:"李四",
age:88,
eat:function(){
alert("eating...");
}
		};
alert(person.name+person.age);
person.eat();



javascript基础语法-类型转换

ECMAScript为开发者提供了大量的类型转换方法。

大部分类型具有进行简单转换的方法,还有几个全局方法可以用于更复杂的转换。

Boolean 值、数字和字符串的原始值它们是伪对象,这意味着它们实际上具有属性和方法。

转换成字符串

toString()方法.

转换成数字

ECMAScript 提供了两种把非数字的原始值转换成数字的方法,即 parseInt()parseFloat()。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,它们才能正确运行;对其他类型返回的都是NaN

强制类型转换

使用强制类型转换可以访问特定的值。

ECMAScript 提供了三种强制类型转换:

1. 把给定的值转换成Boolean类型

2. 把给定的值转换成数字

3. 把给定的值转换成字符串


测试Boolean型的强制类型转换


测试强制转换成数字类型


测试强制转换成字符串


强制类型转换总结

1,强制转换成Boolean

格式: Boolean()

数字:0true,0false.

对于对象,如果它不为null,就为true.

对于null,””未定义的数据,它们全为false.

2,强制转换成数字

格式:Number()

如果是数字,就直接转换成数字

如果是true,false,转换成1,0   null也是0




javascript基础语法-运算符与表达式

一元运算符

++  自加  --自减  void运算符

void 运算符对任何值返回undefined。该运算符通常用于避免输出不应该输出的值,例如,从HTML<a>元素调用JavaScript函数时。要正确做到这一点,函数不能返回有效值,否则浏览器将清空页面,只显示函数的结果。例如:

<a href="javascript:window.open('about:blank')">Click me</a>

如果把这行代码放入 HTML页面,点击其中的链接,即可看到屏幕上显示"[object]"。这是因为window.open()方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串。要避免这种效果,可以用void运算符调用window.open()函数:

<a href="javascript:void(window.open('about:blank'))">Click me</a>

这使 window.open()调用返回undefined,它不是有效值,不会显示在浏览器窗口中。

提示:请记住,没有返回值的函数真正返回的都是 undefined

 

逻辑运算符

逻辑运算会有三种 NOT  AND  OR

在学习各种逻辑运算符之前,让我们先了解一下 ECMAScript-262 v5 规范中描述的 ToBoolean 操作。

 

参数类型

结果

Undefined

false

Null

false

Boolean

结果等于输入的参数(不转换)

Number

如果参数为 +0, -0 NaN,则结果为false;否则为true

String

如果参数为空字符串,则结果为 false;否则为true

Object

true

 

逻辑NOT运算符

如果运算数是对象,返回 false

如果运算数是数字 0,返回true

如果运算数是 0 以外的任何数字,返回false

如果运算数是 null,返回true

如果运算数是 NaN,返回true

如果运算数是 undefined,发生错误


逻辑AND运算会

运算数 1

运算数 2

结果

true

true

true

true

false

false

false

true

false

false

false

false

 

逻辑OR运算符

运算数 1

运算数 2

结果

true

true

true

true

false

true

false

true

true

false

false

false

 

 

 

加性运算符

某个运算数是 NaN,那么结果为NaN

-Infinity -Infinity,结果为-Infinity

Infinity -Infinity,结果为NaN

+0 +0,结果为+0

-0 +0,结果为+0

-0 -0,结果为-0

不过,如果某个运算数是字符串,那么采用下列规则:

如果两个运算数都是字符串,把第二个字符串连接到第一个上。

如果只有一个运算数是字符串,把另一个运算数转换成字符串,结果是两个字符串连接成的字符串。

 

关系运算符

关系运算符有>(大于),<(小于) >=(大于等于) <=(小于等于) ,它们的运算结果返回的是一个boolean值。

常规比较

如果是数学,那么比较与我们在java中操作一样。

如果是两个字符串使用关系运算符操作,那么我们可以简单理解成是按照字母的码值来比较。比较容易理解的是根据字母顺序,在前的字母比在后的小,所有的小写字母都大于大写字母。

比较数字或字符串

如果两个数字字符串比较,例如:”23”<”3”,它们也是按照数字在码表中的码值来比较.

如果一个是数字一个是字符串,那么会将字符串转换成数字在进行比较。

 

等性运算符

ECMAScript提供了两套等性运算符:等号与非等号用来处理原始值,全等号与非全等号来处理对象。

 

执行类型转换的规则如下:

· 如果一个运算数是 Boolean值,在检查相等性之前,把它转换成数字值。false转换成0true1

· 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。

· 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。

· 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。

在比较时,该运算符还遵守下列规则:

·  nullundefined相等。

· 在检查相等性时,不能把 nullundefined转换成其他值。

· 如果某个运算数是 NaN,等号将返回false,非等号将返回true

· 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。

全等号由三个等号表示(===),只有在无需类型转换运算数就相等的情况下,才返回true

非全等号由感叹号加两个等号(!==)表示,只有在无需类型转换运算数不相等的情况下,才返回true



javascript基础语法-条件语句

if语句

javascrip中的if语句,与我们在java中使用基本相同,例如:

if (i > 30) {

alert("大于 30");

}else {

alert("小于等于 30");

}

 

switch语句

switch语句也与我们在jdk1.7中使用相同,也就是说,它可以直接判断字符串类型

var BLUE = "blue", RED = "red", GREEN  = "green";

 

switch (sColor) {

  case BLUE: alert("Blue");

    break;

  case RED: alert("Red");

    break;

  case GREEN: alert("Green");

    break;

  default: alert("Other");

}

 

 Javascript基础语法-循环语句

javascript中也存在循环语句for while do-while,基本与在java中使用相同.

for示例

var iCount = 6;

for (var i = 0; i < iCount; i++) {

  alert(i);

}

注意:在声明变量归我们使用var

while示例

var i = 0;

while (i < 10) {

  i += 2;

}

 

do-while示例

var i = 0;

do {

i += 2;

} while (i < 10);

注意:while后面的分号

 




  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值