JavaScript 基础(一) - JavaScript的引入方式，JavaScript 变量命名规则，JS 的五种基本数据类型，ECMAScript 算数运算符，逻辑运算符

JavaScript的引入方式

直接编写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!-- ------------页面内容--------------- --!>

<script>

    alert('hello world')

</script>

</body>

</html>

导入文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!-- ------------页面内容--------------- --!>

<script src="hello.js"></script>

</body>

</html>

注意：建议 js 内容放在 body 的最后

JavaScript 变量命名规则

1 声明变量时不用声明变量类型. 全都使用var关键字;

2 一行可以声明多个变量.并且可以是不同类型;

3 声明变量时可以不用var. 如果不用var 那么它是全局变量;

4 变量命名,首字符只能是字母,下划线,$美元符三选一，且区分大小写，x与X是两个变量

5 建议遵循下面的命名规则: 匈牙利类型标记法

在变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示

var iMyTestValue = 0, sMySecondValue = "hi";

打印变量的三种方式

    var a=1, b=3, c=4;

    console.log(a);

    document.write(b);

    alert(c);

JS 的五种基本数据类型

数字类型(Number)

整数：精确表达的范围是 -9007199254740992 (-253) 到 9007199254740992 (253) 超出范围的整数，精确度将受影响

浮点数：使用小数点记录数据, 例如：3.4，5.6

字符串(String)

字符串中部分特殊字符必须加上右划线

常用的转义字符 \n:换行 \':单引号 \":双引号 \:右划线

<script>

    var str="\u4f60\u597d\n欢迎来到\"JavaScript世界\"";

    alert(str);

</script>

布尔型(Boolean)

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0

    if (true){

        alert("sucdess!");

    }

Undefined

如果声明了某个变量，但是未对它赋值，则该变量是 Underfined 类型

     var a;

     alert(a);

Null

Null 只有一个专用值 null，即它的字面量。表示尚未存在的对象, 如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

var a = null;

     alert(a);

数据类型转换

数字 + 布尔值：true转换为1，false转换为0

alert(1+true);          //结果为 2

alert(1+false);         //结果为 1

字符串 + 布尔值：布尔值转换为字符串true或false

alert("hello"+true);    //结果为 hellotrue

alert("hello"+false);   //结果为 hellofalse

数字 + 字符串：数字转换为字符串

alert(1+"hello");       //结果为 1hello

强制类型转换函数

函数parseInt：强制转换成整数

    alert(parseInt(3.14));        //结果为 3

    alert(parseInt("3.14"));      //结果为 3

    alert(parseInt("3.14a"));     //结果为 3

    alert(parseInt("a3.14"));     //结果为 NaN, 当字符串转换成数字失败时就为 NaN, 属于 Number；

    alert(parseInt("31a4"));      //结果为 31

NaN

    alert(NaN==0);           //结果为 false

    alert(NaN>0);            //结果为 false

    alert(NaN<0);            //结果为 false

    alert(NaN==NaN);         //结果为 false

类型查询函数(typeof)

    var i = 8;

    var s = "a";

    var b = true;

    var u = undefined;

    var n = null;

    var obj = new Object();

    console.log(typeof(i));     //结果为 number

    console.log(typeof(s));     //结果为 string

    console.log(typeof(b));     //结果为 boolean

    console.log(typeof(u));     //结果为 undefined

    console.log(typeof(n));     //结果为 object

    console.log(typeof(obj));   //结果为 object

ECMAScript 算数运算符

递增(＋＋) 、递减(－－)

    var a = 1;

    var b = ++a;       //先加减再赋值 

    alert(b);          //结果为 2

    alert(a);          //结果为 2

    var a = "aa";

    b = +a;

    alert(b);          //结果为 NaN

    alert(typeof(b));  //结果为 number

ECMAScript 逻辑运算符

逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

如果某个运算数是 null，返回 null。

如果某个运算数是 NaN，返回 NaN。

如果某个运算数是 undefined，返回undefined。

    alert( 1 && 1 );      //结果为 1

    alert( 1 && 0 );      //结果为 0

    alert( 0 && 0 );      //结果为 0

逻辑 OR 运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值

    alert( 1 || 1 );      //结果为 1

    alert( 1 || 0 );      //结果为 1

    alert( 0 || 0 );      //结果为 0

逻辑非(!)

取反

    alert( !0 );            //结果为 true

    alert( !1 );            //结果为 false

     alert( null == undefined );       //结果为 true

     alert ( "NaN" == NaN );           //结果为 false

     alert ( 5 == NaN );               //结果为 false

     alert ( NaN == NaN );             //结果为 false

     alert ( NaN != NaN );             //结果为 true

     alert ( false == 0 );             //结果为 true

     alert ( true == 1 );              //结果为 true

     alert ( true == 2 );              //结果为 false

     alert( undefined == 0 );          //结果为 false

     alert( null == 0 );               //结果为 false

     alert( "5" == 5 );                //结果为 true

ECMAScript 关系运算符

字符串之间比较

规则是是按第一字符串对比，若第一位相同则比较第二位。

字母 B 的字符代码是 66，字母 a 的字符代码是 97。

     var bResult = "Blue" < "apple";

     alert(bResult);                 //结果为  true

比较数字和字符串

规则为字符串 "88" 将被转换成数字 88，然后与数字 8 进行比较。

     var bResult = "88" < 8;

     alert(bResult);                //结果为  false

总结

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型。

比较运算符两侧如果都是字符串类型,比较的是最高位的 ASCII 码,如果最高位相等,继续取第二位比较。

控制语句

if 控制语句

if-else基本格式:

if (表达式){

语句１;

......

}else{

语句２;

.....

}

功能说明

如果表达式的值为true则执行语句1,

否则执行语句2

var x = (new Date()).getDay();

var y ;

if ( x == 6 || x == 0 ){

    y="周末";

}else{

    y="工作日";

}

alert(y);

if语句嵌套格式

if (表达式1) {

    语句1;

}else if (表达式2){

    语句2;

}else if (表达式3){

    语句3;

} else{

    语句4;

}

switch 选择控制语句

switch基本格式

switch (表达式) {

    case 值1:语句1;break;

    case 值2:语句2;break;

    case 值3:语句3;break;

    default:语句4;

}

var x = (new Date()).getDay();

switch(x){

    case 1:y="星期一";    break;

    case 2:y="星期二";    break;

    case 3:y="星期三";    break;

    case 4:y="星期四";    break;

    case 5:y="星期五";    break;

    case 6:y="星期六";    break;

    case 7:y="星期日";    break;

    default: y="未定义";

}

alert(y);

for 循环控制语句

功能说明: 实现条件循环，当条件成立时，执行语句1，否则跳出循环体

for循环基本格式

for (初始化;条件;增量){

    语句1;

    ...

}

  for (var i=1; i<10; i++){

    console.log(i);

  }

运行结果:

for i in 不推荐使用.

    var a = [8, "hello", true];

     for (var i in a){

        console.log(i)

        console.log(a[i])

     }

运行结果:

while 循环控制语句

运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环

while循环基本格式

while (条件){

语句1；

...

}

var i=1;

while (i<=7) {

    document.write("<H"+i+">hello</H "+i+">");

    document.write("<br>");

    i++;

}