JS学习之路——JavaScript基础语法

1.基础语法

(1)JavaScript 语句块

– {}表示一个代码块，多个语句可放在 “{”和“}”内，形成一个语句块。

if(true){      //{}表示一个代码块
        document.write("hello world");
        document.write("hello javascript");
    }

(2)JavaScript 输出内容的 3 种方式

– document.write( ) 页面输出内容
– console.log( ) 控制台输出
– alert( ) 弹出框输出

	document.write("hello world");
	console.log("hello world");
	alert("hello world");

(3)JavaScript 注释

— 单行注释：//
— 多行注释：/* */ （注释的内容不会被执行）。

//单行注释    
/*
   多行注释
/*

2.JavaScript 变量

(1) 变量声明

– 使用关键字 var 创建变量。
– JavaScript 为动态类型语言，声明变量时，不需指明数据类型。

(2)变量赋值

– 使用 “=”为变量赋值。
– 值为字符串时需用‘ ’或“ ”引起来。

(3)变量命名

– 变量名区分大小写。
– 变量名以字母或 ‘_’ 或 ‘$’ 开头。
– 变量名不能是关键字，保留字（这些内容请百度自行阅读）。

//这些都是正确的示例
	var sum = 0;
	var SUM = 10;
	var _asd = "asd";
	var $A = 'A';
//不正确的示例
	var 2add = 0;
	var if = 10;

3.JavaScript 数据类型

(1)JavaScript 原始数据类型

– 5 种原始数据类型: Number、String、Boolean、Undefined、
Null
– 判断变量在某一时刻的数据类型，使用 typeof 运算符。
– JavaScript 是弱类型语言弱类型是指不同类型的变量之间可以相互赋值，但在某一时刻，一个变量只存在某一种数据类型。

	var userName = "jack";//String类型
    var age = 20;//Number类型
    var sex = true;//Boolean类型
    var grade;//Undefined类型
    var money = null; // Null类型
    console.log(typeof userName);
    console.log(typeof age);
    console.log(typeof sex);
    console.log(typeof grade);
    console.log(typeof money);

注意：
1.在这里javascript没有int 和 float 、double的区别，无论是浮点数还是整数，都属于Number类型。
2.null 不等同于空的字符串 (“”) 或 0

(2)认识NaN(Not aNumber)

– 表示一个没有意义、不正确的数值
– console.log(typeof NaN) ——Number类型
– 与自生不相等 —— NaN !=NaN

(3)认识 isNaN( ) 函数

– 用来检测参数是否为 NaN 值
– 参数是 “NaN” 时返回 true，否则返回 false
– isNaN(“123abc”)——true

(4)运算符及其优先级

—条件运算符：
==：值相等则为true； === ：类型和值都须相同则为 true

	var x = 3; // Number
	var y = 3; // Number
 	var z = "3"; // String
 
	alert(x == y); // true
 	alert(x === y);// true
 	alert(x === z); // false

—条件(三目)运算符:
( 条件 ? 元素a : 元素b ) 满足条件输出a，不满足输出b

	var a = 39;
 	var b = 30;
 	document.write( a>=b? "a大于等于b" : "a小于b");//a大于等于b
 	var age = 12；
 	var msg = age>18 ? "成年人" : "未成年";
 	console.log(msg)//未成年

—使用“+”拼接字符串

	var x = 3;
    var y = "3";
    var z = 5;
    z += y;
    var a = y + z;
    document.write(x+y+'<br/>');//<br/>为换行  需要“”或者''括起来
    document.write(z+'<br/>');
    document.write(a+'<br/>');
    document.write(x+y+z+'<br/>');

4.JavaScript数据类型转换

(1)隐式转换

– 转换成 String 类型: 用 + 连接
– 转换成 Boolean 类型: 变量前面加 !!

	var sum = "img" + 3 + ".jpg";
	console.log(typeof sum);
	var bool = !!sum;
	console.log(typeof bool);

(2)显示(强制)转换

– 使用全局函数 如: parseInt()、String()等

	var str = "123";
	var num = parseInt(str);
	console.log(num);

(3)转换为布尔类型规则

• 非0数字和非空字符串转为true，其余均为false
• 强制转换为 Boolean 类型: Boolean( )

	var str = "hello world";
    var bool1 = Boolean(str);
    var bool2 = !!str;
    console.log(bool1);
    console.log(bool2);

(4)转换为数值类型规则

• 布尔转换为数值类型：false为0 、true为1
• undefined 转换为数值类型 ：为NaN
• null转换为数值类型: 为 0
• 字符串转换为数值类型：字符串内容为纯数字转化为数字本身，非纯数字转化为NaN
• 强制转换为 Number 类型：parseInt()、parseFloat()、Number()
——注意：强制转换可以截断到第一个非数字字符前的数字内容 如：

    var str1 = "123asd";
    var str2 = "asd123"
    var num1 = parseInt(str1);
    var num2 = parseInt(str2);
    console.log(num1);  //截断成功则输出截断得到的数字
    console.log(num2);  //截断失败则输出NaN

(5)转换为字符串类型规则

• 本身是什么就转换为什么
• 强制转换为 String 类型：String( )

    var b = 3.1415926;
    var b1 = b + "";
    var b2 = String(b);
    document.write(typeof(b1) + '<br/>');
    document.write(typeof(b2) + '<br/>');

(6)运算符左右数据类型转换规则

• + 左右出现字符串时，作为字符串连接运算符使用
• - 、*、/、% 左右出现字符串（布尔）时，将字符串（布尔）转换为数值类型
• 比较运算符左右出现字符串（布尔），会转换为数值类型
• 逻辑运算符会将数据类型转换为布尔类型之后再做运算

5.JavaScript流程控制结构

(1)分支语句

– if…else if…else 语句
– switch - case 语句

    var score = '1';
    if(score == 100){
       alert("甲");
    }
    else if(score >= 90){
       alert("乙");
    }
    else{
       alert("丙");
    }

	var score = "";
    switch(score){
        case "优":
            document.write("该同学成绩优秀");
            break;
        case "良":
            document.write("该同学成绩还行");
            break;
        case "差":
            document.write("该同学成绩较差");
            break;
        default:
            document.write("未查到该同学成绩");
            break;
    }//注意加   break

(2)循环语句

    /*
    for(变量初始化；循环条件判断；一次循环结束后的处理){
        
    }
    */
    for(var i=0;i<10;i++){
        document.write("这是第"+i+"次循环"+'<br/>');
    }
    var i = 0;
    while(i<10){
       document.write("这是while第"+i+"次循环"+'<br/>');
       i++;
    }
    do{
        document.write("这是while第"+i+"次循环"+'<br/>');
        i++;
    }while(i<10);
    /*
       break终止整个循环；
       continue终止本次循环，不影响后续循环；
    */
    for(var i=0;i<10;i++){
        if(i == 5){
            continue;
        }
        document.write("这是第"+i+"次循环"+'<br/>');
     }

(3)练习

用循环创建一个表格，表格内容自定义。

    document.write("<table border='1' cellspacing='0' width='400px' height='400px' align='center'>");
    for(var i=0;i<4;i++){
        document.write('<tr>');
        for(var j=0;j<4;j++){
            document.write('<td align="center">'+"123"+'</td>');
        }
        document.write('</tr>');
    }
    document.write('</table>');

结束！