开发工具
前端开发工具介绍
sublime text：收费的代码编辑器 ,打开速度快,效率高Visual Studio Code（vs code）:微软开发的免费编辑器,集成终端效果好!atom：github发布的代码编辑器webstorm：誉为web前端开发神器, 但是 合成的插件和配置太多,导致开启速度慢 , 适合初学者! 如果大家安装,安装 11 版本,不要下载最新的,部分电脑系统兼容问题很大! HBuilder：国产的web开发工具用什么工具不重要，目的都是为了写代码，用熟了都一样
vscode 安装插件使用
open in browser 打开默认浏览器,以虚拟主机的方式打开 ;Path intellisense 自动提示路径 :Chinese (Simplified) Language 中文简体包view in browser 打开浏览器,以文件的形式打开vscode 的其他用法
隐藏右边迷你预览图 => 查看 => 切换小视图
侧边栏左右切换 : =>查看 => 向右切换侧边栏
打开文件夹 : => 文件 => 打开文件夹
资源管理器中:新建文件 + 新建文件夹 + 刷新 + 全部折叠文件夹
vscode 常用快捷键
Ctrl + / : 注释
Alt+B : 快速开启浏览器
复制 : shift + alt + ↓
移动 : alt + ↓
格式化代码规范 : shift + alt + F
折叠侧边栏 : Ctrl + B
ctr + ` => 切换vscode终端
浏览器调出控制台
F12 打开控制台
mac双系统的 F12 = fn+F12
以前讲过的 :
Ctrl+N : 新建Ctrl + C : 复制 ( 光标在这一行即可)Ctrl + X : 剪切当前行Ctrl+Z 撤销这一次操作Ctrl+Shift+Z : 反撤销
为什么要学习javaScript
网页三部分：
HTML：控制网页的结构
CSS：控制网页的样式
JavaScript：控制网页的行为
不同于HTML和css，JavaScript是一门编程语言，因此要比HTML和css复杂一些，学习的时间也更长。
最初的javascript
用于判断客户端的输入（表单校验）
现在的JavaScript：现在的JS无所不能
异步与服务器交互（AJAX）网页和特效（演示）服务端开发（nodejs）命令行工具开发（nodejs）桌面程序（Electron）app开发（ReatNative）控制硬件–物联网（Ruff）游戏开发（cavans, cocos2d-js）
网页特效 :
美女相册Canvas游戏
JavaScript概述(了解)
发展诞生
1995年，Netscape(网景)公司的Brendan Eich(布兰登·艾奇)（伊利诺伊大学香槟分校），花了10天时间为Netscape Navigator2.0开发了一个位置为LiveScript的脚本程序，目的是在浏览器中执行预检测程序（表单校验）后来Netscape在与Sun合作之后将其改名为JavaScript。目的是为了利用 Java 这个因特网时髦词汇。微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）三足鼎立阶段： CEnvi的scriptEaseNetscape的JavaScriptIE的JScript 标准化阶段：1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，最终锤炼出来了ECMA-262，该标准定义了一门全新的脚本语言，名为ECMAScript。JavaScript的组成(掌握)
三部分 ECMAScript、BOM、DOM
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdItCFAj-1603160744745)(/1576394330618.png)]
ECMAScript - JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准,与具体实现无关DOM：一套操作网页元素的API(方法)BOM：一套操作浏览器功能的API(方法)
Js和H5的关系
HTML5是一种新的技术，就目前而言，我们所知的HTML5都是一些标签，但是有了JS之后，这些标签深层的扩展功能才得以实现。
JavaScript初体验
js使用方式(记忆)
可以有两种方式在HTML页面进行引入，一种是外联，一种是内部标签。
外联
<script src="js文件路径"></script>这是一对html标签，原则上可以放在html页面的任意位置,src后链接的是JavaScript文件，文件的扩展名为.js，如index.js,在里面直接写js文件即可.<script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"> </script>注意:一般是将js代码放到body最后,多以当执行到js代码时,html页面都已载入完成,避免找不到元素而报错.
例1: 引入demo.js文件,输出内容
alert('见过你的美,还能爱上谁');
注意:外联方式在写项目的时候,使用.
标签写法
直接写在html文件内
<script type="text/javascript">//在script标签内写js脚本</script>简写:<script>//在script标签内写js脚本</script> 错误的写法：<script src="js文件路径">//在script标签内写js脚本</script>
注意要写在script标签之内
行内写法
<a href="#" onclick="alert(666)"> 点我</a>
js的输出(记忆)
例1:在页面上输出’I have a dream’
document.write('I have a dream');
例2:输出’I have a dream’切加粗
// 文本加粗输出document.write('<strong> I have a dream</strong>');
例3:控制台中的输出
console.log('I have a dream');打开浏览器,按住F12键,即可召唤出控制台,后面js的效果调试都在这里console.error('错误信息');
例4:以弹出框的形式输出内容
alert(123);
例5: confirm 确认框
//confirm弹出一个确定框confirm("我帅吗？");
javaScript的注释(掌握)
1、可以将暂时不需要执行的代码注释，就可以不允许，保留一些代码以备后用2、注释可以用来解释代码的含义，每个人的代码，不管现在还是工作中都必须写学习期间 注释是代码的150%工作期间 注释是代码30%-50%3、注释还可以用来记录个代码不同版本直接修缮问题
行注释 //
表识当前行的代码不注释,或者解释下一行代码的意思
块注释
/*代码块*/多用来多行代码注释不执行,或者解释某一块代码的功能.
变量的概念及基本运算(掌握)
变量声明
语法格式
直接声明变量
// var 来声明变量的// age : 变量名// 结构 : var + 变量名 ; var age;
先声明,后赋值
var name; // 声明一个变量 namename = '乘风破浪'; // 一个等号 是赋值,,后面的值赋值给前面的
同时声明+赋值
var name = '峰哥好靓';var str = "靓的飞起来";console.log(name,str);
同时声明多个变量并赋值
var age = 10,name= 'zs' // 相当于var age = 10;var name = 'zs';console.log(name,age);
不声明变量，直接赋值(不会报错，但是不推荐)
// 没有用 var 修饰的不管代码在哪里都是全局的// 不推荐 height=100;console.log(height);
不声明变量，也不赋值变量，直接使用（会报错）
// weight is not defined 要知道是没有定义,,估计是变量名写错了console.log(heightt);
结论：
变量需要声明之后，才能使用，养成一个良好的编程习惯。javascript代码一旦报错了，后面的代码就不再执行了。
变量命名规则
规则: ( 必须遵守的,不遵守会报错 )
由字母、数字、下划线、$符号组成 ;
不能以数字开头
区分大小写
不能是关键字和保留字(不用死记 , 慢慢就见多了)
//关键字：对于js来说有特殊意义的一些单词//保留字：js保留了一些单词，这些单词现在不用，但是以后要用。
规范: (建议遵守的 不遵守不会报错)
变量名必须有意义
遵守驼峰命名法。 首字母小写,后面单词的首字母需要大写!
myName, userPassword
关键字(了解)
以下这些关键字用于执行特定操作等。按照规则，关键字也是语言保留的，不能用做标识符
保留字(了解)
未来可能做为关键字的存在
例1:以数字开头的变量
var a = 'I have a dream!';console.log(a);var 2a = 'Hello';console.log(2a);
例2:以关键字开始的变量
<script>var do = '测试';console.log(do);</script>
变量类型(记忆)
六种基本数据类型
1 变量中的数据时需要存储在计算机中的
2 计算机底层只能识别0和1,所以需要对不同类型的数据进行转.
3 转换的结果会导致所需空间不同，所以JS中分成多种数据类型，以方便计算机的存储。
基本数据类型
显著的特点： 只能存放一个值
复合数据类型
显著的特点： 可以存放多个值
特殊类型
数据类型的获取typeof()
typeof() 检测当前变量的数据类型的方法
例1: 分别检测a=1,b='1’的数据类型
// 1 声明变量var a=1;var b='1';// 2 使用typeof进行检测console.log(typeof(a));console.log(typeof(b));
例2:检测a=true,b={}
<script>// 1 声明变量var d={};var f=true;// 2 使用typeof进行检测console.log(typeof(d));console.log(typeof(f));</script>
运算符(掌握)
算术运算符
JS中的运算符
算术／赋值／关系／逻辑／字符串
算术运算符： +加法 -减法 *乘法 /除法 %取余var a = 1, b = 2;a + b = 3a - b = -1a * b = 2a / b = 0.5a % b = 1
目测，跟数学中的运算符是一样的。但是：
var a = "1", b = "2";a * b = 2a / b = 0.5a - b = -1a + b = ???
+号，有两层意思.
第一层算数之间的加法；第二层字符串的连接；执行过程中，先检测加号两边的数据类型，如果发现字符型，那就先 生效字符的连接数据类型转换：强制转换、隐式转换
例1:将I have a dream 和 I want to beauiful girl进行链接
var str1 = 'I have a dream';var str2 = 'I want to betiful girl';var str3 = str1+str2;console.log(str3);
其实还是有点不一样：和我们概念中的逻辑运算符很多都是不一样的：比如： = == ===var num=2; // numbervar num1 = '2'; // stringconsole.log(num==num1);// 值相等,不判断类型 trueconsole.log(num===num1) // 值相等,类型不相等 false
赋值运算符：
= += -+ *= /+ %=
关系运算符：
< <= > >= == != ===
脚下留心:
语句结束要加分号，虽然不加分号在JS语法上没有什么问题，但是建议不要省略分号，加了分号之后可以使用软件压缩。
逻辑运算符
例1: 使用逻辑运算符&&输出 x = 4;y = 8; x>5 && y>5
var x = 2;var y = 6;console.log(x>5 && y>5);console.log(x>1 && y>1);两边都要满足条件才能成立,返回true
例2: 使用 || 运算符
var x = 4; var y = 8;console.log(x>5 || y>5);console.log(x<2 || y<2);一边满足条件,即可成立,返回true
例3: 使用逻辑运算符! 输出 x = 2;y = 6;!(x > y)
console.log(!(x>y));
一元运算符
自增(++)/自减(–)运算
a++表示在a原有的基础上增加1
相当于: a = a+1;
a–表示在a原有的基础上减小1
相当于: a = a-1;
例1:a=1;输出a++的值
var a=1;a++; // a= a+1console.log(a);
例2:b=2;输出b–的值
var b=2;b--; // b=b-1console.log(b);
思考:++a和–a呢?
例3:a=1;输出++a的值
<script>var a=1;console.log(a++);console.log(a);</script>
例4:a=2;输出–a的值
<script>var a=2;console.log(a--);console.log(a);</script>
脚下留心
前自增与后自增有本质的区别，他们相同点都是为自身加了1，不同点是前自增是先加1，再使用操作数的值后自增是先使用操作数的值，再加1
练习与应用
1.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
var a = 89;// 取整var b = parseInt(a/24);// 取剩下的小时.var c = a%24;// console.log(b);// console.log(c);//document.write(b);// 字符串连接document.write('一共'+b+'天'+c+'小时');
2.小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
提示： 1摄氏度(℃)=33.8华氏度(℉) 。
应用
1．计算两个变量的和
2.掌握逻辑运算的意义
&& 两边都成立,才为true
|| 一边成立就为true
! 取反
各人练习
1.计算一个半径为80cm的圆的面积。打印到页面上。
2.var k=10; console.log(k++ + ++k +k +k++);
提高题:计算两个文本框的加减乘除
1 获取文本框的值 .value2 检验值是否合格3 判断进行的是+-*%那个运算4 使用switch进行计算
是先使用操作数的值，再加1
练习与应用1.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
var a = 89;// 取整var b = parseInt(a/24);// 取剩下的小时.var c = a%24;
// console.log(b);
// console.log©;
//document.write(b);
// 字符串连接
document.write(‘一共’+b+‘天’+c+‘小时’);
2.小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。提示： 1摄氏度(℃)=33.8华氏度(℉) 。应用1．计算两个变量的和2.掌握逻辑运算的意义&& 两边都成立,才为true|| 一边成立就为true! 取反作业1.计算一个半径为80cm的圆的面积。打印到页面上。2.var k=10; console.log(k++ + ++k +k +k++);提高题:计算两个文本框的加减乘除
1 获取文本框的值 .value
2 检验值是否合格
3 判断进行的是±*%那个运算
4 使用switch进行计算
