Javascript（一）javascript入门及基本语法

不念不忘少年蓝@ 2022-05-17 02:46 270阅读 0赞

# 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嵌入代码格式如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;script type="text/javascript"&gt; //在这里写js代码。 &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

我们可以在HTML的任何位置嵌入javaScript的代码，但是习惯上会在网页的head标签或者网页最后嵌入，这里我们就在head标签中嵌入。

前面说了JavaScript和Java的语法是差不多的，所以这里就简单说一下，大家可以自己上机测试一下.

### 1、变量的声明和赋值 ###

JavaScript不需要使用具体的数据类型来声明变量，定义变量

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&nbsp;var &nbsp;&nbsp;count;</td> 
 </tr> 
 </tbody> 
</table>

赋值

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>count = 5;</td> 
 </tr> 
 </tbody> 
</table>

其中，"var" － 用于声明变量的关键字，"count" － 变量名。

也可以同时声明和赋值变量

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>var count = 10;</td> 
 </tr> 
 </tbody> 
</table>

声明多个变量

### 2、运算符号 ###

运算符那就和java一模一样了。运算符就是对一个或多个变量或值（操作数）进行运算，并返回一个新值，根据所执行的运算，运算符可分为以下类别：

* 算术运算符：+、-、 \* 、 / 、%、++、--、-(求反)
 * 比较运算符：==、!=、>、>=、<、<=
 * 逻辑运算符：&&、||、！、&、|
 * 赋值运算符：=

### 3、逻辑控制语句 ###

逻辑控制语句也和java一样，下面就简单描述一样。

**if条件语句**

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> if(条件) { //JavaScript代码; } else { //JavaScript代码; } </td> 
 </tr> 
 </tbody> 
</table>

**switch多分支语句**

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> switch (表达式) { case&nbsp;常量1 : JavaScript语句1; break; case&nbsp;常量2 : JavaScript语句2; break; ... default : JavaScript语句3; } </td> 
 </tr> 
 </tbody> 
</table>

**for、while循环语句**

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> for(初始化;&nbsp;条件;&nbsp;增量) { 语句集; } while(条件) { 语句集; } </td> 
 </tr> 
 </tbody> 
</table>

例子：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;script type="text/javascript"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(i&gt;400){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("大于400"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("小于400"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//循环 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var i=0;i&lt;100;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

### 4、数值类型转换 ###

JavaScript是弱类型语言，变量在声明的时候都不需要定义数据类型，但是会根据你赋值的值类型来决定数据类型的。如果要把一个数值转为数字类型，那么我们还需要调用JavaScript的内置函数实现。

（1）parseInt ("字符串")

将字符串转换为整型数字

如: parseInt ("86")将字符串“86”转换为整型值86

（2）parseFloat("字符串")

将字符串转换为浮点型数字

如: parseFloat("34.45")将字符串“34.45”转换为浮点值34.45

## 二、函数定义 ##

### 1、创建函数 ###

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> function&nbsp;函数名(&nbsp;参数1,参数2，…&nbsp;) { 语句; } </td> 
 </tr> 
 </tbody> 
</table>

示例：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> function show(){ &nbsp;&nbsp;&nbsp;alert('hello'); } </td> 
 </tr> 
 </tbody> 
</table>

### 2、函数调用 ###

可以直接调用:

一般使用事件驱动的方式调用，可以为HTML任何一个标签绑定事件，例如

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;body οnlοad="show()"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p οnclick="show()"&gt;你好&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" οnclick="show()" value="普通"&gt; &lt;/body&gt; </td> 
 </tr> 
 </tbody> 
</table>

可以为p标签绑定事件，也可以为body标签或者input标签绑定事件，代码如下：

body标签我们绑定了onload事件，所以也没一加载就会调用函数，p标签和input标签都绑定了单击事件，你可以单击p标签或者input标签也可以调用这个函数。

### 3、带参数函数和有返回值的函数 ###

由于JavaScript没有明确的数据类型，所有为函数定义参数时不需要定义参数的类型。例子如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &nbsp;//定义有参数 function sum(a,b){ &nbsp;&nbsp;&nbsp;&nbsp;var result=a+b; &nbsp;&nbsp;&nbsp;&nbsp;alert("sum="+result); } </td> 
 </tr> 
 </tbody> 
</table>

另外函数如果有返回值，也不需要修改函数的定义，如果该函数有返回值，那么你在函数体中使用return返回就可以了。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> function test(a,b){ &nbsp;&nbsp;&nbsp;&nbsp;var result=a+b; &nbsp;&nbsp;&nbsp;&nbsp;return result; } </td> 
 </tr> 
 </tbody> 
</table>

## 三、基本对象 ##

前面我们说JavaScript是基于对象的语言，在浏览器窗口中就已经有对象了，这些对象可以直接使用。如下图所示：

![70][]

所有的对象都是window的子对象。浏览器对象的分层结构如下：

![70 1][]

### 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中绑定函数：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;input type="button" οnclick="showscreen()" value="获得窗口对象的分辨率"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" οnclick="back()" value="回退"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" οnclick="forward()" value="前进"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" οnclick="refresh()" value="刷新"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="button" οnclick="closewindow()" value="是否要退出"&gt; </td> 
 </tr> 
 </tbody> 
</table>

js代码的实现：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> function showscreen(){ alert(window.screen.height+":"+window.screen.width); &nbsp;}&nbsp; &nbsp;function back(){ window.history.go(-1); &nbsp; } function forward(){ &nbsp;window.history.go(1); &nbsp; } function refresh(){ &nbsp;window.location.reload(); }&nbsp; function to(){ &nbsp;&nbsp;&nbsp;var a=123; &nbsp;&nbsp;&nbsp;if(a&gt;100){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.location.href="http://www.baidu.com"; &nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.location.href="http://www.google.com"; &nbsp;&nbsp;&nbsp;} }&nbsp; &nbsp; function closewindow(){ &nbsp;&nbsp;&nbsp;if(window.confirm("你是否要退出")){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("点击了是"); &nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("点击了否"); &nbsp;&nbsp;&nbsp;&nbsp;} } </td> 
 </tr> 
 </tbody> 
</table>

[70]: /images/20220517/281346f267d248ce8cda1de45fa2e20e.png
[70 1]: /images/20220517/bb947f1f1c8c46558a9bac464ac0024e.png