什么是JS?
- JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言
- 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行
- 现在也可以基于 Node.js 技术进行服务器端编程
JS的作用?
- 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
浏览器执行 JS
浏览器分成两部分:渲染引擎和 JS 引擎
渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit。
JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8。
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释
每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。
基础语法
变量
变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改。(本质:变量是程序在内存中申请的一块用来存放数据的空间。)
var age = 18; // age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
//var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配
内存空间,不需要程序员管
// 声明多个变量
var age = 10, name = 'zs', sex = 2;
变量命名规范
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能 以数字开头。 18age 是错误的
不能 是关键字、保留字。例如:var、for、while
变量名必须有意义。 MMD BBD nl → age 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
//交换两个变量值
var a = 10, b = 20;
var temp;
temp = a;
a = b;
b = temp;
console.log(a, b) // 20, 10
数据类型
为什么需要数据类型
-
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利
用存储空间,于是定义了不同的数据类型。
注意:JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会
被自动确定 -
在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型。
-
JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
数据类型的分类
- 简单数据类型(Number,String,Boolean,Undefined,Null)
- 复杂数据类型(Object)
- Number 型 数字类型既可以用来保存整数值,也可以保存小数(浮点数)
// 1.八进制数字序列范围:0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
// 2.十六进制数字序列范围:0~9以及A~F
var num = 0xA;
现阶段我们只需要记住,在JS中八进制前面加0,十六进制前面加 0x
三个特殊值:
Infinity ,代表无穷大,大于任何数值
-Infinity ,代表无穷小,小于任何数值
NaN ,Not a number,代表一个非数值
//isNaN() 用来判断一个变量是否为非数字的类型,不是数字返回 true, 是数字返回false
var a = 123;
var isOk = isNaN(a);
console.log(isOk); // false
var str = 'andy';
console.log(isNaN(str)); // true
- String 型
字符串型可以是引号中的任意文本,其语法为 双引号 “” 和 单引号’’ (JS 这里我们更推荐使用单引号。)
JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)
var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含'' // 常见错误
var badQuotes = 'What on earth?"; // 报错,不能 单双引号搭配
字符串转义字符
//字符串长度 str.length
var str = '我是美女';
console.log(str.length); // 4
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加" alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112
//只要有字符串和其他类型相拼接 最终的结果是字符串类型
//字符串拼接 '+'
var age = 18;
console.log('pink老师' + age + '岁了'); //pink老师18岁了
console.log('pink老师' + age); //pink老师18
// 显示年龄案例
var age = prompt('请输入您的年龄:');
// var str = '您今年' + age + '岁啦';
// alert(str);
alert('您今年' + age + '岁啦');
console.log(alert);
// 简单的交互效果
var answer = prompt('你喜欢我吗?')
var str = '我喜欢你';
if (str==answer){
alert('我也喜欢你')
}else{
alert('你确定?')
}
布尔型 Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
var flag = true;// flag 布尔型
var flag1 = false; //flag1 布尔型
console.log(flag + 1); //flag 当1看
console.log(flag1 + 1);// flag1 当0
// 如果一个变量声明未赋值 当undefined 未定义数据类型
var str;
console.log(typeof str); //结果为undefined
var variable = undefined;
console.log(variable + 'pink'); //undefinedpink
console.log(variable + 1); //NaN undefined 和数字相加 最后的结果是 NaN
// null 空值
var space = null;
console.log(space + 'pink'); // nullpink
console.log(space + 1); // 1
var num = 10;
console.log(typeof num); // number
var str = 'pink';
console.log(typeof str); // string
var flag = true;
console.log(typeof flag); // boolean
var vari = undefined;
console.log(typeof vari); // undefined
var timer = null;
console.log(typeof timer); // object
// prompt 取过来的值是 字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变
量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
//转换为字符串类型
//1. 变量.toString()
var num = 1;
var str = num.toString();
console.log(str); //1
console.log(typeof str); //string
//2. String(变量)
console.log(String(num)); // 1
// 3. '+' 字符拼接的方法 实现转换效果 (隐式转换)
console.log(num + ''); //1 但是字符型 (用的最多)
// 转换为数字型
// 1. parseInt(变量) 可以把输入的字符型转为数字型 结果是整数
console.log(parseInt('3.14')); // 3
console.log(parseInt('120px'));//120 会去掉单位
console.log(parseInt('rem120px')); // NaN
//2. parseFloat(变量) 可以把 字符型转为数字型 结果为小数
console.log(parseInt('3.14')); // 3。14
console.log(parseInt('120px'));//120 会去掉单位
console.log(parseInt('rem120px')); // NaN
// 3. 利用Number(变量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
// 4. 利用算数运算 - * / 隐式转换
console.log('12'- 0);// 12
console.log('124'-'123');
console.log('124'*1);
// 案例 计算年龄
// 弹出一个输入框(prompt),让用户输入出生年份 (用户输入)
var year = prompt('请输入您的出生年份:');
// 把用户输入的值用变量保存起来,然后用今年的年份减去变量值,结果就是现在的年龄 (程序内部处理)
var age1 = 2020 - parseInt(year);
alert('您的年龄是:' + age1);
// 案例 简单加法器
var num1 = prompt('请输入第一个值:');
var num2 = prompt('请输入第二个值:');
var answer = parseInt(num1) + parseInt(num2);
alert('计算结果为:' + answer);