JS语法转简书

Posted 2020-12-09 blogcccc

javascript组成：ECMAScript，DOM，BOM；

ECMAScript：核心语法

DOM：文档对象模型，操作网页内容的一套API

BOM：浏览器对象模型，操作浏览器的一套API

---

（一）JS书写格式

1.行内JS

写在标签中，一般配合事件使用。在实际开发中不推荐使用。

事件，和网页交互的行为。 如：鼠标点击、鼠标移动、鼠标离开、键盘按下等。

<!-- 鼠标点击按钮时，弹出数字1。-->

<button onclick="alert(1)">按钮</button>

2.内部JS

在head标签或body标签中使用script标签。

<script type="text/javascript">

            js代码

</script>

标签的type属性目的告诉浏览器，该标签中是js代码。type属性在html5版本中可以省略。

优点：减少和html代码的耦合。

代码举栗：

<script>

    alert(1);  //弹出数字1

  </script>

3.外联JS

在head标签或body标签中使用script标签。

<script src=‘js文件路径‘>

</script>

优点：彻底和html分离，便于后期代码的维护。

 

HTML中代码：

<script src="base.js"> </script>

JS文件base.js中代码：

alert(1);

4.输出内容的方式

弹出警告框：alert(‘你好‘)

控制台输出：console.log(‘你好‘)

在网页中打印：document.write(‘你好‘)

接收用户输入的内容：prompt(‘请输入账号‘)

（二）变量

1.变量的使用

关键字var：

<script>

    var age;

</script>

变量赋值

var age;

age = 123;  //给变量赋值

变量初始化

//创建一个变量并赋值

var age = 123；

批量创建和批量赋值

var age,name,sex;

age = 17,name = ‘张三‘,sex = ‘男‘;

批量初始化

var age = 17,name = ‘张三‘, sex = ‘男‘;

重复赋值（喜新厌旧）

一个变量可以重复赋值。变量最终的结果是最后一次的赋值。

var age = 123;

console.log(age);     //123;

age = 456;

console.log(age);    //456;

一个变量可以赋值给另一个变量

var a = 123;

var b = a;

console.log(b); //123;

变量的使用

使用变量就直接调用变量的名字

var age = 17;

alert(age);  //把变量age所代表的数据输出

2.变量的命名

规则：

变量名可以由数字、字母、下划线_、$符组成，但不能以数字开头。

不能使用关键字或保留字当做变量名。

变量名区分大小写。

规范：

驼峰命名法：变量名若由多个单词组成，垃圾桶的英文第一个单词的首字母要小写，后面其他单词的首字母要大写。

var userName = ‘admin‘;

3.数据类型

基本数据类型（简单数据类型）

有五种，分别是：

1）数字 → Number：数字、浮点数（小数）、NaN（表示Not a Number，不是一个数字。但却是Number类型。）

isNaN(数据)：检测一个数据是否是NaN，是返回true，不是返回false;

2）字符串 → String：用单引号或者双引号所包裹的字符

单引号嵌套双引号 / 双引号嵌套单引号

//此时被嵌套的双引号就是字符串中的普通字符

‘程序"猿"‘;

//此时被嵌套的单引号就是字符串中的普通字符

"程序‘媛‘";

转义符：

‘ 把单引号变成普通字符

" 把双引号变成普通字符

3）布尔 → Boolean：仅有两个值，表示程序中的肯定和否定

true; //表示程序中的肯定

false; //表示程序中的否定

4）未定义 → Undefined：仅有一个值。undefined,表示未定义

//当创建好一个变量没有赋值时，变量的默认值是undefined;

var num;

console.log(num); //undefined

5）空 → Null：仅有一个值：null，表示空

检测数据的数据类型

语法：typeof(数据)  或  typeof 数据;

返回：数据的数据类型

typeof(‘abc‘); //string

typeof(true);  //boolean

typeof(1123);  //number

引用数据类型（复杂数据类型）

有很多种，比如：

数组  → Array

日期 → Date

对象 → Object  ……等等

（三）运算符

1.算术运算符

加 +    |    减 -    |    乘 *    |    除 /    |    取余数  %

var result1 = 1 + 2;

console.log(result1); //3

var result2 = 4 - 2;

console.log(result2); //1

var result3 = 2 * 2;

console.log(result3); //4

var result4 = 10 / 5;

console.log(result4); //2

var result5 = 3 % 2;

console.log(result5); //1

2.赋值运算符

赋值 =

var age = 18; //把数据18赋值给变量age

复合赋值 +=    |    -=    |    *=    |    /=    |    %=

//针对的是变量

var num = 10;

num+=2;     //num = num + 2;

console.log(num);     //12

3.关系运算符

关系运算符也就是比较运算符，比较的结果始终都是布尔值

大于 >    |    小于 <    |    大于等于 >=    |    小于等于 <=    |    等于 ==    |    不等于 !=    |    全等===    

|    不全等    !==

console.log(1>2); //false

console.log(3>=1);  //true

console.log(1==1);  //true

console.log(1!=1); //false

== 和 ===的区别

// == 比较的是值

console.log(1==‘1‘);  //true;

// === 不仅比较值，还有比较数据类型

console.log(1===‘1‘);  // false;

作者：CNLISIYIII
链接：https://www.jianshu.com/p/0ced22738a22
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。