一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
web发展史
Mosaic,是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于1993年问世。
1994年11月，Mosaic浏览器的开发人员创建了网景公司（Netscape Communications Corp.），并发布了Mosaic Netscape 1.0 beta浏览器，后改名为Navigator。
js历史
JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。期初JavaScript被命名为LiveScript，后来为了借助Java语言创造良好的营销效果最终改名JavaScript
浏览器组成
-
shell部分
-
内核部分
渲染引擎（语法规则和渲染）、js引擎、其他模块
js的特色
解释性语言
扩展：（必须了解）
编译： c、c++ ------------------------- 解释： javascript、php
优点：快 --------------------------------优点：跨平台（不需要编译成文件）
不足：移植性不好（不跨平台）--------不足：稍微慢
单线程（js引擎）
同步：一步一步执行
异步：同时执行
ECMA标注
ECMAScript
js三大部分
ECMAScript、DOM、BOM
几大主流浏览器及其内核：(专业知识，必须记住)
IE trident
Chrome webkit/blink
firefox Gecko
Opera presto
Safari webkit
如何引入js?
-
页面级js
<script type="text/javascript"> document.write('hi'); </script> -
外部引入js
<scrip type="text/javascript" src="lesson.js"></script>
为符合web标准（w3c标准中的一种）结构、样式、行为相分离，通常采用外部引入。
js基本语法
变量 var a=100;//声明的同时赋值
命名规则
- 变量名必须以英文字母、 _ 、$ 开头，不能以数字开头
- 变量名可以包括英文字母、_、$、数字
- 不可以用系统的关键字、保留字作为变量名
- 严格区分大小写
- 变量名必须有意义（最好采用英文）
- 驼峰命名法 如 myFirstName
我们尽量不要直接使用name 作为变量名（name在浏览器中有特殊的含义的）
关键字：有特殊语法含义的
保留字：未来可能会使用到的
值类型——数据类型
原始值(不可改变的原始值)
Number String Boolean underfined null
引用值
array Object function ...date RegExp
var arr = [1,2,3,4,5,false,"abc"];
js语句基本规则：
语句后要用分号结束“；”
js语法错误会引发后续代码终止，但不会影响其它js代码块
书写格式要规范，“= + / -”两边都应该有空格
// var name = prompt('请输入你的昵称');
// alert(name);
//1.更新变量
var myname = 'joy';
console.log(myname);
myname = 'mike';
console.log(myname);
//2.声明多个变量
var age = 18,
address = '地球';
gz = 2000;
//3.只声明，不赋值 结果是？
var sex;
console.log(sex);//undefined
//不声明 不赋值 直接使用某个变量会报错
console.log(tel);
//不声明 直接赋值使用可以执行
qq =110;
console.log(qq);
一个变量被重新赋值后，原有的值会被覆盖，变量值将以最后一次赋的值为准。
数据类型简介
引入：为什么需要数据类型？
不同的数据所占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是就定义了不同的数据类型。
- 数字型 Number
js数字类型既可以用来保存整数值，也可以用来保存小数（浮点数）。
数字型范围：
var num;
//这里的 num 我们是不确定属于哪种数据类型的
//js 的变量数据类型是只有在程序运行过程中，根据等号右边的值来确定的
//js 是动态语言 变量的数据类型是可以变化的
var x = 10;//x 是数字型
x = 'joy';//x 是字符型
//1.八进制 0~7 我们程序里面数字前面加0 表示八进制
var num1 = 010;
console.log(num1);//010 转换为十进制就是 8
//2.十六进制 0~9 a~f #ffffff 数字的前面加 0x 表示十六进制
var num3 = 0x9;
console.log(num3);
var num4 = 0xa;//代表十进制 9
console.log(num4);//转换为十进制就是 10
//3.数字型的最大值
alert(Number.MAX_VALUE);//1.7976931348623157e+308
//4.数字型的最小值
alert(Number.MIN_VALUE);//5e-324
//5.无穷大
alert(Number.MAX_VALUE * 2);//Infinity
//6.无穷小
alert(-Number.MIN_VALUE * 2);//-Infinity
//7.非数字
console.log('joy'-100);//NaN
- 字符串型 String
可以是引号中的任意文本，其语法为双引号 "" 和单引号 " 推荐使用单引号
//isNaN() 这个方法来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回 的是 true
console.log(isNaN(12));//false
//字符串引号嵌套 可以外双内单 或 外单内双
var str = '我是一个"高富帅"的程序员';
console.log(str);
//字符串转义字符 都是 \ 开头 但是这些转义字符需要写在引号里面
var str = '我是一个"高富帅"的\n程序员';
console.log(str);
字符串长度
//1.检测获取字符串的长度 legth
var str = 'wo shi shui';
console.log(str.length);//11
//2.字符串的拼接 + 字符串 + 任何类型 = 拼接之后的新字符串
console.log('沙漠' + '骆驼');// 字符串的 沙漠骆驼
console.log('joy' + 18);// 'joy18'
console.log('joy' + true);// joytrue
console.log(12+12);//24
console.log('12' + 12);//'1212'
var age = 18;
//变量不要写到字符串里面，是通过和 字符串相连的方式实现的
//口诀：引引加加
console.log('joy' + age + '岁');//joy18岁
//弹出一个输入框（prompt）,让用户输入年龄（用户输入）
//把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
//使用 alert 语句弹出警示框（输出结果）
var age = prompt('请输入您的年龄：');
var str = '您今年' + age + '岁了';
alert(str);
- 布尔型
var flag = true;//flag 布尔型
var flag1 = false;//flag1 布尔型
console.log(flag + 1);//2 true 参与加法运算当1来看
console.log(flag1 + 1);//1 false 参与加法运算当0来看
//如果一个变量声明未赋值 就是 undefined 未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'joy');//undefinedjoy
console.log(variable + 1);//NaN undefined 和数字相加最后的结果是 NaN
//null 空值
var space = null;
console.log(space + 'joy');//nulljoy
console.log(space + 1);//1
//typeof 可以判断变量是什么数据类型
var num = 10;
console.log(typeof(num));//number
var str = 'joy';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//boolean
var vari = undefined;
console.log(vari);//undefined
var timer = null;
console.log(typeof timer);//object
//prompt 取过来的值是 字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
数据类型的转换：
-
转换为字符串类型
加号拼接字符串(重点掌握)
//1.把数字型转换成字符串型 toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
//2.我们利用 String()
console.log(String(num));
//3.利用 + 拼接字符串的方法实现转换效果 (隐式转换)
console.log(num + '');
- 转换为数字型 前两种方法重点掌握
var age = prompt('请输入您的年龄');
//1. parseInt(变量) 可以把字符型的转换为数字型 得到的是整数
console.log(parseInt(age));
console.log(parseInt('3.94'));// 3 取整
console.log(parseInt('120px'));//120 会去掉这个px单位
console.log(parseInt('rem120px'));// NaN
//2. parseFloat(变量) 可以把 字符型的转换为数字型 得到的是小数 浮点数
console.log(parseFloat('3.94'));// 3.14
console.log(parseFloat('120px'));// 120 会去掉这个px单位
console.log(parseFloat('rem120px'));// NaN
//3. 利用Number(变量)
var str = '123';
console.log(Number(str));// 123
console.log(Number('12'));// 12
//4. 利用了算数运算 - * / 隐式转换
console.log('12' - 0);// 12
console.log('123' - '120');// 3
//案例1：
//弹出一个输入框(prompt),让用户输入出生年份(用户输入)
//把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄
//弹出警示框(alert)，把计算的结果输出(输出结果)
var year = prompt('请输入您的出生年份');
var age = 2021 - year;//year 取过来的是字符串型 但是这里用的减法 有隐式转换
alert('您今年' + age + '岁了');
//案例2：
//计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果
var num1 = prompt('请输入第一个数');
var num2 = prompt('请输入第二个数');
var result = parseFloat(num1) + parseFloat(num2);
alert('结果是：' + result);
- 转换为布尔型 Boolean() 函数
代表 空、否定的值 否定的值会被转换成 false,如 ''、0、NaN、null、undefined 其余值都会被转换成true
案例：
var name = prompt('请输入您的姓名');
var age = prompt('请输入您的年龄');
var sex = prompt('请输入您的性别');
alert('您的姓名是：' + name +'\n您的年龄是：'+ Number(age) +'\n您的性别是：' + sex);
解释型语言和编译型语言
