JavaScript_js 函数是多条执行语句的封装体,只有被调用才会被运行-CSDN博客

本文链接：https://blog.csdn.net/princefengsheng/article/details/6989473

黑马程序员

----------------------<a href="http://edu.csdn.net/heima" target="blank">android培训</a>、<a href="http://edu.csdn.net/heima" target="blank">java培训</a>、期待与您交流！ ----------------------

JavaScript 概述

JavaScript是基于对象和事件的脚本语言。

注意：JavaScript是基于对象，但是不是真正的面向对象的，它没有封装，集成，多态功能。

它不能单独拿来就能运行，通常是添加在html上的一个脚本，可以运行出其他的效果。

特点：

1.安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。

但是Java 可以访问本地硬盘，可以读文件，删除文件.....

2.跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关。）

JavaScript与Java不同

1.JS是Netscape公司的产品，Java是Sun公司的产品。

2.JS是基于对象，Java是面向对象。

3.JS只需解释就可以执行 Java需要先编译成字节码文件，再执行。

4.JS是弱类型，Java是强类型。

html 和 java 代码的区别

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
  <script type="text/javascript">
   /*
   var x = 5;
   alert(x / 2);
   alert(x + 'a');  // JS中没有字符类型, 单引号和双引号都代表字符串。但是Java中单引号是字节，双引号代表字符串。
   alert(x + "a");//html 没法向屏幕输出，但是可以向屏幕上弹出一个对话框。
   */

   // alert(1 + 'a' + "b" + 'a' + 1);

   /*
   var i;
   alert(i);  // undefined
   */
  </script>
    </head>
    <body>
    <input type="button" value="按钮" οnclick="alert('弹出对话框')">
    </body>
</html>

java 代码

public class Variable {

public static void main(String[] args) {
  int x = 5;

  // x = "abc";    // Type mismatch: cannot convert from String to int

  System.out.println(x / 2);

  System.out.println(x + 'a');

  System.out.println(x + "a");   //输出字符串

  System.out.println(1 + 'a' + "b" + 'a' + 1);

  int i;

  // System.out.println(i); // The local variable i may not have been initialized

  /*
  String s = "abc";
  if(s)      // Type mismatch: cannot convert from String to boolean
   System.out.println("条件成立");
  */

  /*
  int a = 5;
  int b = 10;
  if(a = b)
   System.out.println("条件成立");
  */
}

}

JavaScript与Html的结合方式

想要将其他代码融入到Html中，都是以标签的形式。

1. JS代码存放在标签对<script>．．．</script>中。

例：  <script type="text/javascript">
   // alert("hello world"); // 弹出对话框
   /*
    * 多行注释
    */
   /*
   var x = 5;
   alert(x);
   x = "abc";
   alert(x);
   x = 3.14;
   x = true;
   */
  </script>

2. 使用script标签的src属性引入一个js文件。（方便后期维护，扩展）

例：<script src=”test.js” type=”text/javascript”></script>

注：规范中script标签中必须加入type属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
  <script type="text/javascript">
   /*
   function fun(){    // 由于是弱类型, 返回值类型可以省写
    alert("这是一个函数");
    alert("这是一个函数");
    alert("这是一个函数");
   }
   fun();
   */

   /*
   function getArea(a, b){  // 参数类型可以省写
    return a * b;
   }
   function getArea(r){  // JS中的方法不能重载, 方法名相同, 后写的方法会覆盖先写的
    return 3.14 * r * r;
   }
   alert(getArea(5, 10));
   alert(getArea(10));
   // alert(getArea("abc", 10)); // NaN, Not a Number
   */

   /*
   function fun(){  // 方法形参只有1个, 而实参传入多个, 那么形参只匹配第一个. 内置了一个arguments数组接收其他的
    for(var x = 0; x < arguments.length; x++)
     alert(arguments[x]);
   }
   fun(1, 2, 3, 5, 8, 10, 20);
   */

   /*
   function getArea(){    // 实参传了几个, arguments数组的长度就是几个, 其中元素就是传入的实参
    if(arguments.length == 1)
     return 3.14 * arguments[0] * arguments[0];
    if(arguments.length == 2)
     return arguments[0] * arguments[1];
   }
   alert(getArea(5, 10));
   alert(getArea(10));
   */

   /*
   function fun(a, b, c){  // 方法定义多个形参, 如果实参只传1个, 那么就只匹配1个, 其他都是undefined
    alert(a);
    alert(b);
    alert(c);
   }
   fun(1);
   */

   /*
   function fun(x, y){
    alert(x + y);
   }
   fun(5, 10);
   */

   /*
   var body1 = "alert(x + y);"
   var body2 = "alert(x * y)"
   var x = 2;
   var fun;
   if(x % 2 == 0)
    fun = new Function("x,y", body1);
   else
    fun = new Function("x,y", body2);
   fun(5, 10);
   */

   /*
   function show(){   // 窗体加载之后, 运行该方法
    alert("阻塞, 弹出对话框");
   }
   window.onload = show;  // 窗体加载结束之后, 执行show方法
   */

   /*
   window.onload = function(){   // 匿名方法, 只使用一次, 不用定义方法名
    alert("阻塞, 弹出对话框");
   }
   */

   /*
    * 函数定义: function 函数名(参数列表){函数体}, 注意没有返回值类型, 形参也不需要指定类型
    * 函数调用: 实参个数可以不和形参一样, 会被arguments数组接收, 但不推荐
    * 匿名函数: 如果一个函数只使用一次, 可以匿名
    */
  </script>
    </head>
    <body>
    BODY内容
    </body>
</html>

JavaScript语法

每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。

1. 变量

通过关键字var来定义，弱类型既是不用指定具体的数据类型。

例：var x = 3; x /= 2; x = “hello”; x = ‘a’;

注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。

2. 语句(与Java语句格式相同)

判断结构(if语句)

注：var x = 3;

if(x==4)//可以进行比较运算。

if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。

因为在Js中0就是false，非0就是true（通常用1表示）。

所以if(x=4)结果是true；

选择结构(switch语句)

循环结构(while语句，do…while语句，for语句)。

注：不同的是，没有了具体数据类型的限制，使用时要注意。

3. 函数

一般函数

格式：

function 函数名(形式参数...)

{

执行语句；

return 返回值；

}

函数是多条执行语句的封装体，只有被调用才会被运行。

注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？

其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。

例：

function demo()//定义函数。

{

alert(arguments.length);

}

demo(“hello”,123,true);//调用函数。

那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。

for(var x=0; x<arguments.length; x++)

{

alert(arguments[x]);

}

为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。

函数在调用时的其他写法：

var show = demo();//show变量接收demo函数的返回值。

var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。

//那么该函数也可以通过show()的方式运行。

动态函数

通过Js的内置对象Function实现。

例：var demo = new Function(“x,y”，”alert(x+y);”);

demo(4,6);

如同：

function demo(x,y)

{

alert(x+y);

}

demo(4,6);

不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。

匿名函数

格式：function(){...}

例：var demo = function(){...}

demo();

通常在定义事件属性的行为时较为常用。

例：

function test()

{

alert(“load ok”);

}

window.onload = test;

可以写成匿名函数的形式：

window.onload = function()

{

alert(“load ok”);

}

匿名函数就是一种简写格式。

4. 数组

方便操作多元素的容器，可以对其中的元素进行编号。

特点：可以存任意元素，长度是可变的。

格式1：

var arr = new Array();

arr[0] = “hello”;

arr[1] = 123;

arr[5] = true;

通过遍历即可对数组进行基本操作。

for(var x=0; x<arr.length; x++)

{

alert(arr[x]);

}

格式2：

var arr = new Array(1,"ab",true);

for(var x = 0; x < arr.length; x++)

alert(arr[x]);

格式3：

var arr = [1,2,3];

for(var x = 0; x < arr.length; x++)

alert(arr[x]);

格式4：

var arr = new Array();

arr["张三"] = 19;

arr["李四"] = 20;

alert(arr["张三"]);

alert(arr["李四"]);

格式5：

var arr = new Array();

arr[0] = [1,2,3];

arr[1] = [1,9,3];

arr[2] = [4,5,6,8];

alert(arr[2][2]);

例如:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
  <script type="text/javascript">
   /*
   var arr = ["abc", true, 3.14, 'xxx', null, 1000];  // 定义数组使用中括号"[]"

   for(x in arr)   // for in语句, 每次循环时x为arr数组中的一个索引
    alert(arr[x]);

   for(var x = 0; x < arr.length; x++)
    alert(arr[x]);
   */

   /*
   var arr = new Array();

   arr[0] = "abc";
   arr[1] = true;
   arr[2] = 100;
   arr[3] = null;
   // arr[4] = undefined;
   arr[500] = 500;

   for(var x = 0; x < arr.length; x++)
    alert(arr[x]);
   */
  </script>
    </head>
    <body>
    </body>
</html>

5. 对象

Js除了已经提供的内置对象外，也可以自定义对象。

例：

function Person()//很象java中的构造函数。P不一定要大写。

{

}

var p = new Person();

p.name = “zhangsan”;//定义成员变量。

p.age = 20;

//定义成员函数。

p.run = function()

{

alert(“run”);

}

p.run();

或：

function Person(name,age)

{

this.name = name;

this.age = age;

}

var p = new Person(“zhangsan”,20);

例2：

var p1 = new Person("张三",19);

p1.name = "李四";

p1.age = 20;

p1.gender = "女";

alert(p1.name + p1.age + p1.gender);

例3

var p1 = new Object(); //一般很少定义一个js中的对象, 用的也不太多

p1.run = function(){

alert(this.name + " is running")

}

p1.name = "李四";

p1.age = "20";

p1.gender = "女";

alert(p1.name + p1.age + p1.gender);

p1.run();

Js用于操作对象的语句

with语句。

格式：

with(对象)

{

}

应用：当调用一个对象中多个成员时，为了简化调用，避免”对象.”这种格式的重复书写。

var p = new Person(“张三",20);

alert(p.name+”,”+p.age);

可以写成：

var p = new Person(“张三”,20);

with(p)

{

alert(name + ”,” + age);

}

with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。

for...in语句

遍历数组.

用于遍历一个对象中的所有属性。

例1：

var p = new Person(“zhangsan”,20);

for(x in p)

{

alert(x); //结果是两个对话框，一个是name，一个是age。

alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组，要通过指定的元素名获取元素的值。

}

例2

------------ <a href="http://edu.csdn.net/heima" target="blank">android培训</a>、<a href="http://edu.csdn.net/heima" target="blank">java培训</a>、期待与您交流！ -----------