2、JavaScript快速入门（1）

来源：互联网发布：脂本知乎编辑：程序博客网时间：2024/06/08 05:51

简介

特点：

安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）

和JAVA的区别：

JS是Netscape公司的产品，Java是Sun公司的产品
JS是基于对象，Java是面向对象。
JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
JS是弱类型，Java是强类型。

JavaScript内容

这里写图片描述

体验

<html >    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>体验JavaScript语言</title>    </head>    <body>        <h1>体验JavaScript语言</h1>        <script type="text/javascript">            window.document.write("hello,world");        </script>    </body></html>

JavaScript基础

写法

向HTML页面插入JavaScript的主要方法，就是使用<script元素>。使用<script>元素的方式有两种：直接在HTML页面中嵌入JavaScript代码和包含外部的JavaScript文件。1.  JS代码存放在标签对<script>．．．</script>中。2.  使用script标签的src属性引入一个js文件。（方便后期维护，扩展）例：<script src=”test.js” type=”text/javascript”></script>注：规范中script标签中必须加入type属性。

外部引用：
这里写图片描述

<script>标签的位置：关于<script>标签的位置，<script>应该放在页面的<head>元素中。

细节：

注意：1、  页面上可以有多个<script>标签2、  <script>标签按顺序执行3、  <script>标签可以出现在任意的页面位置4、<script>标签一定要写</script>关闭，而不能<script/>这样关闭。否则没有任何错误信息，但是没有运行结果。

区分大小写：
与 Java 一样，变量、函数名、运算符以及其他一切东西都是区分大小写的。
比如：
变量 test 与变量 TEST 是不同的。

注释：

Java：      //    /*  */    /**  */HTML：    <!--  -->CSS：      /*   */JavaScript：ECMAScript注释与 Java语言的注释相同ECMAScript 借用了这些语言的注释语法。有两种类型的注释：单行注释以双斜杠开头（//）多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）

常用函数：

window.alert() 或写为 alert() ：显示一个提示框显示内容。window.document.write() ：在网页的当前位置处写内容。

定义变量：
变量是弱类型的
与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。因此，可以随时改变变量所存数据的类型（尽量避免这样做）。
例子：

var color = "red";var num = 25;var visible = true;ECMAScript 中的变量是用 var 运算符（variable 的缩写）加变量名定义的。例如：var test = "hi";

在这个例子中，声明了变量 test，并把它的值初始化为 “hi”（字符串）。

每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用var操作符（var是关键字），后跟变量名

var message;

这行代码定义了一个名为message的变量，该变量可以用来保存任何值，也可以直接初始化变量。

var message ="hi";

ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值

同时，可以随时改变变量所存数据的类型（尽量避免这样做）。

<script type="text/javascript" >            //定义变量            var message = "hello";            message = 100;            alert(message);        </script>

在ECMAScript是有效的，但是不建议这样使用。
使用细节：

1、  var关键字在定义变量的时候可以省略不写2、  变量名可以重复，后面的将覆盖前面的变量3、  变量的类型取决于值的类型

一条语句定义多个变量。
中间使用豆号隔开即可，可初始化，也可以不初始化。

<script type="text/javascript" >            var name = "jack",             age = 28,             gender = "男";        </script>

JavaScript代码块及其代码块变量作用域：

<script type="text/javascript" >            //代码块 (Java)对代码进行封装 隔离变量的作用域            {                var a = 100;                document.write(a + "</br>");            } {                document.write(a + "</br>");                //JavaScript不会隔离变量作用域            }        </script>

typeof操作符

ECMASCRIPT 中有4种基本数据类型:

Undefined, Boolean,Number和String

Typeof 关键字typeof可以获取一个变量的类型。
类型的总结：

所有的数值都是number类型字符和字符串都是string类型布尔是boolean类型

如果一个变量没有初始化值的时候，其类型为undefined类型。表示没有定义。

<script type="text/javascript" >            var a = 12;            var b = 012; //八进制 10            var c = 0x12; //十六进制 18            document.write(a + "<br/>");             document.write(b + "<br/>");            document.write(c + "<br/>");        </script>

使用细节：

八进制中如果数据超过0~7，默认解析为十进制数据。

浮点数：

要定义浮点值，必须包括小数点和小数点后的一位数字（例如，用 1.0 而不是 1）。这被看作浮点数字面量由于保存浮点数需要的内存空间是保存正数值的两倍，因此ECMAScrip会将浮点数值转换为整数值。如果小数点后没有跟任何数字和浮点数本身就是一个整数就会被转换为整数。

转换成数字：
ECMAScript 提供了两种把非数字的原始值转换成数字的方法，即 parseInt() 和 parseFloat()。只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN。

在判断字符串是否是数字值前，parseInt() 和 parseFloat() 都会仔细分析该字符串。
parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。

例如，如果要把字符串 "12345red" 转换成整数，那么 parseInt() 将返回 12345，因为当它检查到字符 r 时，就会停止检测过程。

字符串中包含的数字字面量会被正确转换为数字，比如 “0xA” 会被正确转换为数字 10。不过，字符串 “22.5” 将被转换成 22，因为对于整数来说，小数点是无效字符。

<script type="text/javascript" >            var num1 = parseInt("12345red");            //返回 12345            var num2 = parseInt("0xA");            //返回 10            var num3 = parseInt("56.9");            //返回 56            var num4 = parseInt("red");            //返回 NaN            document.write(num1 + "<br/>");            document.write(num2 + "<br/>");            document.write(num3 + "<br/>");            document.write(num4 + "<br/>");        </script>

<script type="text/javascript" >            alert(  parseFloat("123")  ); // 可以            alert(  parseFloat("123.53")  ); // 可以            alert(  parseFloat("012")  ); // 12            alert(  parseFloat("000012")  );  // 12            alert(  parseFloat("0x20")  ); // 结果为0            alert(  parseFloat("-59")  ); // 负数            alert(  parseFloat("abc123")  ); // NaN (Not a Number)，表示不是一个数字。            alert(  parseFloat("123ab2c")  ); // 结果是123，即会解析前面正确的数字，直到遇到不正确的数字。        </script>

判断是否是一个有效的数值.

isNaNisNaN( 表达式 )，返回的结果是否为NaN（非数值）

<script type="text/javascript" >            document.write(isNaN("abc")+"<br/>"); //true            document.write(isNaN("123")+"<br/>"); //false        </script>

算术运算：
加法运算符由加号（+）表示：

ECMAScript 中的加法也有一些特殊行为：

某个运算数是 NaN，那么结果为 NaN。

字符串拼接

如果两个运算数都是字符串，把第二个字符串连接到第一个上。如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。

var result = 5 + 5; //两个数字alert(result);      //输出 "10"var result2 = 5 + "5";  //一个数字和一个字符串alert(result);      //输出 "55"

注意：变量是布尔类型的时候，true=1, false=0;

var a = 5;var b = true;alert(a + b);//6

乘法运算符

乘法运算符由星号（*）表示，用于两数相乘。

ECMAScript 中的乘法语法与 Java语言中的相同：注释：如果运算数是数字，那么执行常规的乘法运算，即两个正数或两个负数为正数，两个运算数符号不同，结果为负数。

除法运算符

除法运算符由斜杠（/）表示，用第二个运算数除第一个运算数：var iResult = 88 /11;

注意精度问题：

var a = 10;var b = 3;alert(a / b); //3.3333333333333335

比较:
比较运算符小于、大于、小于等于和大于等于执行的是两个数的比较运算

var bResult1 = 2 > 1    //truevar bResult2 = 2 < 1    //false

比较数字和字符串

var bResult = "25" < "3";alert(bResult); //输出 "true"

上面这段代码比较的是字符串 “25” 和 “3”。两个字符串在比较的时候比较的是两个字符串对应的字符顺序.

注意：如果字符串与数字比较，会把字符串转成数字再进行比较。
如果把某个运算数改为数字，那么结果就不一样了：

var bResult = "25" < 3;alert(bResult); //输出 "false"

这里，字符串 “25” 将被转换成数字 25，然后与数字 3 进行比较，结果不出所料。
无论何时比较一个数字和一个字符串，ECMAScript 都会把字符串转换成数字，然后按照数字顺序比较它们。

逻辑：

&& 与||    或!    非

逻辑 AND 运算符
在 ECMAScript 中，逻辑 AND 运算符用双和号（&&）表示：

var bTrue = true;var bFalse = false;var bResult = bTrue && bFalse;

与 Java 中的逻辑 AND 运算相似，ECMAScript 中的逻辑 AND 运算也是简便运算，即如果第一个运算数决定了结果，就不再计算第二个运算数。对于逻辑 AND 运算来说，如果第一个运算数是 false，那么无论第二个运算数的值是什么，结果都不可能等于 true。

考虑下面的例子：var bTrue = true;var bResult = (bTrue && bUnknown);  //发生错误alert(bResult);         //这一行不会执行//这段代码在进行逻辑 AND 运算时将引发错误，因为变量 bUnknown 是未定义的。变量 bTrue 的值为 true，因为逻辑 AND 运算将继续计算变量 bUnknown。这样做就会引发错误，因为 bUnknown 的值是 undefined，不能用于逻辑 AND 运算。

与逻辑 AND 运算符一样，逻辑 OR 运算也是简便运算。对于逻辑 OR 运算符来说，如果第一个运算数值为 true，就不再计算第二个运算数。

逻辑运算符NOT。
在 ECMAScript 中，逻辑 NOT 运算符与Java 中的逻辑 NOT 运算符相同，都由感叹号

赋值：
简单的赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量。

例如：

var iNum = 10;

复合赋值运算是由乘性运算符、加性运算符或位移运算符加等号（=）实现的。这些赋值运算符是下列这些常见情况的缩写形式：

var iNum = 10;iNum = iNum + 10；

可以用一个复合赋值运算符改写第二行代码：

var iNum = 10;iNum += 10；

每种主要的算术运算以及其他几个运算都有复合赋值运算符：

乘法/赋值（*=）除法/赋值（/=）取模/赋值（%=）加法/赋值（+=）减法/赋值（-=）

三目运算符
运算符是 ECMAScript 中功能最多的运算符，它的形式与 Java 中的相同。

variable = boolean_expression ? true_value : false_value;

该表达式主要是根据 boolean expression 的计算结果有条件地为变量赋值。如果 Boolean_expression 为 true，就把 true_value 赋给变量；如果它是 false，就把 false_value 赋给变量。

流程控制：
判断语句

if 语句的语法：if (condition) statement1 else statement2

如果条件计算结果为 true，则执行 statement1；如果条件计算结果为 false，则执行 statement2。
注意：
判断的条件会发生自动类型转换：

number：如果非0为true，0为falsestring：如果非null或非空为true，否则为falseundefined：falseNaN:    false对象类型：非null为true，否则为false。

选择：

switch 语句的语法：switch (expression)  case value: statement;    break;  case value: statement;    break;  case value: statement;    break;  case value: statement;    break;...  case value: statement;    break;  default: statement;

ECMAScript 和 Java 中的 switch 语句有两点不同。在 ECMAScript 中，switch 语句可以用于字符串，而且能用不是常量的值说明情况：

1、基本数据类型都可以传递给switch case语句。2、case语句可以是表达式

function test6() {    var color = "xx";    var value1 = "red", value2 = "green";    switch(color) {        case value1:            alert("红色");            break;        case value2:            alert("绿色");            break;        default:            alert("执行默认default");    }}

for in :
for 语句是严格的迭代语句，用于枚举对象的属性或者遍历一个数组的元素。
它的语法如下：
for (property in expression) statement
例子：

for (sProp in window) {  alert(sProp);}

这里，for-in 语句用于显示 window 对象的所有属性。

with

wth语句的作用：有了 With 语句，在存取对象属性和方法时就不用重复指定参考对象。
格式：

with(obj){    操作obj的属性语句;}

<script type="text/javascript">        <!—            with(document){              write("您好 !");              write("<br>这个文档的标题是 : \"" + title + "\".");              write("<br>这个文档的 URL 是: " + URL);              write("<br>现在您不用每次都写出 document 对象的前缀了 !");           }        // --></script>

0 0