javascript基础

灰太狼 2022-05-25 05:26 205阅读 0赞

## 1.1           javasscript  的介绍 ##

**1.      什么是javascript**

**Java 与 javascript 有什么区别？**

**它们没有关系，雷锋和雷峰塔的关系**

**2.      javascript 的作用 ？**

HTML：它是整个网站的骨架。

CSS：它是对整个网站骨架的内容进行美化(修饰)

Javascript：它能够让整个页面具有动态效果(表单验证)。

**3.      javascript  的组成部分**

l  ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数

据类型、语句、函数等等)

l  DOM：文档对象模型，包含(整个 html 页面的内容)、

l  BOM：浏览器对象模型,包含(整个浏览器相关内容)局部异常和全局异常的配置和使用

## 1.2           javascript语法 ##

**1.      基本语法**

区分大小写

变量是弱类型的(String str=”aaa” ,var str=”123”;)

每行结尾的分号可有可无(建议大家写上)

注释与 java等语言相同。

**2.       javascript  的变量**

变量可以不用声明，变量是弱类型。统一使用 var 来定义！定义变量的时候不要使用关键字和保留字。

**3.      javascript  数据类型**

Javascript 数据类型分为原始数据类型和引用数据类型

原始数据类型：

string、number、boolean、null、undefined

引用数据类型：

**4.      javascript  运算符**

其它运算符与 java 大体一致，需要注意其等性运算符。

== 它在做比较的时候会进行自动转换。

=== 它在做比较的时候不会进行自动转换。

**5.      javascript  语句**

所有语句与 java 大体一致。

**6.      获取元素内容**

获取元素

document.getElementById(“id 名称”);

获取元素里面的值

document.getElementById(“id 名称”).value;

<table> 
 <tbody> 
 <tr> 
 <td>&lt;body&gt; &lt;input id="name" type="text" value="张三" &gt; &lt;/body&gt; &lt;/html&gt; &lt;script type="text/javascript"&gt; &nbsp;&nbsp;&nbsp; var uname= document.getElementById("name").value; &nbsp;&nbsp;&nbsp; alert(uname) &lt;/script&gt; &nbsp;</td> 
 </tr> 
 </tbody> 
</table>

## 1.3           javascript  的引入方式 ##

1.      **内部引入方式**

直接将 javascript 代码写到<scripttype=”text/javascript”></script>

**2.       外部 引入方式**

需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script

标签的 src 属性引入该外部的 js 文件

**3.       行内编写js**

## 1.4           常用的函数 ##

Ø  parseInt("字符串")

Ø  parseFloat("字符串")

Ø  isNaN()  判断变量是否是非数字//返回的是boolean类型不是数字返回true

Ø typeof(变量名变量的数据类型)

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script&gt; function compute(){ &nbsp;&nbsp;&nbsp;&nbsp; var num1=parseInt(document.getElementById("num1").value); &nbsp;&nbsp;&nbsp; var num2=parseInt(document.getElementById("num2").value); &nbsp;&nbsp;&nbsp; var choose=document.getElementById("choose").value; &nbsp;&nbsp;&nbsp; var result=0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; switch (choose){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "+": &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; result=num1+num2; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "-": &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; result=num1-num2; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case "*": &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; result=num1*num2; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp; document.getElementById("result").innerHTML=result; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; 第一个数:&lt;input id="num1" &gt;&lt;br&gt; 第二个数:&lt;input id="num2" &gt;&lt;br&gt; &lt;select id="choose"&gt; &nbsp;&nbsp;&nbsp; &lt;option value="+"&gt;加&lt;/option&gt; &nbsp;&nbsp;&nbsp; &lt;option value="-"&gt;减&lt;/option&gt; &nbsp;&nbsp;&nbsp; &lt;option value="*" &gt;乘&lt;/option&gt; &lt;/select&gt;&lt;br&gt; &lt;button οnclick="compute();" &gt;计算&lt;/button&gt; 结果&lt;span id="result"&gt;&lt;/span&gt; &lt;/body&gt; &nbsp;</td> 
 </tr> 
 </tbody> 
</table>

## 1.5           BOM对象 ##

BOM 对象：浏览器对象模型(操作与浏览器相关的内容)

Ø    Window  对象

Window 对象表示浏览器中打开的窗口。

案例:动态显示当前时间

Date类的常见方法

显示当前时间：

**动态显示时间**

定时器函数

setTimeout()

setTimeout("调用的函数",等待的毫秒数)

//1秒(1000毫秒)之后执行函数disptime()一次

var  myTime＝setTimeout("disptime ", 1000 );// **disptime后面不能加()**

setInterval()

setInterval("调用的函数",间隔的毫秒数)

//每隔1秒(1000毫秒)执行函数disptime()一次

清除函数

clearTimeout()

clearTimeout(setTimeOut()返回的ID值)

var  myTime＝setTimeout("disptime", 1000 );

clearTimeout(myTime)；

clearInterval ()

clearInterval(setInterval()返回的ID值)

var  myTime＝setInterval("disptime ", 1000 );

clearInterval(myTime)；

<table> 
 <tbody> 
 <tr> 
 <td><pre style="background:#FFFFFF;">&lt;script&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var&nbsp; cc;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function showTime(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// setTimeout(time,1000); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cc=setInterval(time,1000);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function time(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //获取当前时间 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var date=new Date();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //获取年份 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var year=date.getFullYear();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var month=date.getMonth()+1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dd=date.getDate();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var hh=date.getHours();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var mm=date.getMinutes();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var ss=date.getSeconds();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var time='现在是'+year+'年'+month+'月'+dd+'日'+hh+'点'+mm+'分'+ss+'秒';
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById("clock").innerHTML=time;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function stop(){
&nbsp;&nbsp; clearInterval(cc);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
 
&nbsp;&nbsp;&nbsp; &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button οnclick="showTime();"&gt;显示当前时间&lt;/button&gt;
 &lt;button οnclick="stop();"&gt;停止&lt;/button&gt;
 &lt;div id="clock"&gt;
 &lt;/div&gt;
 &lt;/body&gt;</pre> &nbsp;</td> 
 </tr> 
 </tbody> 
</table>

Ø  Location  对象

Location 对象包含有关当前 URL 的信息

按钮实现页面跳转

<table> 
 <tbody> 
 <tr> 
 <td>a href="002.html"&gt;跳转到002.html&lt;/a&gt; &lt;button οnclick="javascript:location.href='002.html'"&gt;跳转到002.html&lt;/button&gt; &nbsp;</td> 
 </tr> 
 </tbody> 
</table>

Ø  History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL

历史页面：使用 location 页面(把 href 属性值改为当前的 history)

History 页面代码：

<input  type="button"  value=" 返 回上 一 个 页 面 "

οnclick="javascript:history.back()"/>

go(参数)

参数：-1 返回上一个历史记录页面；-2 返回上上一个历史记录页面，1 进入下一个历史记录页面。

让按钮点击失效：

οnclick=”javascript:volid(0)”

总结:

1.       js的语法