JavaScript-介绍、基础语法、变量、运算符（一）

时间：2022-08-22 18:03:52

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-介绍、基础语法、变量、运算符（一）







标签：

相关文章