JS存在的位置、JS变量定义、调试方式、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属性链接，适用于团队开发，JS代码具有复用性

index.js文件

body.style.backgroundColor='#0ff'

index.html文件

<script src="./js/index.js"></script>

三、解释性语言特性决定JS代码位置

出现在head标签底部：依赖型JS库
出现在body标签底部：功能型JS脚本

四、JS语法规范

注释

// 单行注释

/*

多行注释

*/

以分号作为语句结尾（允许省略）

五、变量的定义

在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可

var name="Gates", age=56, job="CEO";

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

<script>

	// 弹出框: 一个弹出框只能弹出一条信息

	alert("普通弹出框", "呵呵");  // 呵呵被忽略了

	// 确认框

	var res = confirm("你是男的吗?");  // true | false

	alert(res);

	// 输入框

	var res = prompt("请输入你的小名!");  // 确定为输入值, 取消为null

	alert(res);  

</script>

七、四种调试方式

alert()：弹出框
console.log()：控制台显示，在浏览器的console中可以显示
document.write()：文档中显示，可能会影响布局
浏览器断点调试：在浏览器的Sources中可以对JS部分的代码打断点

<script type="text/javascript">

	var a = 10;

	var b = 20;

	// 四种查看变量的值的方式

    //弹窗显示

	alert(a);

	alert(b);

    // 控制台显示

	console.log(a);

	console.log(b);

    //浏览器文档中显示

	document.write(a);

	document.write(b);

	// 断点调试

</script>

八、数据类型

1、值类型

typeof() ：查看类型，()可以省略

ES5（var）中不会检测变量的重复定义报错；ES6（let | const）会检测变量的重复定义，如果一个变量重复定义会报错

number：数字类型

var a = 10;

console.log(a, typeof a);

var c = 314e2;  // 31400

// 判断方式

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：对象类型

// 在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义

var a = {};

console.log(a, typeof a)

var b = {firstname:"Bill", lastname:"Gates", id:5566};  // b对象有firstname，lastname，id三个属性，

// 判断方式

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

// 运算结果为true|false

var a = 10;

var b = 20;

var c = 30;

var res = a < b && c == 30;

console.log(res);

// 真,真 => 真

// 真,假 => 假

// 假,真 => 假  短路

// 假,假 => 假  短路

// &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路

// 短路

var res = a > b && ++c;

console.log(res, c);  // c=30

// ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路

// 真,真 => 真  短路

// 真,假 => 真  短路

// 假,真 => 真

// 假,假 => 假

// !运算,真则假,假则真,负负得正

console.log(!1, !!1);

5、三目运算（三元运算）

// 三目运算符(三元运算符)

// 结果 = 条件表达式 ? 结果1 : 结果2;

// 结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,

var tq = prompt("天气(晴|雨)")

var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";

console.log(res);

6、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'

前端（十一）—— JavaScript基础：JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符的更多相关文章

前端之JavaScript基础
前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
第三篇：web之前端之JavaScript基础
前端之JavaScript基础前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
谷哥的小弟学前端(10)——JavaScript基础知识（1）
探索Android软键盘的疑难杂症深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...
javascript基础修炼(12)——手把手教你造一个简易的require.js
目录一. 概述二. require.js 2.1 基本用法 2.2 细说API设计三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现示例代码托管在我的代码仓 ...
Web前端开发JavaScript基础
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
【前端】JavaScript基础
1 什么是js JavaScript是一种运行在浏览器中的解释型的编程语言 1.1 js引用使用<script></script>标签 <script src=&quo ...
web 前端3 javascript基础
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
前端--关于javascript基础
首先javascript不是浏览器的附属品,只能说它大多数的运行环境是在浏览器中的,但又不仅仅局限于浏览器中.它是一门真正的程序设计语言,在这方面它和java.c.c++.c#是等同的,只不过它不直接 ...
JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符
内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符我的位置全局问题:为何在网页推荐位置(一般在<head></head>内部 ...
Javascript基础系列之（二）变量
javascript 中变量通过var关键字(variable)来声明的. var school = "beijingyizhong" 也可以通过var 关键字给变量多个值. va ...

随机推荐

通过angular.js实现MVC的基本步骤
通过ng实现MVC的基本步骤: ①创建模块 var app = angular.module('模块名字',['依赖模块1','依赖模块2']) ②调用模块 ngApp--> ng-app=&q ...
驱动中PAGED_CODE的作用
参考:http://blog.csdn.net/broadview2006/article/details/4171397 里面的内容出自<Windows内核情景分析> 简而言之,Wind ...
Device Drivers
Types of Device Drivers Windows可能会有User-mode的驱动,但是我们只关注Kernel-Mode的驱动. WDM Drivers WDM是一种驱动模型,是比较常用的 ...
开发效率优化之自动化构建系统Gradle（二）下篇
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680本篇文章将继续从自定义 Gradle 插件开发来介绍自动化构建系统 ...
Emacs 25.1 error solved: url-http-create-request: Multibyte text in HTTP request
Emacs 25.1 error solved: url-http-create-request: Multibyte text in HTTP request */--> code {colo ...
Python之变量作用域
使用 global强制声明为全局变量
Python之元组、列表and 字典
序列: 元组和字符串都是不可变的哦你看,数据空间不一样了元组的话,你可以联想到C里面的结构体变量啊,为了包容不同的数据类型: 也可以这样取值哦: 列表:列表是可修改的哦~ 不然数据大了再另外开辟空 ...
TreeMap和TreeSet在排序时如何比较元素，Collections工具类中的sort()方法如何比较元素
TreeSet和TreeMap排序时比较元素要求元素对象必须实现Comparable接口 Collections的sort方法比较元素有两种方法: 元素对象实现Comparable接口实体类Dog ...
ASE团队项目alpha阶段Frontend组 scrum2 记录
ASE团队项目alpha阶段Frontend组 scrum2 记录本次会议于11.5日, 11:30在微软北京西二楼13158研讨室,讨论持续15分钟与会人员:Jingyi Xie, Jiaqi ...
笔记68 Redis数据库
一.Redis简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redis是一个开源的使用ANSI ...

前端（十一）—— JavaScript基础：JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符

JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符

一、JS语言介绍

1、概念

2、组成

二、三种存在位置

1、行间式：存在于行间事件中

2、内联式：某页面的特有逻辑，存在于页面script标签中

3、外联式：存在于外部JS文件，通过script标签src属性链接，适用于团队开发，JS代码具有复用性

三、解释性语言特性决定JS代码位置

四、JS语法规范

五、变量的定义

在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可

1、ES5定义变量

2、ES6定义变量

3、变量(标识符)的命名规范

六、三种弹出框

七、四种调试方式

八、数据类型

1、值类型

typeof() ：查看类型，()可以省略

ES5（var）中不会检测变量的重复定义报错；ES6（let | const）会检测变量的重复定义，如果一个变量重复定义会报错

2、引用类型

3、具体的对象类型

4、类型转换

九、运算符

1、算数运算符

2、赋值运算符

3、比较运算符

4、逻辑运算符

5、三目运算（三元运算）

6、ES6语法解构赋值

前端（十一）—— JavaScript基础：JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符的更多相关文章

随机推荐

热门专题