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. 【Java多线程系列八】volatile和ThreadLocal

    1. volatile final class Singleton { private static Singleton instance = null; private Singleton() { ...

  2. Cocos2d-x之引擎框架简介

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.cocos2d-x的设计思想 cocos2d-x分为导演,场景,图层,精灵,节点: (1).导演(Director):控制整个游戏的场 ...

  3. 【Linux】- 同步网络时间

    转自:Linux同步网络时间 Linux服务器运行久时,系统时间就会存在一定的误差,一般情况下可以使用date命令进行时间设置,但在做数据库集群分片等操作时对多台机器的时间差是有要求的,此时就需要使用 ...

  4. [FW]CLONE_NEWUSER trickery: CVE-2013-1858

    CLONE_NEWUSER trickery: CVE-2013-1858   Recent kernels (3.8+ something) introduced a feature calledu ...

  5. python图像、视频转字符画

    python图像转字符画需要用到matplotlib.pyplot库,视频转字符画需要用到opencv库,这里的代码基于python 3.5 图像转字符画需要先将图像转为灰度图,转灰度图的公式是 gr ...

  6. accordion（分类）组件

    一.依赖于 Panel(面板)组件 二.class加载方式 <div id="box" class="easyui-accordion" style=&q ...

  7. ubuntu批量转换所有子文件夹下图片文件格式

    第一步按照 sudo apt-get install imagemagick 对于一个文件,可以: convert ubuntuhandbook.png ubuntuhandbook.jpg 对于多个 ...

  8. java中this和super关键字的作用

    this是对象内部指代自身的引用,同时也是解决成员变量和局部变量同名问题:this可以调用成员变量,不能调用局部变量:this也可以调用成员方法,但是在普通方法中可以省略this,在构造方法中不允许省 ...

  9. Android开发笔记之ArrayAdapter

    1,ArrayAdapter的item中的条目的布局文件的正确写法: item.xml <?xml version="1.0" encoding="utf-8&qu ...

  10. leetcode-160周赛-5239-循环码排列

    题目描述: 参考格雷编码: class Solution: def circularPermutation(self, n: int, start: int) -> List[int]: res ...