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数据类型、运算符的更多相关文章

  1. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  2. 第三篇：web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...

  3. 谷哥的小弟学前端(10)——JavaScript基础知识（1）

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...

  4. javascript基础修炼(12)——手把手教你造一个简易的require.js

    目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...

  5. Web前端开发JavaScript基础

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  6. 【前端】JavaScript基础

    1 什么是js JavaScript是一种运行在浏览器中的解释型的编程语言 1.1 js引用 使用<script></script>标签 <script src=&quo ...

  7. web 前端3 javascript基础

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  8. 前端--关于javascript基础

    首先javascript不是浏览器的附属品,只能说它大多数的运行环境是在浏览器中的,但又不仅仅局限于浏览器中.它是一门真正的程序设计语言,在这方面它和java.c.c++.c#是等同的,只不过它不直接 ...

  9. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  10. Javascript基础系列之（二）变量

    javascript 中变量通过var关键字(variable)来声明的. var school = "beijingyizhong" 也可以通过var 关键字给变量多个值. va ...

随机推荐

  1. Python sqlite3.ProgrammingError: You must not use 8-bit bytestrings unless you use a text_factory that can interpret 8-bit bytestrings......

    完整的错误信息如下: You must not use 8-bit bytestrings unless you use a text _factory that can interpret 8-bi ...

  2. python学习笔记：使用freeze命令迁移模块

    使用freeze 给所有模块搬家 导出安装模块的文档pip freeze > my_freeze.txt 或者指定地址pip freeze > e:\my_freeze.txt 在另一个环 ...

  3. Django框架（二十七）—— ContentType组件

    目录 ContentType组件 一.什么是ContentType组件 二.使用ContentType 三.使用场景总结 ContentType组件 一.什么是ContentType组件 conten ...

  4. 专业解决 MySQL 查询速度慢与性能差！

    Java技术栈 ,一般把连接数设置得大一些). 并发量:同一时刻数据库服务器处理的请求数量 3.超高的 CPU使用率:CPU资源耗尽出现宕机. 4.磁盘 IO:磁盘 IO性能突然下降.大量消耗磁盘性能 ...

  5. vim的基本快捷操作（二）——可视模式

    va{ 选中{}中间内容,包括{} va[ 选中[]中间内容,包括{} va( 选中()中间内容 ,包括{} vi< 选中<>中间内容,包括<> 将上面的a换成i,就不包 ...

  6. spark性能调优04-算子调优

    1.使用MapPartitions代替map 1.1 为什么要死使用MapPartitions代替map 普通的map,每条数据都会传入function中进行计算一次:而是用MapPartitions ...

  7. CTU OPEN 2017 Pond Cascade /// 思维

    题目大意: 给定N F 给定N个水池的大小 每个水池都以流量F开始注水 当位置较前的水池注满后 水会溢出到下一个水池 求 最后一个水池开始溢出的时间 和 所有水池全部注满的时间 1.最后一个n水池开始 ...

  8. AOP之PostSharp2-OnMethodBoundaryAspect

    在上一篇中我们了解了简单的OnExceptionAspectAOP面向方向切入,在第一节中我们将继续我们的PostSharp AOP系列的OnMethodBoundaryAspect方法行为的切入,这 ...

  9. Darknet YOLOv3 on Jetson Nano

    推荐比较好的博客:https://ai4sig.org/2019/06/jetson-nano-darknet-yolov3/ 用的AlexeyAB的版本,并且给出了yolov3和tiny的效果对比. ...

  10. ArrayList的几种初始化方法

    1.使用Arrays.asList方法 ArrayList<Object> obj = new ArrayList<Object>(Arrays.asList(Object o ...