学习一门语言的基本步骤
1.了解背景知识:历史、现状、特点、应用场景
2.搭建开发环境:编写一个小例子:hello world、
3.变量和常量
4.数据类型
5.运算符
6.逻辑结构
7.通用小程序
8.函数和对象
9.第三方框架、库
10.实用的项目
程序员必做50题 https://wenku.baidu.com/view/af66e2f14afe04a1b071de42.html
3.1 JS概述
(1)历史
1995年,JS出现在Netscape的浏览器中
1997年,JS提交给了ECMA,出现了ECMAScript标准规范
2009年,JS遵循CommonJS规范,开始向服务器端发展
(2)现状
既可以运行在客户端浏览器中,也可以运行在服务器端(Node.JS)
(3)特点
解释型语言,编译一行执行一行
弱类型语言 ——声明变量的时候不需要指定数据类型,后期可以存储任意的类型
基于对象
跨平台
(4)应用场景
制作浏览器端的交互效果
创建移动App
创建web服务器,操作数据库等服务器应用
2D绘图
3.2 JS的执行环境
1).浏览器自带JS解释器
2).服务器端使用Node.JS解释器
https://nodejs.org nodejs下载地址
node -v DOS状态下查看当前安装的nodejs版本
3).执行JS代码
浏览器:
创建01_hello.js和01_hello.html 文件,把js文件嵌入到html中
<script src="01_hello.js"></script> |
NodeJS dos窗口
node 脚本文件路径
3.3 变量和常量
1. JS语法规范
1.区分大小写
2.每行代码结尾的分号可加可不加,建议都加
3.分为单行注释(//....)和多行注释(/*...*/)
2. 变量
变量——用于存储数据的容器
1.声明变量
VAR x=1; 使用关键字VAR声明了一个变量,名称叫x储存的值是1
在内存在创建空间,名称叫x,把数据1存放到空间x中。
2.变量的命名规则
变量名称可以使用字母、数字、美元符号、下划线组成,不能以数字开头
不能使用关键字和保留字作为变量名
3.声明变量未赋值
var num; 变量只是声明未赋值,此时的结果是undefined
可以为变量多次赋值,并且赋不同类型的值
弱类型语言——声明变量的时候不需要指定数据类型,后期可以存储任意的类型
4.一次性声明多个变量
var a=1,b=2,c; 多个变量之间用逗号隔开
练习:声明多个变量,分别保存语文、数学、总成绩;最后打印总成绩
3 常量
常量一旦声明就不能再重新赋值 (常量名字一般全大写)
const PI=3.14
3.4 数据类型
1.数据类型分类
数据类型分为: 原始类型和引用类型
原始类型:数值型(Number)、字符串型(String)、布尔型(Boolean)、未定义型(undefined)、空(null)
(1)数值型 整型和浮点型
整型在内存中占4个字节,浮点型占8字节
8进制 以0开头,例如013 ---> 11
16进制 以0x开头 例如 0xa ---> 10
a~f 代表 10~15 字母不区分大小写 0xff ---> 255
浮点型分为普通小数和指数型小数
3.14E6 ——> 3140000 3.14E-6——> 0.00000314。
typeof 检测数据类型 typeof 数据/typeof(数据) 检测数据的数据类型
(2)字符串型
数据被引号包含就是字符串类型,引号不区分单双引号
查看任意一个字符的Unicode码 'a'.charCodeAt()
console.log('2'.charCodeAt()); //输出 50
(3)布尔型
true/false 在程序中表示真或假 小写
一般用于是否的结果,例如是否登陆、是否注册、是否在售、是否是会员
(4)未定义型 undefined
声明了变量未赋值,结果就是undefined
(5)空 null 常和引用类型数据一起使用
2 数据类型转换
(1)隐式转换 (含字符串转为字符串,含数字转数字)
1.数字+字符串 ——> 数字转换成字符串 1 +'2' //'12'
2.数字+布尔型 ——> 布尔转数字 true-->1,false-->0 3+true //4 3+false //3
3.字符串+布尔型 ——> 布尔型转字符串 '5'+true //'5true'
var num1=3,num2=true,num3='tedu'; console.log(num1+num2+num3); //4tedu console.log(num2+num3+num1); //'truetedu3' console.log(num3+num1+num2); //'tedu3true' |
JS中加号(+)的作用
1.执行加法运算
2.执行字符串拼接(必须要有字符串参与)
使用减法(-)、乘法(*)、除(/)隐式转换
将运算符两端的数据转换为数值型(自动调用Number),如果转换失败,返回NaN(Not a Number),不是一个数字,任何值和NaN执行-*/运算符都会返回NaN
(2)强制转换
1.将任意的数据强制转为数值型 Number()
Number('a') //NaN Number('1a') //NaN Number('1') //1 Number(undefined) //NaN Number(null) //0 Number(true) //1 |
2.将数据强制转为整型 parseInt()
常用于将字符串或者数字转为整型,其他的数据返回NaN;如果要转换的字符串以非数字开头,页返回NaN,碰到第一个非数字的字符就停止。parseInt('123asd')-->123
3.将数据转为浮点型 parseFloat()
和parseInt()的用法基本一致,只是转的数据是浮点型
4.数值型和布尔型转为字符串型 toString()
var num=10; num.toString(); //'10'
3.5运算符
表达式:由运算符连接的操作数据,所组成的形式
运算符分类:算数运算符、比较运算符、逻辑运算符、位运算符、赋值运算符、三目运算符
(1)算数运算符
+ - * / % ++ -- 加、减、乘、除、取余、自增、自减
% 取余 console.log(3%2); //1 console.log(2%3); //2 console.log(-2%3);//-2
++ 自增 在原来的基础上+1
-- 自减 在原来的基础上-1
console.log(num++); //先打印num的值,再执行num+1
console.log(++num); //先执行num+1,再打印num的值
var num=3; console.log(num-- + --num); //4 3+1 var a='1'; //自增隐式将数据转为数值型 a++; console.log(a,typeof a); //2 'number' |
(2)比较运算符 返回一个布尔型的值
> 、< 、>= 、<= 、== 、!= 、===(全等) 、!==(全不等)
== 只是比较两个值是否相等
数字和字符串比较,字符串会转换为数字 console.log(2=='2'); //true
=== 不仅比较值是否相同,还比较类型是否相等
如果数据类型不同,会发生数据类型转换 |
console.log(3>'10'); //false 数字和字符串比较,字符串会转成数字
console.log('a'>'400'); //true 两个字符串比较,比较首个字符的Unicode码('a'.charCodeAt())
console.log(3>'10a'); //false
console.log(3<'10a'); //false '10a'---->NaN
console.log(3=='10a'); //false
NaN和任何值比较(> 、< 、>= 、<= 、== 、!= 、===(全等) 、!==(全不等)),都返回false
NaN==NaN 返回false
(3)逻辑运算符 || (或着) 、&&(并且)、!(非) 返回一个布尔型的值
|| 或着 关联的两个条件只需要满足其一,结果是true,否则false
&& 并且 关联的两个条件都是true,结果是true,否则false
! 非(反向) !true——>false ; !false——>true
练习:声明两个变量保存用户名和密码,如果用户名是'root',并且密码是'123456',打印true,否则打印false var uname='root',pwd='123456'; console.log(uname=='root' && pwd=='123456'); |
逻辑短路: (有假且为假,有真或为真)
&& 当第一个条件为false时,就不需要执行第二个条件
|| 当第一个条件为true时,就不需要执行第二个条件
注意:逻辑短路无需关注最终结果,重点是看是否执行第二条语句
练习:以下程序运行是否报错 var num=3; num>5 && console.log(a); 不会报错,num>5为false,后面的语句不执行 num<1 || console.log(a); 会报错,变量a未声明 练习:声明一个变量保存一个人的年龄,如果满18岁,打印‘成年人’ var age=20; age>=18 && console.log('成年人'); |
(4)位运算符(了解) 按位与(&)、按位或(|)、按位异或(^)、按位右移(>>)、按位左移(<<)
在执行位运算符的时候,计算机会把数字转成二进制进行运算。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
1 10 11 100 101 110 111 1000 1001 1010 1011 1100 1101 1110 1111 10000
十进制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
二进制 | 1 | 10 | 11 | 100 | 101 | 110 | 111 | 1000 | 1001 | 1010 |
100110=100000+100+10
2E5 2E2 32+4+2=38
25 ———16+8+1——》10000+1000+1——》11001
按位与(&) 上下两位都是1,结果是1,否则是0
按位或(|) 上下两位含有1,结果是1,否则是0
按位异或(^) 上下两位不同为1,相同为0
按位右移(>>) 删除二进制的最后的最后一位,每次缩小到原来的一半的一半或者更多
按位左移(<<) 在二进制的最后补0,成倍增加
5&7 | 7|9 | 13|20 | 4^7 | 5^8 |
101 111 | 0111 1001 | 01101 10100 | 100 111 | 0101 1000 |
101 | 1111 8+4+2+1 | 11101 16+8+4+1 | 011 | 1101 |
5 | 15 | 29 | 3 | 13 |
练习:声明变量保存一个年份,判断这个年份是否为闰年,结合逻辑短路,如果是闰年,打印“闰年” 润年:4年一个闰年(能被4整除),并且不能被100整除,或者能被400整除 var year=2000; ( year%4==0 && year%100!=0 || year%400==0 ) && console.log(year+"是闰年");
|
(5)赋值运算符 = += -= *= /= %=
练习://声明一个变量,保存商品价格,价格在原来的基础上打八折,然后打印价格 var price=1000; //price= price*0.8; price*=0.8; console.log(price); |
(6)三目运算符 条件表达式 ? 表达式1 :表达式2
由三个表达式或者数据组成的形式
如果条件表达式为true,执行表达式1;
如果条件表达式为false,执行表达式2
//练习:声明变量保存用户名和密码,如果用户名是root,并且密码是123456,打印登录成功,否则打印登录失败 var uname='root',pwd='123456'; uname=='root' && pwd=='123456' ? console.log('登陆成功') : console.log('登陆失败'); |
浏览器端函数
alert() 弹出警示框(消息框)
prompt() 弹出提示框(输入框),需要使用变量来接收输入的值,值的类型是字符串型
练习://弹出两次提示框,分别输入两个数字,计算两个值相加,把相加的结果以警示框弹出 var res1= prompt('请输入第一个数字'); var res2= prompt('请输入第二个数字'); var sum = Number(res1)+Number(res2); alert(sum); | var num1= prompt('请输入第一个数字'); var num2= prompt('请输入第二个数字'); num1=Number(num1); num2=Number(num2); alert(num1+num2); |