目录
一、JS语言介绍:
    1、JS概念
    2、JS组成

二、JS的三种存在位置(引入方式):
    1、行间式：
    2、内联式：
    3、外联式：

三、JS出现的具体位置:

四、JS语法规范

五、JS中变量的定义
    ES5 和ES6
    块级作用域与局部作用域
    JS中的变量命名规范

六、三种弹出框

七、四种调试方法

八、JS中的基本数据类型
    1、值类型
    2、引用类型
    3、具体的对象类型
    4.JS中的数据类型转换
    值类型转换总结:

九、运算符
    1、算数运算符
    2、赋值运算符
    3、比较运算符(结果为boolean类型)
    4、逻辑运算符
    5、三目运算符
    6、ES6语法解构赋值

 

一、JS语言介绍:
1、JS概念
浏览器脚本语言

什么是脚本: 一段功能代码块,可以嵌套在其他语言中使用,完成一些额外的功能

可以编写运行在浏览器上的代码程序

属于解释型、弱语言类型编程语言

2、JS组成
ES语法：ECMAScript、主要版本ES5和ES6

DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

二、JS的三种存在位置(引入方式):
1、行间式：
行间式的代码块书写在一个全局事件名属性中,没有script这样一个全局属性

在某一个标签的某一个事件属性值中，出现的this代表该标签
该标签对象this可以访问该标签的任意全局属性(eg: style),然后再间接访问具体需要操作的对象(style.color)
This需要注意的点:

行间式案例:

  <body id="body" onload="body.style.backgroundColor='#0ff'">
      
  </body>
2、内联式：
内联式的代码块存在于页面script标签中
可以通过标签的id(唯一标识),在js代码块中找到该标签(js的选择器)
js代码块中语法采用的是小驼峰体命名法,属性的值都是用字符串形式进行赋值
js属于解释型语言,所以加载顺序会影响执行结果 => 内联式的script标签出现的位置会决定最终效果
内联式js案例:

  <body id="body">
      <script type="text/javascript">
          body.style.backgroundColor='#0ff'
      </script>
  </body>
3、外联式：
外联式代码块存在于外部JS文件，通过script标签src属性链接
使用外联的script(拥有src属性)标签,会屏蔽掉标签内部的js代码块
在js任意地方均有this, this对象不指向任何标签时,指向的是window对象
  index.js文件
  body.style.backgroundColor='#0ff'
  ​
  index.html文件
  <script src="./js/index.js"></script>
三、JS出现的具体位置:
解释型语言特性决定JS代码位置

1.出现在head标签底部：依赖型JS库

该位置一般放置JS库(第三方的js),或者之前已经写好的js

2.出现在body标签底部：功能型JS脚本

一般放在body和html中间,为了保证在body的所有标签下面被解析
一般放置本次对页面做的js操作

四、JS语法规范
注释

  // 单行注释
  /* 多行注释 */
  /**文档注释
  *
  */
以分号作为语句结尾（允许省略）

与python的语法规范对比:
python中: 1,以换行标识语句的结束

                2,以同行缩进标识附属关系

JS中:

                1.以分号(;)表示语句的结束

                2,以作用域{}标识附属逻辑

五、JS中变量的定义
我们那python中变量的定义来做对比,方便记忆:
定义变量
py: 变量名 = 变量值
js: 声明关键词 变量名 = 变量值

js中的打印操作是: consol.log()
注: 变量在未定义赋值之前也可以去使用, 值为 undefined

首先需要说明的是:

ES5 和ES6
是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法,现在浏览器的主流语法还是ES5, 即使在编写的时候使用ES6的语法,到浏览器中也会被解析成ES5的语法,然后去执行, 在这里提及到ES6是因为后边一些新的框架使用的是ES6来完成的,我们需要了解ES6的相关语法

第二个点是

块级作用域与局部作用域
ES5语法下,只有方法(函数)才能产生局部作用域, 在ES5语法下, 没有定义常量的概念, 且所有定义变量都不具有块级作用域

ES6语法下,块级作用域都可以作为局部作用域

ES6中,块级作用域的范围等价于局部作用域的范围

块级作用域和之前我们介绍过的全局作用域和局部作用域类似:
在JS中,基本上都是和block打交道,所以产生了块级作用域的概念

产生块级作用域的方式
{
    直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
 

函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问

块级作用域中的变量在块级作用域外无法访问, 

1、ES5定义变量

在ES5语法下,没有定义常量的概念,且所有定义变量都不具有块级作用域

使用var 定义出来的变量是 无块级作用域的变量  即使定义在块级作用域中,外界也可以访问

  var num = 10;  
  num = 10;  // 全局变量:在任意位置定义,在任何位置都可以访问到,但是定义全局变量与重新赋值语法相同,容易混淆,不建议使用(省略了关键词)
2、ES6定义变量

在ES6语法下, 定义变量(let)常量(const)都具有块级作用域

在ES6中块级作用域和局部作用域是等价的

  let num = 10;  // 局部变量:变量是在程序运行可以改变的量 (有块级作用域)
  // let定义的变量具有块级作用域,在块级作用域之外无法访问
  const NUM = 10;  // 常量:在程序运行过程中,值不会发生改变
  // const定义的常量具有块级作用域,在块级作用域之外无法访问
变量的定义: 变量是在程序运行过程中值可以改变的量
var num = 10;
    console.log(num);

定义常量: 常量是在程序运行过程中,值不会被改变的量
const NUM = 3.14;

JS中区分大小写
    console.log(num, NUM);
NUM是标标准准常量语法, 为只读的值, 不允许修改

JS中的变量命名规范
由字母，数字，_，$组成，不能以数字开头（可以包含中文字符,但是中文字符一般不建议使用）

区分大小写

NUM是标标准准常量语法,为只读的值,不允许修改

不能出现关键字及保留字

提倡使用小驼峰体命名规范, 支持 _ 连接语法

小驼峰体是第一个单词的首字母不大写,后边的单词首字母都大写

常用的关键字:

          
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      
六、三种弹出框
1.普通弹出框alert
alert("你丫真帅!!!");

2.输入框: 以字符串形式接收用户输入内容
var info = prompt("请输入内容:");
console.log(info)

3.确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果
var res = confirm("你是猪吗?");
console.log(res)

七、四种调试方法
四种调试方法,我们直接使用案例进行介绍:
一、在pycharm中进行调试的时候:
1.打断点(只能在js逻辑中打断点)之后使用debug运行

2.step Over: 表示不管是不是方法的调用,都将该句作为一条执行语句执行
   Force Step into:  表示进入方法中,下一步下一步
   step Into: 如果是函数或者方法,进入调用体之内一步一步走
   step-out: 退出调用体

二、在chorm浏览器中进行调试:

1.在检查页面中的Sources页面中,打开我们要调试的文件,在需要调试的位置打上断点(任何地方都可以打断点, 一般只在逻辑部分使用)

2. Resume script execution : 跳到下一个断点, 如果后面没有断点 ,就运行结束
    Step over next function call:  下一步,下一步

四种调试方法使用最多的是consol.log()和断点调试

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>调试方式</title>
</head>
<body>
    调试方法
</body>
<script>
    var a = 100;
    var b = a;
    var c = b;
    // 第一种方式,使用打印操作来验证
    // console.log(a, b, c);

    //第二种是,使用弹出框将变量的值弹出来,由于弹出框一次只能弹出一个值(弹多个值时只弹最后一个),所以需要弹出三次才能将三个值弹完
    // alert(a)
    // alert(b)
    // alert(c)

//第三种是使用文档的写入操作,将变量的值写入到页面中,但是这样做会影响到页面原有布局
    // document.write(a, b, c)
    // debug 断点
</script>
</html>
八、JS中的基本数据类型
一般基本数据类型有7种(有的不将null当基本数据,类型,我们这里是将努力作为基本数据类型的)

1、值类型
number：数字类型

  var a = 10;
  console.log(a, typeof a)
  // 判断方式
  console.log(typeof a == 'number')
  console.log(typeof(a), a)
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)

//排序
a.sort()

//数组与字符串之间的转换
b = a.join('@')   //数组方法
c = b.split('@')  //字符串方法
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：正则对象

JS中的正则表达式和python中是相同的,只是有不同的使用方法: consol.log('abc'.mach)

 var a = new RegExp();
  console.log(a, typeof a)
  // 判断方式
  console.log(typeof a == 'object')
  console.log(a instanceof Object)
  console.log(a instanceof RegExp)
3.JS中的数据类型转换
数字|布尔 转换为 字符串

  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  // "5null"
  "5" + 1  // "51"
  "5" - 1  // 4
  +"5" + 1  // 8
特殊产物

NaN: 非数字类型
NaN与NaN不相等(因为不是数值类型的有很多种,不能确定是哪种)
不与任何数相等，包含自己
利用isNaN()进行判断
值类型转换总结:
1.通过类型声明转换
Number() | String() | Boolean()

2.方法(函数)
parseInt('10') | parseFloat('3.14')
123..toString()

3.隐式转换
+'10' => 10
'' + 10 => '10'

九、运算符
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
​

任何一个自然数对n取余,结果为[0,n-1]

++在变量后(num++),先将变量的值拿去使用,再自身增1,( ++在后的时候++的优先级会变得很低,打印语句都比它高 )

++在变量前(++num),先将变量自身增1,再将结果拿去使用,( ++在前的时候,优先级会很高 )

总结: 不管++在前在后,运算结束后, 变量自身值一定自增1

2、赋值运算符
前提：x=5，y=5

运算符    例子 等同于
(运算方式从右至左,将x和y的运算结果重新赋值给x) 运算结果
=  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、比较运算符(结果为boolean类型)
前提：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、逻辑运算符
运算结果通常为boolean类型(也可以不是)

前提：n=5

运算符    描述 例子 结果
&& 与  x=n>10&&++n    x=false,n=5（短路）
|| 或  x=n<10||n--    x=true,n=5（短路）
!  非  x=!n   x=false,x=5
总结&&: 全真为真, 有假则假
总结||:    全假则假, 有真则真
总结!:     真则假, 假则真

逻辑运算符的结果本质上为表达式值
表达式: 由数字,变量,运算符组成的合法式子

在逻辑运算符中,特别需要注意的点:(短路现象)

 针对 && | ||
    // 疑问: 逻辑运算符结果可能为逻辑运算符之前表达式的值,也可能是之后表达式的值
    // 当逻辑运算符出现 短路现象 , 就是之前表达式的值, 否则(正常情形下), 就是之后表达式的值

    // &&, 前一个表达式为假时, 整个式子的结果已经确定为假, 后表达式不会被执行, 就是被短路了
    var num = 10;
    res = false && num++;
    console.log(res, num);  // null, 10
    res = null && ++num;
    console.log(res, num);  // null, 10

    // ||, 前一个表达式为真时, 整个式子的结果已经确定为真, 后表达式不会被执行, 就是被短路了
    res = -10 || ++num;
    console.log(res, num);  // -10, 10

    // 特殊小技巧 => 类似于if分支来使用 ***
    /* if a > b:
        print(a)
     */
    var a = 100;
    a > b && console.log("大值a:", a);
5、三目运算符
三目运算符的语法:  语法 条件表达式 ? 表达式1 : 表达式2;

  // 语法 条件表达式 ? 表达式1 : 表达式2;
  ​
  // eg:
  var tq = prompt("天气(晴|雨)")
  var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
  console.log(res);
三条目类似于if...else...:

 a < b ? console.log("表达式结果为true") : console.log("表达式结果为false")
6、ES6语法解构赋值
在ES6语法下,有变量的重复定义规则,不允许在同一作用域下,出现变量的重复定义
如果重复定义一个变量, 在编辑器中不会报错,但是到浏览器中浏览器解析的时候会报错
在不同的作用域中是可以编译通过的

    let abc = 10;
    // let abc = 20;  // 在es6语法下,有变量的重复定义规则, 不允许在同一作用域下,出现变量的重复定义
    {
        let abc = 20;  // 可以编译运行通过
    }

下面是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'
---------------------
原文：https://blog.csdn.net/Onion_cy/article/details/85045685

Python-JS (JS介绍~JS的基础数据类型)的更多相关文章

  1. Python 学习随笔 - 1 - 基础数据类型、变量 及 基本运算

    仅有的C语言的基础都是大学时学的: 准备赶潮流,开始学习Python. 随笔记录学习过程中,靠一点点C语言基础难以去理解的地方,以及区别于C语言的地方,做些笔记作为以后参考. Python 解释器直接 ...

  2. Pytorch的基础数据类型

    引言 本篇介绍Pytorch的基础数据类型,判断方式以及常用向量 基础数据类型 torch.Tensor是一种包含单一数据类型元素的多维矩阵. 目前在1.2版本中有9种类型. 同python相比,py ...

  3. 前端之 js的介绍和javascript的基础使用

    一 javasvript的介绍 JavaScript概述 1 JavaScript发展史 1.1 1992年Nombas开发出C-minus-minus(--)的嵌入式的脚本语言(最初绑定在CEnvi ...

  4. 【重温基础】15.JS对象介绍

    从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 [Cute-JavaScript]系列文章中. 关于[Cute-JavaScript ...

  5. js 基础数据类型和引用类型 ，深浅拷贝问题，以及内存分配问题

    js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...

  6. 深入浅出node.js游戏服务器开发1——基础架构与框架介绍

    2013年04月19日 14:09:37 MJiao 阅读数:4614   深入浅出node.js游戏服务器开发1——基础架构与框架介绍   游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...

  7. 前端之JavaScript：JS简单介绍

    JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名Scr ...

  8. python学习笔记十三 JS，Dom（进阶篇）

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

  9. 【js】IE、FF、Chrome浏览器中的JS差异介绍

    如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff ...

随机推荐

  1. css样式——选择器（三）

    https://www.cnblogs.com/haiyan123/p/7552235.html 1.怎么找到标签 2.如何操作标签的对象 一.css概述 CSS是Cascading Style Sh ...

  2. CPU温度问题

    台式机和笔记本的CPU温度多少合适,过高会怎样, cpu温度跟环境温度有很大关系,夏天的时候会高一点的.一般CPU空闲的时候温度在50°以内,较忙时65°以内,全速工作时75°以内都是正常的,所以我们 ...

  3. String转换为Map

    Map<String,Integer> rulsMap = new Gson().fromJson(cachedobj.toString(),new TypeToken<Map< ...

  4. ELK 集群升级操作

    1.配置项变更  2.禁用自动分片 disabled shard allocation curl -XPUT 'localhost:9200/_cluster/settings?pretty' -H ...

  5. 函数和常用模块【day04】：函数介绍（一）

    本节内容 1.函数介绍 2.函数定义 3.为什么要使用函数 一.介绍 在我们以往的学习编程的过程当中,碰到的最多的两张编程方式或者说编程方法:面向过程和面向对象.其实不管是哪一种,其实都是编程的方法论 ...

  6. CodeForces - 516B Drazil and Tiles（bfs）

    https://vjudge.net/problem/CodeForces-516B 题意 在一个n*m图中放1*2或者2*1的长方形,问是否存在唯一的方法填满图中的‘.’ 分析 如果要有唯一的方案, ...

  7. HDU - 5340 Three Palindromes（manacher算法）

    http://acm.hdu.edu.cn/showproblem.php?pid=5340 题意 判断是否能将字符串S分成三段非空回文串 分析 manacher预处理出前缀和后缀回文的位置, 枚举第 ...

  8. Spring面向切面编程AOP(around)实战

    spring aop的环绕通知around功能强大,我们这里就不细说,直接上代码,看着注释就能明白 需要的可以点击下载源码 1.如果使用注解的方式则需要先创建个注解类 package com.mb.a ...

  9. 第一节：从程序集的角度分析System.Web.Caching.Cache ，并完成基本封装。

    一. 揭开迷雾 1. 程序集准备 a.  需要给项目添加 System.Web 程序集. b.  需要给使用的地方添加两个引用. 2. 程序集探究      在对应的类中输入关键字 Cache,选中点 ...

  10. Cmder-控制台模拟器

    Cmder是一个软件包,由于在Windows上缺少漂亮的控制台模拟器而纯粹受挫. 它基于令人惊叹的软件,并采用Monokai配色方案和自定义快速布局,从一开始就看起来很性感. 首先,展示一下界面,和W ...