Javascript入门
一、JavaScript简介
1、什么是JavaScript
JavaScript是一种网页编程技术，由Netscape公司开发，大部分使用者将它用于创建动态交互网页，有时候也简称js。JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法。
JavaScript是一种使用简单，功能强大的编程语言，它是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用户之间的交互性能。
它是与Java完全不同的一种语言，虽然在结构和语法上与Java类似，但是，它只是函数式的语言。
要运行JavaScript也是非常简单，只需要有浏览器就行了，但是客户端的JavaScript必须要有浏览器的支持。目前大部分的浏览器默认就已经支持JavaScript了，所有我们不需要向java那样还有搭建运行环境，直接在浏览器上面就可以运行了。
2、它与java是什么关系
也许一开始你就已经有这个疑问了：JavaScript和Java名字这么相似，它们之间有什么关系呢？事实上它们之间一点关系都没有的，两者输入完全不同的语言，它们两个的区别是非常大的。
一个是客户端的语言，一个是服务器端语言；
JavaScript是Netscape公司开发，而Java是SUN公司开发的。
JavaScript是解析性语言，Java是编译型语言；
JavaScript必须嵌入HTML运行，Java需编译后，由JVM执行；
JavaScript是弱类型语言，不需要生命变量的类型，Java是强类型语言，任何变量都需要明确定义类型；
JavaScript功能仅仅是浏览器对象操作，而Java几乎是无所不能的。
那么它们两个就没有任何相同之处吗？还真的是没有什么相同的，如果硬要说它们俩的关系就是名字有点像，还有就是语言类似而已，这点对我们程序员来说就非常好了，有了java的语法基础JavaScript是很容易学习的。
二、JavaScript的特点和适用范围
1、JavaScript的特点如下：
简洁易用，与Java有类似的语法。
可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
解释执行，事先不编译，逐行执行，无需进行严格的变量声明。
基于对象内置大量现成对象，编写少量程序可以完成目标。
2、JavaScript的使用范围
适合做哪些事情：
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器对象的调用
- 浏览器事件的触发
- 网页特殊显示效果制作
不适合做哪些事情：
- 大型应用程序
- 图像、多媒体处理
- 网络实时通讯应用
基本语法和基本对象
一、基本语法
javaScript需要嵌入到HTML代码中，然后在浏览器中运行，HTML嵌入代码格式如下：
| <script type="text/javascript"> //在这里写js代码。 </script> |
我们可以在HTML的任何位置嵌入javaScript的代码，但是习惯上会在网页的head标签或者网页最后嵌入，这里我们就在head标签中嵌入。
前面说了JavaScript和Java的语法是差不多的，所以这里就简单说一下，大家可以自己上机测试一下.
1、变量的声明和赋值
JavaScript不需要使用具体的数据类型来声明变量，定义变量
| var count; |
赋值
| count = 5; |
其中，"var" － 用于声明变量的关键字，"count" － 变量名。
也可以同时声明和赋值变量
| var count = 10; |
声明多个变量
| var x, y, z = 10; |
2、运算符号
运算符那就和java一模一样了。运算符就是对一个或多个变量或值（操作数）进行运算，并返回一个新值，根据所执行的运算，运算符可分为以下类别：
- 算术运算符：+、-、 * 、 / 、%、++、--、-(求反)
- 比较运算符：==、!=、>、>=、<、<=
- 逻辑运算符：&&、||、！、&、|
- 赋值运算符：=
3、逻辑控制语句
逻辑控制语句也和java一样，下面就简单描述一样。
if条件语句
| if(条件) { //JavaScript代码; } else { //JavaScript代码; } |
switch多分支语句
| switch (表达式) { case 常量1 : JavaScript语句1; break; case 常量2 : JavaScript语句2; break; ... default : JavaScript语句3; } |
for、while循环语句
| for(初始化; 条件; 增量) { 语句集; } while(条件) { 语句集; } |
例子：
| <script type="text/javascript"> if(i>400){ alert("大于400"); }else{ alert("小于400"); } //循环 for(var i=0;i<100;i++){ alert(i); } </script> |
4、数值类型转换
JavaScript是弱类型语言，变量在声明的时候都不需要定义数据类型，但是会根据你赋值的值类型来决定数据类型的。如果要把一个数值转为数字类型，那么我们还需要调用JavaScript的内置函数实现。
（1）parseInt ("字符串")
将字符串转换为整型数字
如: parseInt ("86")将字符串“86”转换为整型值86
（2）parseFloat("字符串")
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45”转换为浮点值34.45
二、函数定义
1、创建函数
| function 函数名( 参数1,参数2，… ) { 语句; } |
示例：
| function show(){ alert('hello'); } |
2、函数调用
可以直接调用:
| show(); |
一般使用事件驱动的方式调用，可以为HTML任何一个标签绑定事件，例如
| <body onload="show()"> <p onclick="show()">你好</p> <input type="button" onclick="show()" value="普通"> </body> |
可以为p标签绑定事件，也可以为body标签或者input标签绑定事件，代码如下：
| <body onload="show()"> <p onclick="show()">你好</p> <input type="button" onclick="show()" value="普通"> </body> |
body标签我们绑定了onload事件，所以也没一加载就会调用函数，p标签和input标签都绑定了单击事件，你可以单击p标签或者input标签也可以调用这个函数。
3、带参数函数和有返回值的函数
由于JavaScript没有明确的数据类型，所有为函数定义参数时不需要定义参数的类型。例子如下：
| //定义有参数 function sum(a,b){ var result=a+b; alert("sum="+result); } |
另外函数如果有返回值，也不需要修改函数的定义，如果该函数有返回值，那么你在函数体中使用return返回就可以了。
| function test(a,b){ var result=a+b; return result; } |
三、基本对象
前面我们说JavaScript是基于对象的语言，在浏览器窗口中就已经有对象了，这些对象可以直接使用。如下图所示：
所有的对象都是window的子对象。浏览器对象的分层结构如下：
1、Window对象
常用的属性有：
- status 指定浏览器状态栏中显示的临时消息
- screen有关客户端的屏幕和显示性能的信息
- history 有关客户访问过的URL的信息
- location有关当前URL 的信息
- document表示浏览器窗口中的HTML文档
常用的方法
- alert ("提示信息")显示一个带有提示信息和确定按钮的对话框
- confirm("提示信息“) 显示一个带有提示信息、确定和取消按钮的对话框
- open ("url","name", "feature")打开具有指定名称的新窗口，并加载给定URL 所指定的文档；如果没有提供 URL，则打开一个空白文档
- close() 关闭当前窗口
- showModalDialog( )在一个模式窗口中显示指定的HTML文档
- setTimeout("函数",毫秒数) 设置定时器：经过指定毫秒值后执行某个函数
2、history 对象
- back( )加载History 列表中的上一个 URL
- forward( )加载History 列表中的下一个 URL
- go("url" or number)加载History 列表中的一个 URL，或要求浏览器移动指定的页面数
3、location 对象
属性：
- host设置或检索位置或URL 的主机名和端口号
- hostname设置或检索位置或URL 的主机名部分
- href 设置或检索完整的 URL 字符串
方法：
- assign("url")加载URL 指定的新的 HTML 文档
- reload()重新加载当前页
- replace("url") 通过加载 URL 指定的文档来替换当前文档
示例如下：
在html中绑定函数：
| <input type="button" onclick="showscreen()" value="获得窗口对象的分辨率"> <input type="button" onclick="back()" value="回退"> <input type="button" onclick="forward()" value="前进"> <input type="button" onclick="refresh()" value="刷新"> <input type="button" onclick="closewindow()" value="是否要退出"> |
js代码的实现：
| function showscreen(){ alert(window.screen.height+":"+window.screen.width); } function back(){ window.history.go(-1); } function forward(){ window.history.go(1); } function refresh(){ window.location.reload(); } function to(){ var a=123; if(a>100){ window.location.href="http://www.baidu.com"; }else{ window.location.href="http://www.google.com"; } } function closewindow(){ if(window.confirm("你是否要退出")){ alert("点击了是"); }else{ alert("点击了否"); } } |