JavaScript基础入门学习教程
时间:2018-10-12
本文章向大家介绍JavaScript基础入门学习教程,需要的朋友可以参考一下
JS基础
一、JS语言介绍
1、概念
- 浏览器脚本语言
- 可以编写运行在浏览器上的代码程序
- 属于解释性、弱语言类型编程语言
2、组成
- ES语法:ECMAScript、主要版本ES5和ES6
- DOM:文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标志语言的标准编程接口。
- BOM:浏览器对象模型(Browser Object Model),提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;且由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
二、三种存在位置
1、行间式:存在于行间事件中
<body id="body" onload="body.style.backgroundColor='#0ff'">
</body>
2、内联式:存在于页面script标签中
<body id="body">
<script type="text/javascript">
body.style.backgroundColor='#0ff'
</script>
</body>
3、外联式:存在于外部JS文件,通过script标签src属性链接
index.js文件
body.style.backgroundColor='#0ff'
index.html文件
<script src="./js/index.js"></script>
三、解释性语言特性决定JS代码位置
- 出现在head标签底部:依赖型JS库
- 出现在body标签底部:功能型JS脚本
四、JS语法规范
- 注释
// 单行注释
/*
多行注释
*/
- 以分号作为语句结尾(允许省略)
五、变量的定义
1、ES5定义变量
var num = 10; // 无块级作用域变量
num = 10; // 全局变量
2、ES6定义变量
let num = 10; // 局部变量
const NUM = 10; // 常量
3、变量(标识符)的命名规范
- 由字母,数字,_,$组成,不能以数字开头(可以包含中文字符)
- 区分大小写
- 不能出现关键字及保留字
abstract | arguments | boolean | break | byte |
case | catch | char | class* | const |
continue | debugger | default | delete | do |
double | else | enum* | eval | export* |
extends* | false | final | finally | float |
for | function | goto | if | implements |
import* | in | instanceof | int | interface |
let | long | native | new | null |
package | private | protected | public | return |
short | static | super* | switch | synchronized |
this | throw | throws | transient | true |
try | typeof | var | void | volatile |
while | with | yield |
六、三种弹出框
- alert:普通弹出框
- confirm:确认框,拥有返回值,点击确认返回true,点击取消返回false
- prompt:输入框,拥有返回值,点击确认返回输入的内容,点击取消返回null
七、四种调试方式
- alert()
- console.log()
- document.write()
- 浏览器断点调试
八、数据类型
1、值类型
- number:数字类型
var a = 10;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'number')
- string:字符串类型
var a = '10';
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'string')
- boolean:布尔类型
var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'boolean')
- undefined:未定义类型
var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'undefined')
console.log(a == undefined)
2、引用类型
- function:函数类型
var a = function(){};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'function')
- object:对象类型
var a = {};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
3、具体的对象类型
- null:空对象
var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a == null)
- Array:数组对象
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)
- Date:时间对象
var a = new Date();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)
- RegExp:正则对象
var a = new RegExp();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)
4、类型转换
- 数字|布尔 转换为 字符串
var a = 10 or true
String(a)
a.toString()
- 布尔|字符串 转换为 数字
var a = true or '10'
Number(a)
+ a
parseFloat()
parseInt()
- 字符串|数字 转换为 布尔
var a = 10 or '10'
Boolean(a)
- 自动转换
5 + null // 5
"5" + null // "5num"
"5" + 1 // "51"
"5" - 1 // 4
- 特殊产物
// NaN: 非数字类型
// 不与任何数相等,包含自己
// 利用isNaN()进行判断
九、运算符
1、算数运算符
前提:n = 5
运算符 | 描述 | 例子 | x结果 | n结果 |
---|---|---|---|---|
+ | 加法 | x=n+2 | 7 | 5 |
- | 减法 | x=n-2 | 3 | 5 |
* | 乘法 | x=n*2 | 10 | 5 |
/ | 除法 | x=n/2 | 2.5 | 5 |
% | 驱魔(余数) | x=n/2 | 1 | 5 |
++ | 自增 | x=++n | 6 | 6 |
x=n++ | 5 | 6 | ||
-- | 自减 | x=--n | 4 | 4 |
x=n-- | 5 | 4 |
2、赋值运算符
前提:x=5,y=5
运算符 | 例子 | 等同于 | 运算结果 |
---|---|---|---|
= | x=y | 5 | |
+= | x+=y | x=x+y | 10 |
-= | x-=y | x=x-y | 0 |
*= | x*=y | x=x*y | 25 |
/= | x/=y | x=x/y | 1 |
%= | x%=y | x=x%y | 0 |
3、比较运算符
前提:x=5
运算符 | 描述 | 比较 | 结果 |
---|---|---|---|
== | 等于 | x=="5" | true |
=== | 绝对等于 | x==="5" | false |
!= | 不等于 | x!="5" | fales |
!== | 不绝对等于 | x!=="5" | true |
> | 大于 | x>5 | false |
< | 小于 | x<5 | false |
>= | 大于等于 | x>=5 | true |
<= | 小于等于 | x<=5 | true |
4、逻辑运算符
前提:n=5
运算符 | 描述 | 例子 | 结果 |
---|---|---|---|
&& | 与 | x=n>10&&++n | x=false,n=5(短路) |
|| | 或 | x=n<10||n-- | x=true,n=5(短路) |
! | 非 | x=!n | x=false,x=5 |
5、ES6语法解构赋值
- 数组的解构赋值
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
- 对象的解构赋值
let {key: a} = {key: 10}
// a=10
- 字符串解构赋值
let [a,b,c] = 'xyz'
// a='x',b='y',c='z'
- CentOS源码编译安装Nginx和tcp_proxy module
- 介绍一个MonoTouch开发的伦敦官方城市指南应用
- 虾说区块链-55-《精通比特币》笔记十
- SignalR QuickStart
- Node.js入门学习笔记-IDE选择/配置之WebStorm(windows)
- Captcha插件后门分析和修复
- log4net.SignalR - 日志即时发送客户端页面
- 科学家担心的智能爆炸,真会有这一天吗?
- RSA 2018:从大会议题看2018年网络安全趋势
- Silverlight:Mouse Avoiding 躲避鼠标效果
- CTreeCtrl 控件使用总结
- 在ASP.NET MVC 4中使用Kendo UI Grid
- 每周四更面试题:True+True=?
- iis7 发布mvc 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mac App推荐
- 美团面试问ThreadLocal,学妹一口气给他说了四种!
- BFE.dev前端刷题#108. 用队列(Queue)实现栈(Stack)
- Kafka消费过程关键源码解析
- leetcode链表之两个链表的第一个公共节点
- 测试开发基础 mvn test | 利用 Maven Surefire Plugin 做测试用例基础执行管理
- 腾讯云Elasticsearch集群规划及性能优化实践
- 【赵渝强老师】在MongoDB中使用MapReduce方式计算聚合
- 2020-09-13:判断一个正整数是a的b次方,a和b是整数,并且大于等于2,如何求解?
- ASP.NET Core 性能优化最佳实践
- 如何在Vue中使用云开发的云函数,实现邮件发送
- 乐观锁与悲观锁
- 为什么配置文件加密了数据库配置信息,Spring Boot仍能成功连接数据库
- SpringBoot开发微信公众号
- 猿实战10——动态表单之实现类目属性绑定