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. MVC路由解析---MapRoute

    文章引导 MVC路由解析---IgnoreRoute MVC路由解析---MapRoute MVC路由解析---UrlRoutingModule Area的使用 引言 前面我们讲了IgnoreRout ...

  2. npm ERR! cb() never called! npm ERR! This is an error with npm itself. Pleas

    原因是:需要用管理员的身份才能进行 方法:点开始,找到命令提示符,右键,点以管理员的身份运行命令即可

  3. mysql 安装运行学习过程中的报错问题

    错误记录(windows端): 问题1:在启动MYSQL时出现问题:“ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' ...

  4. flex属性flex-grow、flex-shrink、flex-basis

    tip: 1)这些属性写在子元素中,作用于子元素(父元素中应设置display:flex) 2)作用是子元素如何分配父元素的空间 3) flex-grow 是扩展比率,当子元素宽度总和小于父元素宽度时 ...

  5. 【痛定思痛】TCP 三次握手学习

    前言:今天滴滴面试失败,痛定思痛,好好复习面试中最惨淡的计算机网络部分 面试中,面试官问我TCP与UDP最大的区别是什么,答:TCP可靠,UDP不可靠,一个面向有连接,一个面向无连接,一个快一个慢:追 ...

  6. python 自带http服务

    python2: python -m SimpleHTTPServer python3: python3 -m http.server

  7. Window/Linux + Vim + MingW 配置

    Windows: 首先安装Vim , MinGW,假设安装目录为D:\MinGW. 配置环境变量: LIBRARY_PATH=D:\MinGW\lib C_INCLUDE_PATH=D:\MinGW\ ...

  8. Clairewd's message /// 字符串hash

    题目大意: 给定字符串s 是26个字母对应的密文字母 给定字符串c1 是 密文+部分原文 原文可能缺损 要求将原文补全输出 利用s得到密文字母对应的原字母rs 利用rs翻译c1得到 原文+部分密文c2 ...

  9. typescript 类型映射 （ReadOnly、Partial）

    有时候需要一个类型,是依赖于上一个类型但是,对属性的要求去不同 interface Person{ name: string; agent: number; } type Person2 = Read ...

  10. java 中String类的常用方法总结，玩转String类

    String类: String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.String类对象创建后不能修改,StringBuffer & St ...