JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。
JavaScript的特点:
1. 简单、易学、易用;
2. 跨平台;IE、Navigator
3. 符合ECMA(欧洲计算机制造协会)标准,可移植;
4. 事件驱动式的脚本程序设计思想;
5. 动态、交互式的操作方式。
JavaScript的作用:
1. 交互式操作;
2. 表单验证;
3. 网页特效;
4. Web游戏
5. 服务器脚本开发等。
1. JavaScript/IE3.0、JavaScript1.2/IE4.0;
2. 微软允许用户自行设置对JavaScript处理模式。
JavaScript与Java的区别体现在:
首先,它们是两个公司开发的不同的两个产品,Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。
其次,JavaScript是基于对象的,而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
第三,两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户,由浏览器解释执行。
第四,两种语言所采取的变量是不一样的。Java采用强类型变量检查,即所有变量在编译之前必须作声明。JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。
第五,代码格式不一样。Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编辑文本文件一样方便。
第六,嵌入方式不一样。在HTML文档中,两种编程语言的标识不同,JavaScript使用<script>...</script>来标识,而Java使用<applet> ... </applet> 来标识。
第七,静态绑定和动态绑定。Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查,如不经编译则就无法实现对象引用的检查。JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查。
Web三大基础
1、HTML---- 控制文本内容结构
2、CSS------控制样式
3、JavaScript(网景 公司--最早开发出的浏览器Netscape)添加行为,可以实现特效。和Java无任何关系。
和Opera浏览器一样,是收费的。但后来Microsoft发布win98,OS操作系统自带浏览器,网景公司市场份额很低,倒闭前整理了浏览器源代码,成立了Mozilla(谋智)组织,也将Javascript标准化。Mozilla项目启动。开发了前期叫凤凰,后来改名Firefox,Chrome。
最早IE支持Javascript,微软出了VBscript。
JavaScript 标准化ECMA Script
和Java没有任何关系,当时Java很火,名字起的像一点,利于市场宣传。
1、Javascript简称JS,是弱类型的解释性语言,不像C/C++/Java强类型[声明、使用变量类型都是语法强制限制规定的],不需要编译。
而是通过解释器,直接运行。浏览器中带有JS解释器(V8比较有名)。
2、缺:动态解释执行,比编译后执行的C/C++速度慢。
3、长处:很容易判断 变量类型
4、JS也支持面向对象。
5、JS可嵌入在HTML中(声明<scripttype="text/javascript">......</script>中),也可单独写成XXX.js文件,包含在网页中
JavaScript的格式:
1. JavaScript区分大小写;
2. JavaScript脚本程序须嵌入在HTML文件中;
3. JavaScript脚本程序中不能包含HTML标记代码;(双引号)
4. 每行写一条脚本语句;
5. 语句末尾可以加分号;
6. JavaScript脚本程序可以独立保存为一个外部文件,但其中不能包含<script></script>标签。
Javascript
1.变量的声明和使用
var a = 1;
var b = "ljh"; //这些都是合法的--声明变量
a = "ljheee";
var message = b + a; //当行注释,支持串的拼接。
可以进行“不兼容”赋值,var 声明的变量类型比较宽松,由解释器动态地改变内存空间。
凡是数值,不区分整数和小数,都是64位的。
先声明后使用。
2.定义和使用函数
<scripttype="text/javascript"> --此声明放在HTML页面<head>、<body>中都可以。
var name = "ljheee";
var age = 22;
var message = name + age; //字符串拼接,{单行注释}
function functionName(){ //()内可带参数,无返回值。
alert(message); //参数前类型弱化了,可以不带类型
}
</script>
函数中可以,嵌套定义函数。
函数,是在事件触发时执行。
如:
<body>
<!--给button添加点击事件onclick,点击时触发执行functionName()-->
<button type="button" name="button"onclick="functionName();" >点击 </button>
</body>
....................................................................................................................................................
function functionName(e){//()内可带参数,无返回值。
alert(message+e.name);
}
<body>
<!--this.name,是指该对象[button]的名字-->
<button type="button" name="button"onclick="functionName(this.name);" >点击 </button>
</body>
..........................................................................................................................................................
function sayHello(){ //getElementById--通过id获取body 内元素(把HTML当成文档,就是在遍历文档树模型)
var nick =document.getElementById("nickName").value; //获取id="nickName" 的属性值,赋给变量
document.getElementById("result").innerHTML = "你好:" +nick; //获取id="result"的元素,并替换HTML的值
}
<body>
<div class="">
<input type="text"id="nickName" name="name" placeholder="输入昵称" />
</div>
<button type="button"name="button" onclick="sayHello()" >点击 </button>
<div class="">
<p id="result"> 显示结果 </p> <!--当点击button,此行显示输入框中输入的值-->
</div>
</body>
innerHTML = "你好:" +nick; 还可以嵌入脚本,嵌入html标签,但注意双引号中,不要再使用双引号。
下面是完整例子的源代码---功能是:在输入框中输入内容,点击button,会显示在一个<p>段落中;在<textarea>中输入值,可以提示剩余输入书
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS111</title>
<script type="text/javascript">
var name = "ljheee";
var age = 22;
var message = name + age; //字符串拼接,{单行注释}
function functionName(e){ //参数类型弱化
alert(message+e.name);
}
function sayHello(){ //getElementById--通过ID获取body 内元素
var nick = document.getElementById("nickName").value; //获取id="nickName" 的属性值,赋给变量
document.getElementById("result").innerHTML = "你好:" +nick; //获取id="result"的元素,并替换HTML的值
}
function showCounter(text){
var size = text.length;
document.getElementById("counter").innerText=140-size;
}
</script>
</head>
<body>
<div class="">
<input type="text" id="nickName" name="name" placeholder="输入昵称" />
</div>
<button type="button" name="button" onclick="sayHello()" >点击 </button>
<div class="">
<p id="result"> 显示结果 </p>
</div>
<div class="">
<textarea name="name" rows="8" cols="40" onkeyup="showCounter(this.value)"> </textarea>
<span id="counter"> 140 </span>
</div>
</body>
</html>