基本语法和基本对象

发表时间:2017-05-12 16:11:27 浏览量( 43 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

一、基本语法

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任何一个标签绑定事件,例如我们可以为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是基于对象的语言,在浏览器窗口中就已经有对象了,这些对象可以直接使用。如下图所示:

attcontent/26c0f1e6-e574-4707-bdcd-3c1037980ec7.png

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

attcontent/0c26a603-5eb7-41a7-81fb-d6941f61230b.png

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("点击了否");
   }
}