JS学习一
javascript初识
介绍
JavaScript是一种运行在客户端（自己的电脑上）的脚本语言不是在服务器上
脚本语言：不需要编译，运行过程由JS解释器（js引擎）逐行进行解释并执行
JavaScript不仅可以做前端编程还可以做一些服务端的编程(基于Node.js技术)
浏览器执行JS
浏览器分成两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML与CSS，俗称内核，比如谷歌浏览器的blink,老版本的webkit.
JS引擎：也称JS解析器。用来读取网页中的JavaScript代码，对其处理后运行，比如谷歌浏览器的V8
浏览器本身不会执行JS代码，而是通过内置的引擎来执行JS代码。JS引擎执行代码的时候逐行解释每一句源码(转化为机器语言)，然后由计算机去执行，所以JavaScrip语言归为脚本语言，会逐行解释执行。
当 读到一行JS代码(高级语言)，JS引擎就会将这行代码转化成计算机可以识别的机器语言(01)，之后再读第二行的代码，再转换，以此类推。
JS的组成
- JavaScript组成：ECMAScript\DOM\BOM
- ECMAScript:规定了JS的基础语法
- DOM文档对象模型
- BOM浏览器对象模型
JS的3种书写位置：行内、内嵌、外部
行内式
可以将单引号或少量JS代码写在HTML标签是事件属性中(以on开头的属性)，如：onclik
注意单引号的使用：在html中推荐使用双引号，JS中推荐使用单引号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="device-width, initical-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--1行内式JS直接写道元素内部-->
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
<!--当点onclick击这个按钮的时候弹出警示框alert，框里写了“秋香姐”-->
</body>
</html>
内嵌式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="device-width, initical-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--2内嵌式的JS-->
<!--页面一打开就会弹出沙漠骆驼的对话框-->
<script type="text/javascript">
alert('沙漠骆驼')
</script>
</head>
<body>
</body>
</html>
外部
（1）在html同目录下新建my.js文件
输入：
alert('如果我是DJ，你还爱我吗？')
(2)在html文件中引入my.js文件如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="device-width, initical-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--3.外部JS写法-->
<script src="my.js"></script><!--中间不可以写代码-->
</head>
<body>
</body>
</html>
JS的输入和输出语句
为方便信息的输入输出，JS中提供了一些输入输出语句，常用的语句如下：
prompt(info)
浏览器弹出输入框，用户可以输入，归属浏览器
alert(msg)
浏览器弹出警示框，归属浏览器
console.log(msg)
浏览器控制台打印输出信息，归属浏览器
<script type="text/javascript">
//这是一个输入框
prompt('请输入您的年龄');
//弹出警示框，将计算机输出的内容展示给用户
alert('计算结果是');
//控制台输出 给程序员测试用的(在审查元素中可见)
console.log('我是程序员可以看见的');
</script>
注意：
1．单行注释ctrl +/
2．多行注释默认的快捷键 shif+ctrl + /
变量
变量的使用
变量在使用的时候分两步：
- 声明变量
//声明变量
var age;//声明一个名字为age的变量
var是JS的一个关键字，用于声明变量，使用该关键字声明变量后，计算机会自动为变量分配内存空间。
age是程序员字定义的变量名，我们通过变量名来访问内存中分配的空间。
- 赋值
age = 10;//给age这个变量赋值为10
变量的初始化
var age = 18;//声明变量的同时赋值
命名规范
- 由字母(A-Za-z)，数字(0-9)，下划线(_)，美元符号($)组成。
- 严格区分大小写
- 不能以数字开头
- 不可以是关键字、保留字。
- 变量名必须有意义。
- 遵守驼峰命名法。(首字母小写后面每个单词的首字母大写 myFirstName)
注意：name虽然不是关键字但是它是保留字，在某些浏览器中它有特殊的含义。之前提到不声明不赋值而直接使用某个变量则会导致浏览器报错，但是对于保留字name不会报错，例如：
console.log(name)//不会报错
数据类型
变量的数据
变量用来存储值的所在处，有名字和数据类型。变量的数据类型决定将如何代表这些值的位存储到计算机内存中。JavaScript是一种弱类型或者说是动态语言。不用提前声明变量的类型，在程序运行中变量会被自动确定。
var age;//不确定类型
age = 10;//确定位整型
数据类型的分类
JS的数据类型分：简单数据类型(Number,String,Boolean,Underfined,Null)和复杂数据类型(object)
Number
Number：数字型包括整形值和浮点型值，默认值是0
进制
在JS中八进制前面加0，十六进制前面加0x
var num = 10; //num数字型
var PI = 3.14;//PI数字型
//八进制：0~7程序里数字前加0表示8进制数字
var num1 = 010;
console.log(num1);//打印输出的是8
var num2 = 012;
console.log(num2);//打印输出10
//十六进制：0~9 a~f程序里数字前加0x表示16进制数字
var num3 = 0x9;
console.log(num3);//打印输出的是9
var num4 = 0x12;
console.log(num4);//打印输出的是18
数字型范围
JavaScript中数值的最大值(Number.Max_VALUE)和最小值(Number.MIN_VALUE)
- Number.Max_VALUE： 1.7976931348623157e+308
- Number.MIN_VALUE： 5e-324
- Inifit：无穷大，大于任何数值
- -Infint：无穷小，小于任何数值
- NaN： not a number,代表一个非数值(例如字符串与某个整数进行加减运算)
isNaN()
用于判断一个变量是否为非数字类型，如果是数值返回false，如果是非数字返回true
//isNaN()用这个方法用来判断非数字，并且返回一个值，如果是数字则返回false否则返回true
console.log(isNaN(12));//false
console.log(isNaN('世界观'))//true
String
String：字符串类型，默认值是空字符串""
- 引号可以是单引号也可以是双引号,推荐在JS中用单引号(html中用双引号)
- 转义字符
| 转义符 | 解释说明 |
|---|---|
\n | 换行符，n是newline的意思 |
\ | 斜杠 |
' | 单引号 |
" | 双引号" |
\t | tab缩进 |
\b | 空格(b是blank的意思) |
- 字符串长度及拼接
length属性用于获取字符串的长度：
//检测字符串长度length
var str = 'my name is andy';
console.log(str.length);
利用’+'进行字符串的拼接，
口诀：数值相加，字符相连
console.log('沙漠'+'骆驼');//沙漠骆驼
//字符型和其他类型进行拼接最后的结果还是字符串型的
console.log('pink老师'+18);//pink老师18
console.log(18+'pink老师');//18pink老师
console.log(true+'pink');//truepink
console.log('12'+12);//1212
//但是以下就不是拼接
console.log(12+12);//24
字符串拼接加强：
var age = 18;
console.log('pink老师'+age+'岁');
Boolean
Boolean：布尔值类型如true,false,默认值false
var flag = true;
var flag1 = false;
console.log(flag+1);//2
console.log(flag1+1);//1
Undefined
var a;声明了变量但是没有给值，此时a=underfined，默认值underfined
//如果一个变量声明但是未赋值 就是underfined未定义数据类型
var str;
console.log(str);//undefined
var variable = undefined;
console.log(variable);//undefined
console.log(variable+'pink');//undefinedpink 字符串类型
console.log(variable+1);//NaN undefined和数字相加最后的结果是NaN
console.log(variable+true);//NaN
Null
var a=null;声明了变量a为空值
//null
var space = null;
console.log(space);
console.log(space+'pink');//nullpink
console.log(space+1);//1
获取变量的数据类型
typeof
typeof可以用来获取检测变量的数据类型
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
利用typeof验证prompt取过来的值的类型
age = prompt('请输入您的年龄');
console.log(age);// 18
console.log(typeof age);// string
console
除了可以用typeof来检测变量属于哪一种类型还可以通过浏览器控制台console的颜色来判断属于哪一种数据类型
console.log(18);// 数字型 纯蓝色
console.log('18');// 字符型 黑色
console.log(true);// 布尔型 墨蓝色
console.log(undefined);// 浅灰色
console.log(null);// 浅灰色
字面量
字面量是在源代码中一个固定值的表示方法，通俗来说就是字面量表示如何表达这个值
- 数字字面量： 8，9，10
- 字符串字面量： ‘黑马程序员’,‘大前端’
- 布尔字面量：true,false
数据类型转换
什么是数据类型转换
使用表单(input)、prompt获取过来的数据默认是字符串类型，此时就不能直接简单地进行加法运算，而需要转换变量的数据类型，通俗来说就是把一种数据类型变量转化成另一种数据类型。
常用的3种方式的转换
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
转换为字符串类型
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 转成字符串 | var num= 1; alert(num.toString()); |
| String()强制转换 | 转成字符串 | var num= 1; alert(String(num)); |
| '+'拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num+“我是字符串”); |
var num = 10;
//1. 把数字型转换成字符串 格式：变量.toString()
var str = num.toString();
console.log(str);
console.log(typeof str);
//2. 我们利用String() 格式：String(变量)
console.log(String(num));
//3. 利用+拼接字符串的方法实现转换效果 隐式转换
console.log(num+'');
转换为数字类型（重点）
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt(string)函数 | 将string类型转成整数数值型 | parseInt(‘18.9’) |
| parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat(‘120px’) |
| Number()强制转换函数 | 将string类型转换为数值型 | Number(‘12’) |
| js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12’-0 |
(1) 方法1：parseInt(变量)
var age = prompt('请输入您的年龄');
// 1. parseInt(变量) 可以把字符型的转化为数字型 得到的是整数（直接把小数点后面的数字抹掉）
console.log(parseInt(age));
console.log(parseInt('18.9')); // 18
console.log(parseInt('120px')); // 120 会直接将后面的字母去掉
console.log(parseInt('rem120px'));// NaN
(2) 方法2：parseFloat(变量)
// 2. parseFloat(变量)可以把字符型转化为数字型 得到的是小数 浮点数
console.log(parseFloat('3.14'));
console.log(parseFloat('120px')); // 120 会直接将后面的字母去掉
console.log(parseFloat('rem120px'));// NaN
（3）方法3：Number(变量)
// 3. 利用Number(变量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
(4) 利用了算数运算-*/隐式转换
// 4. 利用了算数运算-*/隐式转换
console.log('12'-0);//12 若中间是加号则'120'
console.log('123'-'120');// 3 若是加号则是'123120'
console.log('123'*1);// '123'
console.log('123'/1);// '123'
(5) 计算年龄案例
// 在页面中弹出一个输入框，我们输入出生年份后，能计算出我们的年龄
var year = prompt('请输入您的出生年份');
var age = 2019 - year;// year这里是字符串类型
alert('您的年龄是'+age+'岁');
(6) 简单计算器
// 弹出输入框用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果
var num1 = prompt('请输入第一个值');
var num2 = prompt('请输入第二个值');
result = parseFloat(num1)+parseFloat(num2);
alert('计算结果是'+result);
转换为布尔型
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean()函数 | 其他类型转成布尔型 | Boolean(‘true’) |
- 代表空的、否定的值都会被转化为false, 如：
''、0、NaN、null、underfined - 其余值都会被转化为true
console.log (Boolean ( " ")) ; // false
console. log (Boolean (0)) ; // false
console.log (Boolean (NaN)) ; // false
console.log (Boolean (null)); // false
console.log (Boolean (undefined)); // false
console.log (Boolean ( '小白') ); // true
console.log(Boolean (12)) ; // true
解释型语言和编译型语言
解释性语言和编译性语言的特点
计算机不能直接理解任何除了机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言被翻译成机器语言的工具被称为翻译器。
翻译器翻译的方式有两种，一种是编译，另一种是解释，两者之间的区别在于翻译的时间点不同。
- 编译器是在代码执行之前进行编译，生成中间代码文件。Java就是编译型的语言。(编译语言：首先把所有菜做好，才能上桌吃饭)
- 解释器就是在运行时进行及时解释，并立即执行，JS就是典型的解释型语言：
解释一行，执行一行。(当编译器以解释方式运行的时候，也成为解释器。解释语言：好比吃火锅，边吃边涮，同时进行)
标识符、关键字、保留字
- 标识符：指开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字。
- 关键字：是指JS本身已经使用了的字，不可再用它充当变量名、方法名。包括：break case catch continue default
delete do else finally for function if in instanceof new return
switch this throw try typeof var void while with等。 - 保留字：实际上就是预留的关键字，意思是现在虽然不是关键字，但是未来可能会成为关键字，同样不能使用变量名和方法名。包括： boolean byte char class const debugger double enum export extends fimal float goto implements import int interface long mative package private protected public short static super synchronized throws transient volatile等。
运算符
运算符(操作符)
JavaScript中常用的运算符有：
- 算数运算符
- 递增递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
算数运算符
| 运算符 | 描述 |
|---|---|
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 取余 |
浮点数进行算数运算
//程序里利用浮点数进行算数运算会产生误差，这里应该尽量避免用浮动数进行算数运算，针对这个问题之后会有其他的方法。
console.log(0.1 + 0.2);//0.30000000000000004
console.log(0.07 * 100);//7.000000000000001
//不可以直接用浮点数来进行相比较 是否相等 所以不要之间判断两个浮点数是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3);//false
表达式和返回值
- 表达式：数字、运算符、变量等以能求得数值的有意义的排列方法所得到的组合。
- 返回值：表达式都会有一个最终的结果返回给我们，这个结果称为返回值
递增递减运算符
(++)和(- -)递增递减运算符必须和变量配合使用，++2是无效的
前置递增
- 前置递增单独使用的时候：++num;等效于num=num+1;
- 前置递增非单独使用的时候：先num自己加一，之后表达式++num;返回当前的num值。
//++num
var num = 10;
console.log(++num + 10);//21
后置递增
- 后置递增单独使用的时候: num++;等效于num=num+1;
- 后置递增非单独使用的时候: 表达式num++;先返回当前的num值，之后num自己加一。 变量永远比表达式大1
//count++
var count = 10;
console.log(count++ + 10) // 20 (先返回值，后自加1)
console.log(count); // 11
注意：
console.log(count++)也是混合使用，也是先返回当前值再自加1。
后置：先原值运算，后自加(先人后己)
前置：先自加，后运算(先已后人)
var a = 10;
++a; // a 是 11 ,++a是11
var b = ++a +2;//a是12，++a是12，b是14
console.log(b);//14
var c = 10;
c++;//c++是11，c是11
var d = c++ +2;//c++是11，c是12，d是13，
console.log(d);//12
var e = 10;
var f = e++ + ++e;//e++是10，e是11。 e是12，++e是12，f是22
console.log(f);//22
比较运算符
比较运算后，会返回一个bool值作为比较运算的结果。
| 运算符名称 | 说明 | 案例 | 结果 |
|---|---|---|---|
| < | 小于号 | 1<2 | true |
| > | 大于号 | 1>2 | false |
| >= | 大于等于号(大于或者等于) | 2 >= 2 | true |
| <= | 小于等于号(小于或者等于) | 3<= 2 | false |
| == | 判等号（会转型) | 37 == 37 | true |
| != | 不等号 | 37!= 37 | false |
| === !== | 全等要求值和数据类型都一致 | 37=== ‘37’ | false |
console.log(18 == 18);//true
//默认转换数据类型，将字符型的转换为数字型的再进行比较
console.log(18 == '18');//true
//全等
console.log(18 === 18);//true
console.log(18 === '18');//false
| 符号 | 作用 | 用法 |
|---|---|---|
| = | 赋值 | 把右边给左边 |
| == | 判断 | 判断两边值是否相等(注意此时有隐式转换) |
| === | 全等 | 判断两边的值和数据类型是否完全相同 |
逻辑运算符
用于进行布尔值运算的运算符，返回值也是一个布尔值，后面的开发中经常用于多个条件判断
- 逻辑与&&
- 逻辑或||
- 逻辑非！
//&&
console.log(3 > 5 && 3 > 2);//false
console.log(3 < 5 && 3 > 2);//true
//||
console.log(3 > 5 || 3 > 2);//true
console.log(3 > 5 || 3 < 2);//false
//!
console.log(!true);//false
逻辑运算符短路运算（逻辑中断）
原理：当有多个表达式(值)时，左边的表达式可以确定结果时，就不在继续运算右边的表达式的值了。
(1)逻辑与
- 语法：表达式1 && 表达式2
- 如果第一个表达式为真，则返回表达式2
- 如果第一个表达式为假，则返回表达式1
console.log(123 && 456)//456
console.log(0 && 456)//0
console.log(0 && 1 + 2 && 456);//0
console.log('' && 1 + 2 && 456);//''
//0 null undefined NaN都为false
(2)逻辑或
- 语法：表达式1 || 表达式2
- 如果第一个表达式为真，则返回表达式1
- 如果第一个表达式为假，则返回表达式2
//||
console.log(123 || 456)//123
console.log(123 || 456 || 456 + 123)//123
console.log(0 || 456 || 456 + 123)//456
(3)小练习
var num = 0;
console.log(123 || num++);
console.log(num);//0
赋值运算符
| 赋值运算符 | 说明 | 案例 |
|---|---|---|
| = | 直接赋值 | var usrName =‘我是值’; |
| +=、-= | 加、减一个数后在赋值 | var age = 10; age+=5; // 15 |
| *=、 /=、 %= | 乘、除、取模后在赋值 | var age = 2; age*=5; // 10 |
运算符优先级
优先级由高到低排列如下：
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++； --； ！ |
| 3 | 算数运算符 | 先* / %后+、- |
| 4 | 关系运算符 | >、 >=、 <、 <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&&后` |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
- —元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
console.log ( 4 >= 6 || '人'!='阿凡达'&& ! (12 * 2 == 144) && true) // true
var num = 10;
console.log ( 5 == num / 2 && (2+ 2 * num).tostring () === '22') ; // true
var a = 3 > 5 && 2 <7 && 3 == 4;
console.log(a) ; // false
var b = 3 <= 4 || 3 >1 || 3 != 2;
console.log(b); // true
var c = 2=== "2";
console.log(c) ; // false
var d = !c || b&& a ;
console.log(d); // true
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
