JavaScript

一、JavaScript 概述

JavaScript 是一门编程语言，浏览器就是JavaScript语言的解释器，能让程序实现动态效果

js 代码位置

在 <title> 后面，在 css 代码前

<script type="text/javascript"> 编写的JavaScript代码</script>
导入：
<script src="/static/my.js"></script>

在 </body> 前面的最尾部（推荐）

<script type="text/javascript"> 编写的JavaScript代码</script>
导入：
<script src="/static/my.js"></script>

注释

//注释内容
/*注释内容*/

变量

var name = 'Avery'

输出

console.log(name)

字符串类型

//声明
var name="Avery"：
var name=String("Avery");
//常见功能
var v1=name.lenth();
var v2=name[0]; name.charAt(3)
var v3=name.trim();去除空白
var v4=name.substring(0,2);前取后不取

二、JavaScript 基础

JavaScript 概念

javascript (简称 js ),是一种轻量级的解释性语言，也叫脚本语言。js 是作为 web 网页开发而出名的，js 是可以运行在浏览器环境中，现在也可以运行在其他环境：nodejs（后端环境）、adobe 环境…

JS 核心组成

一个完整的 JS 语法是由三部分组成：ECMA核心语法、BOM、DOM

ECMA核心语法：主要包含了输入、输出、变量、数据类型、控制结构、数组、函数等等
浏览器专属：
- BOM：负责与浏览器窗口的交互，比如：新建窗口、关闭页面、页面跳转、刷新、定时器等等
- DOM：负责与页面内的标签、样式进行交互，比如：新建标签、修改样式等等

JS 的运行环境

nodejs：不支持 DOM 语法和 BOM 语法

https://nodejs.org/en

服务器环境，可以单独运行 JS 代码
需要安装 node.js：
- 检查 nodejs 是否安装好：cmd —>node -v
运行：
- cmd 找到对应的文件目录 node ./文件名.js
- 借助 vscode 里面的终端去允许 node ./文件名.js
- 借助插件允许， code runner 插件在代码编辑区右键 run code

浏览器环境：支持 DOM、BOM 比如 document.write（）

js 代码在 html 位置

在 body 的结尾标签之上去编写一个<script></script>标签，在这个标签里就可以编写 js 代码

<body>
    <!-- html代码 -->

    <script>
        console.log('hello world')
    </script>
</body>

通过 script 标签在外部引用 js 文件

1.创建 js 后缀结尾的文件，例如：index.js

console.log('hello world2')

2.在 body 结尾标签上方去引入 js 文件

<body>
    <!-- html代码 -->

    <script src="./js/js基础.js"></script>
</body>

JS 输入输出

输出

js 的三种输出方式

document.write（）：将内容输出在页面上

document.write('hello "world"')

注意：

文字内容需要引号来包裹，可以说单引号也可以是双引号。
如果引号需要互相嵌套使用，外层是单（双）引号，里面必须是双（单）引号，否则相反。

运用：还可以在页面中输出一个标签

document.write('<a href="https://www.baidu.com">百度一下</a>')

console.log（）：将内容输出在控制台里

console.log('hello world')

可以识别多个空格符
如果输出纯数字，可以不需要引号包裹

alert（）：将内容输出在一个警告提示框里

alert('hello')

process.stdout.write（）不换行打印

 process.stdout.write((i+"*"+j + "=" +i*j + " "))

输入

prompt('提示性文字')

输出输入的内容到页面上

document.write(prompt('提示性文字'))

JS 变量

一个保存数据的容器，方便后续继续使用

声明变量：

var 变量名；
变量名 = 数据;

var 变量名 = 数据;

使用变量：

console.log(变量名)
document.write(变量名)

修改变量：直接给变量重新赋值即可

变量名 = 新的内容

变量名的规范：
- 可以包含字母、数字、_ 、美元符号$
- 不能以数字开头
- 变量名对大小写敏感（ uesrname 和 userName 是两个不同的变量）
- js 的保留关键字不能用作变量名：for、var、if、class 等等
- 建议的命名方式：语义化命名
  - 单个单词和缩写：user、password、data、num 等等
  - 多个单词组合（小驼峰命名）：userData、userAgeList 等等
  - 大驼峰命名（多用在类名上）：UserData、UserAgeList 等等

JS 基础运算符

分类

算数运算符
赋值运算符
比较运算符
逻辑运算符

算术运算符：完成数学运算

加 +
减 -
乘 *
除 /
余（取模） % ：得到两数相除的余数
自增 ++
自减 --

赋值运算符：可以给变量赋值或者修改变量

= ：把右边的结果赋值给左边的变量
+=
-=
*=
/=
%=

比较运算符：数据与数据之间进行比较，得到一个布尔值（true false）

==：判断两个内容是否相等，不考虑数据类型（5 == ‘5’ true）
===：全等于，判断两个内容是否相等，要考虑数据类型（5 === “5” false）
< ：判断前面的值是否小于后面的值
<= ：判断前面的值是否小于等于后面的值
> ：判断前面的值是否大于后面的值
>= ：判断前面的值是否大于等于后面的值
!= ：判断两个内容是否不等于吗，如果不等于返回true，等于返回false
!== ：不全等于，考虑数据类型

var a = 5
var b = '5'
var c = 6
var d = 5

console.log( a == b )  //true
console.log( a === b )  //false

console.log( a < c ) //true
console.log( a > c ) //false
console.log( a <= c ) //true
console.log( a >= c ) //false

console.log(a != c) //true
console.log(a !== d) //false
console.log(a !== b) //true

逻辑运算符：用于对多个条件的判断

&&：与运算，并且的意思，既要满足前面的条件又要满足后面的条件，才会返回 true，只要有一个条件不满足就会返回 false

var  num = 5

console.log(num >= 5 && num == 5  && num <= 5 && num === 5) //true
console.log(num >= 5 && num === '5') //false

| |：或运算，或者的意思，只要满足条件的其中任意一个即可，就会返回 true，每个条件都不满足才会返回 false

console.log( num > 5 || num == 5)  //true
console.log( num > 5 || num < 5 )  //false

结构

控制结构

分支结构：根据不同的条件执行不同的代码块

if 分支

if(条件){
    //满足条件要执行的代码
}

var age = 18;
if(age >= 18){
    console.log('已成年，可以蹦迪了')
}

if else 分支

if(条件){
    //满足条件要执行的代码
}else{
    //不满足条件要执行的代码
}

var age = 16;
if(age >= 18){
    console.log('已成年，可以蹦迪了')
}else{
    console.log('未成年，回家吧')
}

if else if else 分支

//  6岁  上小学   12岁 上初中   15岁 上高中  18岁 蹦迪

var age = 20;

if(age >= 6 && age < 12){
    console.log('上小学')
}else if(age >= 12 && age < 15 ){
    console.log('上初中')
}else if(age >= 15 && age < 18){
    console.log('上高中')
}else if(age >= 18){
    console.log('蹦迪')
}else{
    console.log('上幼儿园')
}

switch 分支

主要判断某一个条件是否全等于，需要考虑数据类型，而且这个条件是一个固定的值

// 输入今天星期几数字 提示今天星期几
var num = prompt('提示今天星期几')
console.log(num)

switch(num){
    case '1':
        console.log('今天星期1')
        break;
    case '2':
        console.log('今天星期2')
        break;
    case '3':
        console.log('今天星期3')
        break;
    case '4':
        console.log('今天星期4')
        break;
    case '5':
        console.log('今天星期5')
        break;
    case '6':
        console.log('今天星期6')
        break;
    case '7':
        console.log('今天星期7')
        break;
    default:
        console.log('输入有误，再见')
        break;
}

该分支只能用于判断固定选项，如果条件是一个范围 switch 不适用
break：用于阻断代码继续向下执行

循环结构

while 循环

while(循环继续的条件){
    当条件为true时，会执行的代码
}

var num = 1000

while(num > 0){
    //满足上面条件会执行的代码
    console.log(num)  //输出1000 - 1 之间所有的数字
    num = num - 1
}

do while 循环

和 while 的区别：会先执行一次 do 里的代码

do{
    会先执行一次的代码，满足条件会再次循环执行
}while(循环继续的条件)

var num = 5
do{
   console.log(num)
   num = num - 1
}while(num > 0)

for 循环

// for('循环的初始条件';'决定是否循环的条件';'循环的次数操作'){
//     //循环的主体代码
//     console.log(1)
// }

for(var i = 1; i <= 5 ; i = i + 1){
    //循环的主体代码
    console.log(i,1)
}

break、continue

break：跳出整个循环，循环不再继续向下执行

continue：跳出当前这一次循环的后续代码，但是会继续执行后续的循环

for(var i = 1 ; i <= 5 ; i++){
    console.log(i)  //  1  ,  2   ,  3
    if(i == 3){
        break; //不再继续循环下去   
    }
}

for(var i = 1 ; i <= 5 ; i++){
    if(i == 3){
        continue //跳出这一次的循环主体代码，然后会继续下一次循环
    }
    console.log(i)  //  1,  2,  4,  5
}

Menu

Share

[前端复习] JavaScript 基础 Part One

JavaScript

一、JavaScript 概述

js 代码位置

注释

变量

输出

字符串类型

二、JavaScript 基础

JavaScript 概念

JS 核心组成

JS 的运行环境

JS 输入输出

JS 变量

JS 基础运算符

算术运算符：完成数学运算

赋值运算符：可以给变量赋值或者修改变量

比较运算符：数据与数据之间进行比较，得到一个布尔值（true false）

逻辑运算符：用于对多个条件的判断

结构

分支结构：根据不同的条件执行不同的代码块

循环结构

Comment

Financial Econometrics

[前端复习] HTML 基础

[Python 学习] Python 基础-One

Financial Risk Management

[前端复习] JavaScript 基础 Part One

[前端复习] CSS 基础

数电设计与嵌入式原理

[前端复习] JavaScript 基础 Part Two

Financial Econometrics 2

[前端学习]Node.js 与 Webpack