javascript基础

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;

<body>
<
input id="name" type="text" value="张三" >
</
body>
</
html>
<
script type="text/javascript">
   
var uname= document.getElementById("name").value;
   
alert(uname)
</
script>

 

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(变量名变量的数据类型)

 

<script>
function compute(){
    
var num1=parseInt(document.getElementById("num1").value);
   
var num2=parseInt(document.getElementById("num2").value);
   
var choose=document.getElementById("choose").value;
   
var result=0;
     
switch (choose){
         
case "+":
             
result=num1+num2;
             
break;
         
case "-":
             
result=num1-num2;
             
break;
         
case "*":
             
result=num1*num2;
             
break;
      }
  
document.getElementById("result").innerHTML=result;
}


</
script>
</
head>
<
body>
第一个数:<input id="num1" ><br>
第二个数:<input id="num2" ><br>
<
select id="choose">
    <
option value="+"></option>
    <
option value="-"></option>
    <
option value="*" ></option>
</
select><br>
<
button οnclick="compute();" >计算</button>
结果<span id="result"></span>
</
body>

 

 

<script>
 
var num='a';
 
var cc=isNaN(num);
   
alert(cc);
</
script>

结果为true num不为数字所以结果为true

var num='1';
 
var cc=isNaN(num);
  
alert(cc);

结果为false

 

<script>
 
var num;
  
alert(typeof(num));
</
script>

变量未初始化 数据类型为undefined

1.5           BOM对象

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

Ø    Window  对象

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

<script>
 
//  alert("你好");
 
var resultconfirm("你确定要干掉我吗?");
  
if(result){
      
window.close();
   }
 
var num=   prompt("提示语","请输入第一个数字");
alert(num);
</
script>

 

 

案例:动态显示当前时间

Date类的常见方法

显示当前时间:

<script>
function showTime(){
   
//获取当前时间
   
var date=new Date();
   
//获取年份
   
var year=date.getFullYear();
   
var month=date.getMonth()+1;
   
var dd=date.getDate();
   
var hh=date.getHours();
   
var mm=date.getMinutes();
   
var ss=date.getSeconds();
   
var time='现在是'+year+''+month+''+dd+''+hh+''+mm+''+ss+'';

   
document.getElementById("clock").innerHTML=time;
}
</
script>
</
head>
<
body>
<
button οnclick="showTime();">显示当前时间</button>
<
div id="clock">
</
div>
</
body>

 

动态显示时间

 定时器函数

定时器函数

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);

<script>
        var  cc;
        function showTime(){
            // setTimeout(time,1000);
           cc=setInterval(time,1000);
        }
  
        function time(){
            //获取当前时间
            var date=new Date();
            //获取年份
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var dd=date.getDate();
            var hh=date.getHours();
            var mm=date.getMinutes();
            var ss=date.getSeconds();
            var time='现在是'+year+''+month+''+dd+''+hh+''+mm+''+ss+'';
  
            document.getElementById("clock").innerHTML=time;
        }
        function stop(){
   clearInterval(cc);
        }
  
    </script>
  </head>
  <body>
  <button οnclick="showTime();">显示当前时间</button>
  <button οnclick="stop();">停止</button>
  <div id="clock">
  </div>
  </body>

 

 

Ø  Location  对象

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

按钮实现页面跳转

a href="002.html">跳转到002.html</a>
<
button οnclick="javascript:location.href='002.html'">跳转到002.html</button>

 

Ø  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的语法

2.       js的三种写法

3.       BOM对象的常见操作

4.       DOM通过id获取元素

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值