开发工具
前端开发工具介绍
- 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)
-
网页特效 :
JavaScript概述(了解)
发展诞生
- 1995年,Netscape(网景)公司的
Brendan Eich(布兰登·艾奇)
(伊利诺伊大学香槟分校),花了10天时间为Netscape Navigator2.0开发了一个位置为LiveScript
的脚本程序,目的是在浏览器中执行预检测程序(表单校验) - 后来Netscape在与Sun合作之后将其改名为JavaScript。目的是为了利用 Java 这个因特网时髦词汇。
- 微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript(这样命名是为了避免与 Netscape 潜在的许可纠纷)
- 三足鼎立阶段:
- CEnvi的scriptEase
- Netscape的JavaScript
- IE的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; // 声明一个变量 name name = '乘风破浪'; // 一个等号 是赋值,,后面的值赋值给前面的
-
同时声明+赋值
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
-
关键字(了解)
以下这些关键字用于执行特定操作等。按照规则,关键字也是语言保留的,不能用做标识符
break | do | instanceof | typeof |
---|---|---|---|
case | else | new | var |
catch | finally | return | void |
continue | for | switch | while |
debugger* | function | this | with |
default | if | throw | delete |
in | try |
保留字(了解)
未来可能做为关键字的存在
abstract | enum | int | short |
boolean | export | interface | static |
byte | extends | long | super |
char | final | native | synchronized |
class | float | package | throws |
const | goto | private | transient |
debugger | implements | protected | volatile |
double | import | public |
例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中分成多种数据类型,以方便计算机的存储。
基本数据类型
显著的特点: 只能存放一个值
数据类型 | 描述 | 示例 |
---|---|---|
数字型(number)简写:num | 表示一个数字、可以是整数或者小数 | 如:1.1、5666、888 |
**字符串型(**string)简写str | 用单引号或双引号引起来的一个字符串 | 如: “abc”, “张三”, “123”, “123.456”, “这是任意一句话”; 特性:会原样输出 |
布尔型(boolean) 简写:bool | 表示一个“真或假”的正负状态的值。这种类型只有两个值 | 如:true,false |
复合数据类型
显著的特点: 可以存放多个值
数据类型 | 描述 | 示例 |
---|---|---|
数组(array) 简写:arr | 用于存储多个值,后面单独讲 | arr=[1,2], arr=[ 18,‘zs’ ] |
对象(object)简写:obj | 后面单独讲. | var obj = new Object(); // 创建一个空对象 { } |
特殊类型
数据类型 | 描述 | 示例 |
---|---|---|
空类型(null) | 表示“空值”,或者说“没有值” | 如:// 创建一个空类型 var name = “zs”; var name = null; console.log(name); var age=’ '; |
未定义类型(undefined) | 没有定义变量的值 | 如:var other;console.log(other); |
数据类型的获取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 = 3
a - b = -1
a * b = 2
a / b = 0.5
a % b = 1
目测,跟数学中的运算符是一样的。但是:
var a = "1", b = "2";
a * b = 2
a / b = 0.5
a - b = -1
a + 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; // number
var num1 = '2'; // string
console.log(num==num1);// 值相等,不判断类型 true
console.log(num===num1) // 值相等,类型不相等 false
赋值运算符:
= += -+ *= /+ %=
运算符 | 例子 | 等价于 | 运算结果 |
---|---|---|---|
= | y = 6 | y = 6 | |
+= | y += 1 | y = y+1 | y = 7 |
-= | y -= 1 | y = y-1 | y = 5 |
*= | y *= 2 | y = y*2 | y = 12 |
/= | y /= 2 | y = y/2 | y = 3 |
%= | y %= 4 | y = y%4 | y = 2 |
关系运算符:
< <= > >= == != ===
运算符 | 说明 | 例子 | 运算结果 |
---|---|---|---|
== | 等于 | 2 == 3 | false |
=== | 恒等于(值和类型都要做比较) | 2 === 2 2 === “2” | true false |
!= | 不等于,也可写作<> | 2 != 3 | true |
> | 大于 | 2 > 3 | false |
< | 小于 | 2 < 3 | true |
>= | 大于等于 | 2 >= 3 | false |
<= | 小于等于 | 2 <= 3 | true |
脚下留心:
语句结束要加分号,虽然不加分号在JS语法上没有什么问题,但是建议不要省略分号,加了分号之后可以使用软件压缩。
逻辑运算符
运算符 | 说明 | 例子 | 运算结果 |
---|---|---|---|
&& | 逻辑与(and) | x = 2;y = 6;x>5 && y>5 | FALSE |
|| | 逻辑或(or) | x = 2;y = 6;x>5 || y>5 | TRUE |
! | 逻辑非,取逻辑的反面 | x = 2;y = 6;!(x > y) | TRUE |
例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+1
console.log(a);
例2:b=2;输出b–的值
var b=2;
b--; // b=b-1
console.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 获取文本框的值 .value
2 检验值是否合格
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进行计算