Javascript基础以及案例分析-优快云博客

本文链接：https://blog.youkuaiyun.com/liubenzun/article/details/144964268

Javascript的学习

JavaScript的介绍

代码解读

复制代码

开始介绍我们的JavaScript，首先的话，这个的话，就是那个一个弱语言类型的脚本语言，就是一种编程语言，这个是我们的前端中的重要部分我们的前端中的学习这个语言的前提就是实现我们的给计算机进行交流，我们使用的时候，就是实现最基本的那个动态的交互数据

css

代码解读

复制代码

我们的那个Javascript的话是有三个部分组成的: ECMAScript(标准) + DOM(文档对象模型) + BOM(浏览器对象模型) 三个部分组成的

代码解读

复制代码

首先的话，就是JavaScript的话就是一种解析性语言，就是不用编译就直接执行，同时也是一种面向对象的语言

JS的写入的位置

xml

代码解读

复制代码

 <script type="text/javascrippt"> /* 开始写入我们的那个第一个js语句 */ alert("这个是我们的第一个JS语句，实现的就是弹出一个警告框") /* 像我们的页面写入内容 */ doocument.write("Helo World") /* 像我们的那个控制台写入信息 */ console.log("Hello World") </script>

xml

代码解读

复制代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> alert("Helo World"); document.write("Hello World"); console.log("Hello World"); </script> </body> </html>

JS编写位置1：内嵌式

xml

代码解读

复制代码

我们的js代码是可以写入我们的那个网页标签中的 <script type="text/javascript"> js代码 </script>

JS编写位置2：行内式

ini

代码解读

复制代码

<button onclick="alert("hello world")">点击出现提示框</button> // 但是这种的话，我们的使用是十分少的，耦合高，不方便我们的维护

JS编写位置3：外链式

代码解读

复制代码

// 就是写入我们的那个外部的js文件中 // 但是如果我们想要使用的话，那就需要我们开始进行那个在html中引入 <script type="text/javascript" src="外部的js的文件路径"></script>

css

代码解读

复制代码

总结：我们的js代码的写入的位置是含有三种 1.行内式 2.内嵌式 3.外链式写法对于我们的2而言，这个的实现就是那个：注意写的位置，有的时候写在html的上面，有的时候写在我们的html下面但是对于我们的3而言，我们需要注意的是那个：就实现最后的那个基本的功能的话，我们需要现在外部写js代码，然后再实现基本的那个引入

代码解读

复制代码

注意我们的js代码是那个单线程语言，就是实现从上往下运行

JS的基础语法

JS的注释

arduino

代码解读

复制代码

/* */ 多行注释 // 单行注释

JS的字面量和变量

代码解读

复制代码

字面量就是一些不可变的量，其中的只值是不可以进行修改的变量：就是一些可以进行修改的量，就是其中的值是可以进行修改的在我们的那个开发中，我们的常用的就是那个常使用那个变量来进行存储我们的字面量

csharp

代码解读

复制代码

声明一个变量：(使用的那个声明的变量的关键字就是那个： var let const) var 变量名;

xml

代码解读

复制代码

JS的标识符

makefile

代码解读

复制代码

标识符的使用的话，就是体现在我们的那个: 1.变量名 2.函数名 3.属性名首先这些的话，都是那个由我们自定义的，但是含有一些基本的那些规则但是哈，这个都是由我们的后面是可以是一种经验的，莫得任何的讲解的必要

JS的基本数据类型

javascript

代码解读

复制代码

数据类型，就是我们那个字面量的数据类型 JS中的数据类型含有： 1.String 字符串类型 2.Number 数字类型 3.Boolean 布尔值 4.Null 空值 5.Undefined 未定义的数据 6.Object 对象类型 String Number Boolean Null Undefined Object 是我们的基本的数据类型 Object 是我们的引用数据类型

JS的字符串类型：String

ini

代码解读

复制代码

字符串，就是使用引号(单引号 / 双引号)包裹起来的数据类型 var str = "hello";

xml

代码解读

复制代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // 字符串的数据类型 /* * 注意我们的引号之间是可以实现包裹的，但是里面和外面的引号的话，不可以相同 * 同时如果想要实现内外的引号类型相同，那么，我们就可以使用后面的那个使用\来实现转义 * */ var str = "hello<br>"; document.write(str); // 同时我们还是可以使用console.log / alert来实现出现显示效果的 var str01 = "我想对你说:'我叫鞠志鸿'<br>"; document.write(str01); var str02 = "我想对你说:"我叫鞠志鸿""; document.write(str02); </script> </body> </html>

JS的数值类型：Number

代码解读

复制代码

就是我们的那个字面量都是那个纯数字，这个就是我们的数值类型

xml

代码解读

复制代码

JS的布尔类型：Boolean

javascript

代码解读

复制代码

Boolean就是我们的那个布尔值，true / false

xml

代码解读

复制代码

JS的空类型：Null

sql

代码解读

复制代码

就是定义的变量的字面量是Null的数据，就是我们的Null，空值

xml

代码解读

复制代码

JS的未定义类型：Undefined

代码解读

复制代码

未定义的数据类型，就是那个创建了变量，但是没有进行那个赋值的数据，这个时候，就是表示的是那个未定义的数据类型

xml

代码解读

复制代码

JS检查类型：typeof

csharp

代码解读

复制代码

JS中的检查数据类型的方法，就是使用typeof 变量

xml

代码解读

复制代码

JS的基本数据类型间转换

代码解读

复制代码

数据类型之间的转换的话，具体的话就可以分为两种

JS转换数据为：String

xml

代码解读

复制代码

JS数据转换为：Number

xml

代码解读

复制代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> /* * ->Number * 转换的方法有： * 1.使用我们的方法函数Number() * 但是注意，转换的时候，原本的那个数据就是那个纯数字的文本 * 如果不是那个纯数字的字符串，那么转换为的是NaN * 空的值转换为的为0 * 还有其他的数据类型的转换，自己调试 * * 2.转换方式2： * 专门用来转换字符串的 * parseInt() 就是实现把我们的字符串转换为整数，当一遇到我们的那个非数字，直接停止转换 * parseFloat() 就是实现把我们的字符串转换为浮点数，当一遇到我们的那个非数字，直接停止转换 * 上面的方法，如果遇到了后面的那个非string类型的值，那么先转换为string，然后再进行转换 * */ let a = "123"; let num = Number(a); console.log(typeof num); let b = ""; let num01 = Number(b); console.log(typeof num01); let c = "123px"; let num02 = parseInt(c); console.log(num02); let num03 = num02+=10; let c01 = num03 + "px"; document.write(c01); </script> </body> </html>

JS数据转换为：Boolean

xml

代码解读

复制代码

JS的运算符

csharp

代码解读

复制代码

运算符就是一些操作符，比如说我们的那个typeof 就是一个运算符通过我们的运算符可以实现的就是那个获得最后的结果的一个玩意

JS的算术运算符

markdown

代码解读

复制代码

算术运算符就是用来进行那个计算的一个运算符的使用 + 可以实现将我们的那个两个数据类型来实现相加并返回运算的结果 - 可以实现将我们的那个两个数据类型来实现相减并返回运算的结果 * 可以实现将我们的那个两个数据类型来实现相乘并返回运算的结果 / 可以实现将我们的那个两个数据类型来实现相除并返回运算的结果 % 可以实现将我们的那个两个数据类型来实现相求模并返回运算的结果

ini

代码解读

复制代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> /* * 算术运算符 * + - * / % * 1.注意事项： * true —— 1 ； false —— 0 * 就是在我们的那个boolean类型的时候，我们的那个实现就是那个对应的相加 * * 任何的数据类型和我们的那个 NaN 相互进行那个运算的时候，最后的值都是那个 NaN * 在运算当中使用那个最后的那个 null 就是 0 * 两个字符串之间的+，就是进行的那个拼接为一个字符串可能 * 但是有的时候，两个字符串之间的那个相减的话，我们的实现的效果就是隐式转换为数值类型进行计算 * 任何的数据类型和字符串进行那个 + 运算，都会转换为字符串后再进行那个拼接 * * 任何的数据类型的和我们的那个空字符串，就可以实现转换为字符串类型 * */ let num = 1; let num01 = 2; // 加法运算符 let a = num + num01; console.log(num); // 减法运算符 let b = num - num01; console.log(b); // 乘法运算符 let c = num * num01; console.log(c); // 除法运算符 let d = num / num01; console.log(d); // 求模运算符 let e = num % num01; console.log(e); // bool类型之间的运算 let f = num + true; console.log(f); let g = num + false; console.log(g); let h = true + false; console.log(h); // 和NaN之间的运算 let aa = num + NaN; console.log(aa); // 和null之间的运算 let bb = num - null; console.log(bb); // 两个字符串之间的相加 let str01 = "123"; let str02 = "123"; console.log(str01 + str02); console.log(str02 - str02); // 开始隐式转换 let cc = num + ""; console.log(typeof cc); </script> </body> </html>

JS的一元运算符

代码解读

复制代码

我们是可以通过我们的那个一元运算符来实现基本的那个转换数据为数值类型的

xml

代码解读

复制代码

JS的逻辑运算符

xml

代码解读

复制代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> /* * 逻辑运算符 * --逻辑运算符的使用，就是实现的那个进行逻辑的运算 * ！实现的是对我们的值进行非运算 --- 就是实现的是我们对最后的boolean值进行取反 * && 实现是我们的与运算 --- 就是两个为真的才是true,否则就是false * || 实现的是我们的或运算 --- 一个为真，那么就是true,否则就是false * */ console.log(!1); // false console.log(1 && 2) // true console.log(1 && 0) // false console.log(1 || 2) // true console.log(0 || 2) // true console.log(0 || 0) // false </script> </body> </html><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> /* * 逻辑运算符 * --逻辑运算符的使用，就是实现的那个进行逻辑的运算 * ！实现的是对我们的值进行非运算 --- 就是实现的是我们对最后的boolean值进行取反 * && 实现是我们的与运算 --- 就是两个为真的才是true,否则就是false * || 实现的是我们的或运算 --- 一个为真，那么就是true,否则就是false * */ console.log(!1); // false console.log(1 && 2) // true console.log(1 && 0) // false console.log(1 || 2) // true console.log(0 || 2) // true console.log(0 || 0) // false </script> </body> </html>