Python-JS（JS介绍~JS的基础数据类型）
⽬录
⼀、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)，然后再间接访问具体需要操作的对象(lor)
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语法下，只有⽅法(函数)才能产⽣局部作⽤域, 在ES5语法下, 没有定义常量的概念, 且所有定义变量都不具有块级作⽤域
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
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;
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)
// 判断⽅式
js中文正则表达式
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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。