JavaScript-介绍、基础语法、变量、运算符(一)

时间:2022-03-13 04:28:44

JavaScript简介

    JavaScript是一门脚本的语言(不需要编译,直接执行)、解释性语言(一行一行解释执行)、动态类型的语言、基于对象的语言、弱类型语言(变量命名都用var)。

编译语言与脚本语言区别

    编译语言需要把代码编译成计算机所认识的二进制语言,然后才能执行。

    脚本语言不需要编译,可以直接执行(浏览器中有JavaScript引擎可以解析JavaScript代码)。

JavaScript三个部分

JavaScript-介绍、基础语法、变量、运算符(一)

  1. ECMAScript 标准:js的基本语法
  2. DOM: Document Object Model    文档对象模型
  3. BOM: Browser Object Model   浏览器对象模型

JavaScript嵌入方式

  1. 内部引用:HTML文件的<script>标签中,一般放在<body>标签中的最后部分。
  2. 内联引用:js代码可以在HTML标签中。
  3. 外部引用:可以在js文件中写,但是需要在HTML文件中引用。

变量

  • js中变量声明都用var,不赋值,变量初始化需要赋值
  • 变量命名规范:一般以字符、$符号、下划线开头,不能以数字开头,不能使用关键字。
  • 命名一般习惯:命名有意义,英文单词,第一个单词首字母小写,后面单词首字母大写(驼峰命名法)。
  • 变量交换:
//第一种变量的交换,使用temp
var a1 = 10;
var b1 = 20;
var temp = a1;
a1 = b1;
b1 = temp;
console.log(a1,b1);//20 10
//第二种变量交换,适用于数字
var a2 = 10;
var b2 = 20;
a2 = a2 + b2;
b2 = a2 - b2;
a2 = a2 - b2;
console.log(a2,b2);//20 10
//第三种变量交换,位运算
var a3 = 10;
var b3 = 20;
a3 = a3 ^ b3;
b3 = a3 ^ b3;
a3 = a3 ^ b3;
console.log(a3,b3);//20 10

JavaScript原始数据类型:number, string,boolean,null,undefined,object。变量未定义就是undefined,null表示一个空,变量的值如果想为null,必须手动设置。

var num;
console.log(num);//undefined
console.log(num+10);//NaN not a number
//获取变量的数据类型 1.typeof 变量名  2.typeof(变量名)
var str = "张三";
var obj = new Object();
var nll = null;
console.log(typeof str,typeof obj);//string object
console.log(typeof(nll),String(null));//object null

Number

  • 数字类型:number类型,包括小数和整数
  • 注意:不要用小数验证小数(bug),不要用NaN验证NaN,验证结果是不是NaN应该使用isNaN()
var x=0.1;
var y=0.2;
var result = x+y;
console.log(result);//0.30000000000000004
console.log(result==0.3);//false
var num;
console.log(num+10==NaN);//false
console.log(isNaN(num));//true
console.log(isNaN(num+10));//true
console.log(isNaN(10));//false
  • 进制:
var a=10;//十进制
var b=012;//八进制 0开头
var c=0x1a;//十六进制 0x开头
console.log(a,b,c);//10 10 26

string

//计算字符串长度  变量名.length
var str = "hello world";
console.log(str.length);//11
//html中的转义符 <:< >:>空格: 
//js中的转义符
console.log("hello\tworld");//hello	world
console.log("hello\\world");//hello\world
console.log("hello\"world");//hello"world
//字符串拼接+,只要其中有一个是字符串就是拼接
console.log("hello "+"world");//hello world
var str1 = "10";
var str2 = 20;
console.log(str1+str2);//1020

JavaScript-介绍、基础语法、变量、运算符(一)

类型转换

  • 其他类型转数字类型,三种方式:
//1.parseInt();
console.log(parseInt("10"));//10
console.log(parseInt("10a"));//10
console.log(parseInt("a10"));//NaN
console.log(parseInt("10.5"));//10
console.log(parseInt("10.5a"));//10
console.log(parseInt("a10.5"));//NaN
//2.parseFloat();
console.log(parseFloat("10"));//10
console.log(parseFloat("10a"));//10
console.log(parseFloat("a10"));//NaN
console.log(parseFloat("10.5"));//10.5
console.log(parseFloat("10.5a"));//10.5
console.log(parseFloat("a10.5"));//NaN
//2.Number(); 更严格
console.log(Number("10"));//10
console.log(Number("10a"));//NaN
console.log(Number("a10"));//NaN
console.log(Number("10.5"));//10.5
console.log(Number("10.5a"));//NaN
console.log(Number("a10.5"));//NaN
  • 其他类型转字符串类型:
//1.toString()
var num1=10;
console.log(num1.toString());//10
//2.String()
var num2=10;
console.log(String(num2));//10
//如果变量有意义调用.toString()可以转换,否则报错
//如果变量有意义调用.toString()可以转换,否则报错
var num3;
console.log(String(num3));//undefined
console.log(num3.toString());//报错
  • 其他类型转布尔:
//Boolean()
console.log(Boolean(1));//true
console.log(Boolean(0));//false
console.log(Boolean(-1));//true
console.log(Boolean("hello"));//true
console.log(Boolean(""));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false

操作符 

//==只需要判断值是否相等;===既要判断值是否相等,又要判断类型是否相等
//!=和!==与上面类似
var str = "10";
var num = 10;
console.log(str==num);//true
console.log(str===num);//false

流程控制(代码执行过程)

三种方式(与其他语言类似):

  1. 顺序结构:从上到下,从左到右执行。
  2. 分支结构:if、if-else、switch-case ...
  3. 循环结构:while、do-while、for、for-in ..(break:跳出当前循环;continue:直接跳到下次循环)

案例:乘法口诀表

document.write("<table border='1' cellpadding='0' cellspacing='0'>");
for (var i = 1; i <= 9; i++) {
    document.write("<tr>");
    for (var j = 1; j <= i; j++) {
        document.write("<td>");
        document.write(i + "*" + j + "=" + i * j);
        document.write("</td>");
    }
    document.write("</tr>");
}
document.write("</table>");

JavaScript-介绍、基础语法、变量、运算符(一)