JS
什么是JS?
JS简介
JS:javascript 简称为JS 是一门编程语言
JS和html,css对比
相同:html,css,js代码都可以在浏览器中运行,html,css,js它们的运行环境是浏览器
不同点:html,css 不叫编程语言 js是编程语言 js的运行环境不只浏览器,还可以在其它的环境中支行。
作为一个前端开发工程师 JS是核心
使用JS输出Hello World~~
console.log("hello world");
js能做什么
- 开发网站
- 开发app
- 小程序
- 游戏开发 小程序游戏 网页游戏
- 写后端 node.js
- 嵌入式
- 区块链
JS写法及语法
JS写法
- 把js写在html文件中通常就写在script标签中(内部写法)
<script>
var a = 110;
console.log(a)
</script>
- 把JS写在JS文件中,然后在html文件中通过script标签引入 写项目时通常会把JS写在一个单独的文件中(外部写法)
<script>
<script src="./out.js"></script>
</script>
- 把JS代码写在开始标签中,当成开始标签的属性(行内写法)
<button onclick="console.log(888)">点我</button>
JS语法
- JS是区分大小写的 var a = 1; var A = 2;
- 忽略空白符(空格 换行 tab)
- 语句分号可加可不加
- 注释 单行注释 多行注释 注释是给程看的
- 标识符 和 关键字 var a = 110; var:关字 a:变量名标识符
- 注释:// 单行注释 /* 多行注释 */
变量
- 数据:一个软件打开后,界面上有很多的数据,也叫状态,这个状态可以保存在两个地方,一个是内存,一个是硬盘
- 变量:变量就是内存中的一个空间。
变量名:内存空间的别名 对变量名的操作就是对内存空间的操作
变量值:存储在内存空间中的状态(数据) - 在JS中,如何定义变量:
var a = 110; // 定义了一个变量 变量的名是a 变量的值是110; - 变量的分类:
1)全局变量:在函数内部和外部都能访问到
2)局部变量:只能在函数内部访问到
分界点是:函数
只要把变量写在函数里面就是局部变量,只要写在函数外面就是全局变量。
// 声明一个变量
var a = 110;
// 声明一个函数
function f() {
//在函数里面访问全局变量
console.log(a);//返回值是110
var b = 666; // 局部变量
console.log(b); //返回值是666 函数内部是可以访问到局部变量
}
// 调用函数
f() // 一个函数没有调用相当于这个函数没有写
// 在函数外面访问全局变量
console.log(a);//返回值是110
console.log(b); // b is not defined 函数外面是访问不了函数里面的变量
JS中的数据类型
为了更加合理使用内存空间,基本上所有的编程语言中都提出数据类型的概念,研究针对不同的数据,分配不同的空间。
基本数据类型
- number 数字 var a = 110; int a = 110;
- string 字符串 ”“ ‘’ JS中不分字符和字符串 都叫字符串
- boolean true false 布尔类型
- undefiend 没有值
- null 没有值
引用数据类型
- object 对象
- array 数组
- function 函数 在JS中函数也是一种数据类型
number数据类型
- number是一个数据类型,这个数据类型对应的值有无数个。
- 在JS中number数据类型是不分整数和小数 都number
- 可以通过typeof查看一个变量值的数据类型
- 最大值 和 最小值
- number可以通过不同进制显示 进制 10进制 进制 16进制 8进制
- NaN Not a Number 不是一个数字
- JS中不要对小数运算 要运算先转成整数 得到的结果往往不对
在JS中,说到数据类型,主要指变量值的数据类型。
typeof是运算符 + - * / 都是运算符
Number叫类,也叫构造器,也叫函数
var a = 110; // 110是一个数据 这个数据的类型是number
var b = 3.14; // 3.14也一个number数据
console.log(a);
console.log(typeof a)//判断数据类型
console.log(Number.MAX_VALUE)//最大值
console.log(Number.MIN_VALUE)//最小值
string数据类型
- 在JS中 使用‘’ “”把字符串包起来 不包 JS会给它当成变量
- 单引号不要嵌套单引号 双引号不要嵌套双引号 外单内双 外双内单
- string数据类型对应的数据有无数个
- SyntaxError表示语法错误
var a = "hello 'abc' js"
console.log(a);//返回 hello 'abc' js
boolean数据类型
- boolean数据类型对应的值就两个 true false
- true 和 True 不一样的 JS是区分大小写的
var b = true;
console.log(b);
console.log(typeof b);
undefined数据类型
- undefiend是一个数据类型,这种数据类型对应的值是undefiend
- 当一个变量没有赋值或它的值是undefiend或这个值的类型是undefiend的时候会出现undeined
var a;
console.log(a); // undefined 值
console.log(typeof a); // undefined 是类型
数据类型转化
- 数据类型转化:
隐式类型转化:静悄悄地,不知不觉地就进行了类型转化
强制类型转化:写代码进行转化 - 在JS中,下面的值转成false,其它值都转成true:
0 -0
“”
undefined
null
NaN
前提:在JS中,运算符两侧需要保存数据类型一致,如果不一致,JS解释器会帮你把一个数据类型转成另一个数据类型。
// 隐式类型转化
// + 叫运算符 123操作数 "abc"也叫操作数
// 一个运算符如果有两个操作数,这个运算符叫二元运算符,也叫二目运算符,还叫双目运算符
// + - =
// 如果一个运算符只有一个操作数,这个运算符叫一元,单目运算符
// +是双元运算符 运算符你要保证两侧操作数的数据类型要一致
var res = 123 + "abc"; // 123隐式转化成字符串
console.log(res); // 123abc
console.log(typeof res); // string
// 强制类型转化
console.log(parseInt(3.14)); // 把小数转成整数
console.log(parseInt("3.14abc")); // 尝试把小数或非数字转成整数
console.log(parseFloat(3))
console.log(parseFloat("3.14abc"))
console.log(Number("abc123")) // NaN
console.log(Number("123abc")) // NaN
console.log(Number("123")) // 123
console.log(String(123456)) // 123456
JS代码执行的过程
代码段
- 一个script标签就是一个代码段。
- JS代码在执行时,是一个代码段一个代码段执行。
//<script>
var a = 1;
console.log(a);
//</script>
//<script>
var b = 2;
console.log(b);
//</script>
代码执行
- 定义变量和声明变量:
定义变量:var a = 110; 定义 = 声明+赋值
声明变量:var a = 110; 说的声明仅仅是说var a 后面是赋值 - 预编译: 提升到了代码段最前面
把加var的变量进行提升 变量声明会提升 变量的赋值不会提升
把使用function声明的函数进行提升 提升的是整个函数声明 - 代码的执行:
一行一行执行 - 代码分两类:
全局代码 函数外面的代码叫全局代码
函数代码 一个函数就是一个局部代码
// 1)在全局代码中,加var会提升,没有var的不会提升。
console.log(a);
a = 110; // a is not defined
// 2)不管加没加var的全局变量,都会作为window的属性
var a = 1;
b = 2;
console.log(window.a)// 1
console.log(window.b)// 2
// 3)没有加var的变量,只能作为全局变量,只要是全局变量,肯定是window的属性
function f() {
a = 666;
}
f()
console.log(window.a) // 666
// 4)加var的局部变量,不会作为window的属性
function f() {
var a = 666;
}
f()
console.log(a) //666
// 访问一个对象上不存在的属性,结果就是und
console.log(window.a) // undefined
JS中的函数
- 函数是任何编程语言都有概念
- 在JS中定义函数有两种形式
函数定义
函数表达式
// 函数定义 f叫函数名 ()是函数特有的标识 {} 叫函数体
// 定义 = 声明 + 赋值
function f() {
console.log("hello")
console.log("js")
console.log("vue")
}
// 函数调用
f(); // 调用函数时,就会把函数体中的代码都执行了
// 函数的返回值
function f() {
return 666;
}
// // 函数的返回值是返回到了函数调用处
var a = f(); // 函数调用
console.log(a);
console.log(f()); // f()得到的就是函数的返回值
// 一个函数如果没有返回值,默认返回undefiend
function f(){
}
console.log(f()); // undefined
// undefined出现的地方?
// 答:一个变量没有赋值 值就是und 一个函数没有返回值,也是返回und
// 给函数传递数据
function f(a,b) { // a b叫形式参数 形参
// 形参就是函数内部的局部变量
return a+b;
}
// 1 2叫实际参数 实参
var r = f(1,2); // 函数调用的过程就是实参向形参赋值的过程
console.log(r);
JS中数据的存储
- 内存分堆内存和栈内存
- 在JS中,基本数据类型存储在栈中 引用数据类型存储在堆中