Javascript入门
1.网页分类
1.1 静态网页
1.1.1 页面的资源都是静态的一经定义，则无法更改
1.2 动态网页
1.2.1 主要针对于网页中数可以变化(这种变化是基于后台服务器的)
2. 网页技术
2.1 HTML 网页标签语法(骨干)
2.2 CSS样式 层叠式样式表(继承 覆盖)(皮囊)
2.3 Javascript (灵魂)
Javascript 发展史
微软 CS架构 不足(1.系统限制 2.客户端 3.维护麻烦)
BS结构(B: 浏览器 浏览器体验差 ---> Javascript )
1995年 网景公司 浏览器技术
注意：Javascript 与Java没有任何关系 是一门独立的语言
Javascript的发展史
微软系统：桌面操作系统(使用鼠标解决所有问题，早期系统系统命名窗口系统)
系统内置浏览器
ECMA 欧洲计算机制造商协会
ECMAScript: Javascript的标准
ECMAScript 5.0
ECMAScript 6.0
JavaScript 概述
ECMAScript 基础语法
DOM 文档对象模型(document object model)
BOM：BOM，浏览器对象模型(brower object model)
Javsscript的特点：
1. 夸平台（PC 终端）
2. 弱类型（强类型：在程序运行时会进行类型检查，类型不对会异常 js不会 ）
3. Javascript是一门面向对象的语言 （every thing is object）
4. 解释执行
Javascript定义
Javascript是在浏览器中运行，因为浏览器中内嵌有Javascript执行内核。
创建一个Javascript程序
创建方式：
1.创建一个HTML页面
2.使用script标签
3.在script标签中书写javascript代码
Javascript基础语法
1. 命名规范
1. 命名以数字、字母、下划线、$ 等组成，且不能以数字开头
2. 多个单词组成时，遵循小驼峰命名
3. 不能以关键字命名（var 等）
4. 命名要有意义
2. 创建Javascript
方式一
1. 创建一个HTML文件
2. 在HTML文件中创建script标签
3. 在script标签中间书写JS代码
方式二：
1. 创建xx.js 文件
2. 在JS文件中书写代码
3. 使用script 标签，将JS文件进行引入
注意：
1. 在实际开发中，尽量使用第二种方式，代码复用性相对高
2. 前端代码中HTML标签与JS代码分离，相对而言，HTML页面代码可读性高
3. 在引用JS文件中script标签中不能书写JS代码
4. 在引入JS文件或者在页面直接定义script标签时，尽量定义在body中，且在body标签最后面
<i style='color:red'>在页面代码是自上而下执行，浏览器一般要先加载页面标签，所以若script标签定在非body最后面，可能出现页面标签没有加载完</i>
[图片上传失败...(image-925e17-1563349876356)]
3. 变量
什么是变量?
在程序执行的过程中，其值能够发生改变的量，被称之为变量
变量语法?
语法：
`var 变量 = 值;`
`var 变量1 = 值 ，变量2 = 值`
`var 变量1 ，变量2`
变量作用域?
在javascript中，作用域只有2种：
1. 全局作用域
**2. 方法级作用域 **
注意：
<i style='color:red'>1.在JS可以定义重名变量，若没有赋值，上一个，若赋值了则会覆盖</i>
<i style='color:red'>2.在JS可以定义变量，建议每行定义一个，且结束使用；</i>
<i style='color:red'>3.在JS可以定义变量，任何类型都可以使用var 关键字</i>
<i style='color:red'>4.在JS可以定义变量，若在方法中，请务必使用var进行修饰，若不适用var修饰，则该变量是全局变量，因为若不使用var修饰，则是全局变量，可能会出现覆盖全局变量的情况，被称之为脏变量，还会浪费内存</i>
4. 运算符
算术运算符
+ 数学中的+
- 数学中减 -
* 数学中的乘
/ 数学中的除
% 取余数运算
+ 拼接符
++ 自增运算符
-- 自减运算符
<script type="text/javascript">
/**
* + - * / % +
*/
//加
console.log(1+2);
//减
console.log(1 - 2);
//乘
console.log(1*2);
//除
console.log(1/2);
//取余数
console.log(2%3);
//拼接
console.log("你好"+1);
var m = 1;
//当++ 在后面时,先参与运算 在自增
console.log(m++);//1
// 当++ 在前面时,先自增再参与运算
console.log(++m);//3
// 当-- 在后时,先参与运算再做自减
console.log(m--);//3
// 当-- 在前面时,先自减再参与运算
console.log(--m);//1
</script>
关系运算符
> 大于
< 小于
== 等于
！= 不等于
=== 全等于
<script>
/**
* > < == != ===
*/
//大于 >
console.log(5 > 4);
//小于 <
console.log(5 < 4);
//等于 == 只比较值
console.log("5" == "5");
console.log("5" == 5);
console.log(5 == 5);
//全等于 会表数据类型
console.log("5" === 5);
console.log("5" === "5");
console.log(5 === 5);
</script>
逻辑运算符
&& 短路与
|| 短路或
！ 非
<script type="text/javascript">
/**
* && || !
*/
//&& 遇到false就返回false,否则返回true
console.log(true&&false);
//|| 遇到true则返回true,否则返回false
console.log(true||false);
// ! 取反
console.log(!true);
</script>
三元运算符
表达式？值1：值2
表达式成立则返回值1，否则值2
<script type="text/javascript">
/**
* 表达式?值1:值2;
* 若表达式最终运算结果为true，则返回值1，否则返回值2
*/
var m = true?3:2;
console.log(m);
var n = false?1:4;
console.log(n);
</script>
5.数据类型
在Javascript中，数据类型分2类：
1.基本数据类型
number、boolean、string、null、undefined
number数据类型 所有的数（整数 和 小数）
<script type="text/javascript">
/**
* 基本数据类型：
* number boolean string null undefined
*/
var m = 5;
var n = 5.2;
console.log(typeof m);
console.log(typeof n);
</script>
注意： 整数和小数都是 number类型
NaN : not a number
Infinity 无穷大
<script type="text/javascript">
/**
* 基本数据类型：
* number boolean string null undefined
*
* number : 整数 小数 NaN Infinity(无穷大)
*/
var m = 5;
var n = 5.2;
console.log(typeof m);
console.log(typeof n);
var x = Number("123x");
console.log(x);
var y = 1/0;
console.log(y);
// 在Javascript中 小数运算很有可能缺失精度
// 一般会将小数转化为整数进行运算,然后再转化为小数
// 货币单位 分 若选择使用元 ,金额都是小数 若使用分 整数
// 在开发中,很多地方最小货币单位都是 分
var m = 0.2;
var n = 0.3;
console.log(m+n);
console.log(0.2 + 0.3);
var x = 0.2 + 0.3 + 0.22;
console.log(x);
</script>
boolean 类型： true false
<script type="text/javascript">
/**
* boolean 类型
* 两个值 ： true false
*/
var m = true;
console.log(typeof m);
var n = false;
console.log(typeof n);
</script>
字符串 string
<script type="text/javascript">
/**
* 在Javascript中，字符串 是string 类型
* 被 双引号 或者 单引号 引用起来的都是字符串
*/
var m = "你好,我是渣渣辉";
console.log(typeof m);
var n = '我是单引号';
console.log(typeof n);
</script>
null 只有 null
undefined : 表示变量声明了但是没有赋值 此时就是undifined
var x;
console.log(typeof x);
2.引用数据类型
引用数据类型: Object(Array, Function, Object, Date等)
数据类型转换
显式转换(强制转换)
Number(value) :将值转化为number
Boolean(value) :将值转化为boolean值
String(value) ： 将值转化为字符串
<script type="text/javascript">
/**
* 强制转换：
* Number(value): 将值转化为 数字
*/
var m = "123.24";
console.log(m+1); //123.241 ---> + 号此时是拼接符号
console.log(Number(m)+1); //124.24 ---> 由于已经转化为数字了所以可以相加
var n = "123.343x2";
console.log(Number(n));// NaN not a number
/**
* Boolean(value): 将值转化为boolean: true false
*
* 当value其值为 0、null、""、false、undefined 或 NaN 时，
* 那么Boolean()转换成Boolean类型的值为 false,其他情况都是true
*/
var m = "true";
console.log(Boolean(m));
var m = "false";
console.log(Boolean(m));
var n = "你好";
console.log(Boolean(n));
console.log(Boolean(""));
console.log(Boolean(0));
console.log(Boolean(1));
console.log(Boolean(null));
var x;
console.log(Boolean(undefined));
console.log(Boolean(x));
console.log(Boolean(NaN));
var m = 10;//转化boolean 是 true
//隐式转换
if(m){
console.log("if m 了 我呆了");
}
/**
* String 字符串转换
*/
var m = 10;
console.log(m+1);//此时是数字 所以相加
console.log(String(m)+1);//此时字符串 所以拼接
</script>
隐式转换
在Javascript中，变量参与运算若数据类型不一致，会进行自动转换，这种转换被称之为隐式转换，且遵循显式转换的规则。
<script type="text/javascript">
var m = 10;
//此时是三元运算符 m处应该是一个boolean值,此时m被自动转化为了true
var n = m?5:1;
console.log(n);
//此时运算结果 应该是 boolean值 true或者false
// 5 --> true 3 ---> true
// true
console.log(5&&3);
</script>
**parseInt(value): 将值转化为数字 ，只转化整数 **
parseFloat(value):将值转化为数字，转化小数
<script type="text/javascript">
/**
* Number(值)
* parseInt(值)
* parseFloat(值)
*
*/
var m = "123.22";
console.log(Number(m));//123.22
console.log(parseInt(m));// 将数字转化为整数
console.log(parseFloat(m));//将数字转换为小数
var m = "123.22x";
console.log(Number(m));//NaN
console.log(parseInt(m));// 123 将数字转化为整数
console.log(parseFloat(m));//123.22 将数字转换为小数
var m = "12322x22";
console.log(Number(m));//NaN
console.log(parseInt(m));// 123 将数字转化为整数 将字符串转化为数字时,从左侧开始,只要是数字就进行转化,转化到非数字或者结尾
var m = "123.11.22";
console.log(parseFloat(m));//parseFloat 转化为时 将字符串转化为数字,从左侧开始,只要是数字或者小数点.只转化到第一个小数点
</script>
Javascript 内置组件
<script type="text/javascript">
/**
*javascript 内置组件
* 1.弹出警告框(弹出框)
* alert("内容");
* 2.询问框
*
* 3.确认框
* confirm(提示的文字);
*/
//警告框
alert("我是警告框");//会阻塞程序 js是单线程
console.log("我是第19行");
//确认框
var flag = confirm("你确定要退出吗?");
console.log(flag);
//询问框
var sex = prompt("请输入你的性别:","男或者女");
console.log(sex);
</script>
6. 条件分支语句
if if ...else ... if... else if..else....
switch
<script type="text/javascript">
/**
* 程序执行的顺序: 自上而下执行
* 条件分支
* if(表达式){
代码块;
}
* 语法解释：
* 若表达式最终运算结果为true,则执行代码块
*
* if(表达式){
代码块1;
}else{
代码块2;
}
* 语法解释:
* 若表达式最终运算结果为true，则执行代码块1否则执行代码块2
*
* if(表达式1){
代码块1;
}else if(表达式2){
代码块2;
}
.......
else{
代码块n;
}
语法解释:
自上而下执行表达式,若表达式最终运算结果为true,则执行相应的代码块,结束分支语句.
若所有的表达式都是false,则执行else后面代码块n;
*
* 循环分支
*
*/
if(true){
console.log("我是44行");
}
if(false){
console.log("我是第47行");
}else{
console.log("我是第49行");
}
if(false){
console.log("我是第52行");
}else if(false){
console.log("我是第54行");
}else if(false){
console.log("我是第56");
}else{
console.log("我是58行");
}
//switch 分支语句
/**
* switch(值){
case 值1:
代码块;
break;
case 值2:
代码块2;
break;
.......
default:
代码块n;
}
语法解释:
判定switch中值与下面case后面值若全等于，则执行相应的代码块。否则执行default中的代码块
*/
var m = "1";//此时是字符串 下面case 后面是 数字,=== 是 false
switch(m){
case 1:
console.log("我是83行");
break;
case 2:
console.log("我是86行");
break;
default:
console.log("我是89行");
}
</script>
7. 循环语句
<script type="text/javascript">
/**
* for循环
* 语法: for(表达式1;表达式2;表达式3){
代码块;
}
* 语法解释：
* 1.执行表达式1
* 2.表达式2
* 3.若表达式2最终运算结果为true,则执行代码块,然后执行表达式3
* 4.执行表达式2，若表达式2最终运算结果为true,则执行代码块,然后执行表达式3
* 5.若表达式2最终运算结果为false,结束循环
*
* while循环
* do...while...循环
*/
for(var i=0;i<10;i++){
console.log(i);
}
for(var i=1;i<10;i++){
var str = "";
for(var j=1;j<=i;j++){
str = str + (j+"*"+i+"=")+(j*i) +" ";
}
console.log(str);
}
console.log("===============================================================")
/**
* while循环
* 语法:
* while(表达式){
代码块;
}
语法解释：
执行表达式,若最终运算结果为true,则执行代码块,否则结束循环,如此反复
*
*/
//打印 1到10
var m = 1;
while(m<=10){
console.log(m);
m++;
}
/**
* do...while...
* 语法:
* do{
代码块;
}while(表达式);
语法解释:
1.先执行代码块
2.执行表达式。若表达最终运算结果为true,则继续执行代码块，如从反复。若表达式最终运算结果为false,则结束循环。
*
*/
var sum = 0;//用于接收累加结果
var num = 1;//表示累加的数
do{
sum = sum + num;
num ++;
}while(num <= 100);
console.log(sum);
</script>
