admin管理员组文章数量:1794759
JavaScript 代码教程
JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器中的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
特点：
1、弱语言 2、区分大小写
3、面向对象 4、跨平台
页面中添加JavaScript代码
语法： <script type="text/javascript"> </script> //js相关代码js代码可以放到网页的任意位置
JavaScript的组成JavaScript由ECMAScript（基本语法）、DOM（文档对象模型）、BOM（浏览器对象模型）三部分组成
代码书写位置有三种书写位置，分别是行内式、内嵌式（嵌入式）和外部式（外链式）
1、行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中（也就是以on开头的属性，如onclick）
<input type="button" value="点我" onclick="alert('行内式')"> 2、内嵌式是指使用 <script> 标签包裹JavaScript代码，<script>标签可以写在<head>或者<body>标签中，可以将多行JavaScript代码写在<script>标签中
<script> alert('内嵌式') ; // 弹出一个警告框。警告框中显示“内嵌式” </script> 3、外链式是指将JavaScript代码写在一个单独的文件中，一般用 "js" 作为文件的扩展名。 有利于HTML页面代码结构化。外链式 script标签内不允许写其他JavaScript代码
具体操作
1.创建demo03.html代码，用来编写外部式 JavaScript 代码
<head> <script src = "test.js"> </script> </head>2.创建test.js文件，在文件中编写JavaScript代码
alert（'外部式'）;
3.伪协议，另一种嵌入JavaScript 代码的方法
<a href="javascript:alert('伪协议')">点我</a> JS输出语句 1、alert('内嵌式') ; // 弹出一个警告框。警告框中显示“内嵌式” 2、document.write("未来的我你好呀！"); // 在页面中显示 “未来的我你好呀！”在 body标签中写入内容 3、cosole.log("猜猜我在哪"); //向控制台输出一个内容 JS按钮标签 1、<button> 按钮 <button onclick = "alert('点我干嘛,讨厌');"> 点我一下 </button> // 在网页中 出现button按钮，每点击一次出现一个警告框并显示“点我干嘛，讨厌” 2、 <a>按钮 <a href = "javascript:alert('让你点你就点！');"> 点我一下 </a> // 在网页中显示链接，点击一下就显示警告框，警告框中显示 “让你点你就点” JavaScript基本语法规则1、严格区分大小写
2、对空格、换行、缩进不敏感，一条语句可以分为多行书写
3、如果一条语句书写结束后，换行书写下一条语句，前一行语句后面的分号可以省略
JavaScript异步加载 1、async用于异步加载，即先下载文件，不阻塞其他代码运行，下载完成后再执行
<script src= "file.js" async></script> 2、defer用于延后执行，即先下载文件，直到网页加载完成后再执行
<script src= "file.js" defer></script> 注释1、单行注释 //
以 "//" 开始，在vscode 中用快捷键 CTRL+/
2、多行注释 /* */
以 " /* " 开始 ， " */ "结束。多行注释语句中可以嵌套单行注释语句，但不能嵌套多行注释语句
在vscode 中用快捷键 shift+alt+a
JavaScript输入输出 语句
| alert（'msg'） | 浏览器弹出警告框 |
| console.log('msg') | 浏览器控制台输出信 |
| prompt('msg') | 浏览器弹出输入框，用户可以输入内容 |
指一些不可改变的值，可以直接使用，但是一般不会直接使用字面量
变量变量是程序在内存中申请的一块用来存放数据的空间，内存中的变量需要进行命名
变量的使用变量在使用时分为两步，分别是“声明变量”和“赋值”
声明变量：通常使用 var （variable）关键字，使用var声明变量后，计算机会自动为变量分配内存空间
赋值：变量声明出来后，是没有值的。接下来就是为变量赋值。
var age； age = 10； // 在为变量赋值以后，可以用输出语句输出变量的值变量的初始化：声明一个变量并为其赋值，这个过程就是变量的初始化
使用变量可以保存个人信 还可以用来保存用户输入的信
变量的命名规则1、由字母、数字、下划线和美元符号（$）组成
2、严格区分大小写
3、不能以数字开头
4、不能是关键字、保留字
5、尽量做到“见其名，知其意”
6、建议遵循驼峰命名法，首字母小写，后面的单词首字母大写
| break | case | catch | class |
| const | continue | debugger | default |
| extends | finally | for | function |
| delete | do | else | export |
| if | import | in | instanceof |
| new | return | super | switch |
| this | throw | try | trpeof |
| var | void | while | with |
| yield | - | - | - |
| enum | implements | package | public |
| interface | private | static | let |
| protected | - | - | - |
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以卒子后一次赋的值为准。
var age = 18; age = 20; console.log(age); // 最后的结果就是 20 2、声明多个变量同时声明多个变量只需要写一个var 多个变量之间用 英文逗号隔开，最后一句加上分号。
var age = 18, address = '火影村', name = '大大'; 3、声明变量的特殊情况JavaScript是一种弱类型的语言，不用提前声明变量的数据类型。在程序运行过程中，变量的数据类型会自动转换
1、 int num= 10； // 强类型语言，这里变量num 是int 类型； 2、var num = 10；// 变量一开始是数字型 // JS的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的 num =‘abc’ //赋值一个字符串，现在num变成了 字符串类型js 同时拥有动态类型，同时也意味着相同的变量可用作不同的类型，变量的数据类型是可以变化的
var x = 6; // x 为数字型 var x = "bill"; // x 为字符串型 2、数据类型的分类分别为 基本数据类型 和 复杂数据类型（引用数据类型）。
基本数据类型分为：Boolean（布尔型）、String（字符串型）、Number（数字型）、Null（空型）、Undefined（未定义型）
复杂数据类型：Object（对象型）
1、Boolean（布尔型） 包含true和false 两个值
var num = true； //表示真、1、成立 var num = false； //表示假、0、不成立 // 默认值为 false2、String（字符串型）用单引号或者双引号 包裹
var str = '' //表示空字符串 var str = 'abc' //用单引号包裹的字符串 abc var str = "abc" //用双引号包裹的字符串 abc // 默认值为 ""3、Number（数字型） 包含 数值型和浮点型
var num = 21； //数值型 var num = 0.21； //浮点型 // 默认值为 04、Null（空型） 只有一个值 null
var a = null； //变量a的值为 null // 默认值为null5、Undefined（未定义型） 只有一个值undefined
var a； //声明变量a，未赋值，此时a 的返回值就是undefined var b = undefined； //变量b的值为undefined // 默认值为 undefined6、Object （对象型）
一、数字型 1、进制1.数字型进制
常见的进制有 二进制、八 进制、十进制和十六进制。
2.数字型范围
js中的最大值和最小值
alert (Number.MAX_VALUE); console.log(Number.MAX_VALUE); // 显示最大值 1.7976931348623157e+308 alert (Number.MIN_VALUE); console.log(Number.MIN_VALUE); // 显示最小值 5e-3243.数字型三个特殊值
Infinity（无穷大）、-Infinity（无穷小）、NaN（Not a Number，非数值）
1、无穷大 console.log(Number.MAX_VALUE * 2); // 输出结果 Infinity 2、无穷小 console.log(-Number.MAX_VALUE * 2); //输出结果 -Infinity 3、非数值 console.log('abc'-100); // 输出结果 NaN若想要判断一个变量是否为 非数值型可以用 isNaN()来进行判断 它会返回一个布尔值返回true表示非数字，返回false表示数字
console.log(isNaN(12)); //输出结果是 false ，即表示数字 console.log()isNaN('abc'); // 输出结果是 true ， 即不是数字 二、字符串型字符串型是由 单引号或者双引号包裹起来的字符串，
var str1 = '单引号字符串'; var str2 = "双引号字符串";1、单引号、双引号的嵌套
遵循的原则 （外双内单、外单内双）
// 正确写法 var msg = '我是"高富帅"的朋友'; //可以用'' 包含 "" var msg2 = "我是'高富帅'的朋友"； //可以用"" 包含 '' // 错误写法 var str = '我是'高富帅'的朋友'; //单引号错误用法 寻求就近原则2、转义字符
在 字符串使用 换行、Tab等特殊符号时，可以用转义字符来进行转义。
转义符都是以“\\”开始的，并且要包含到引号里
| 转义符 | 解释说明 | 转义符 | 解释说明 |
| \\' | 单引号 | \\" | 双引号 |
| \\n | LF换行，n表示newline | \\v | 跳格（Tab、水平） |
| \\t | Tab符号 | \\r | CR换行 |
| \\f | 换页 | \\\\ | 反斜线\\ |
| \\b | 退格，b表示blank | \\0 | Null 字节 |
| \\xhh | 由2位十六进制数字hh表示的ISO-8859-1字符。如“\\x61”表示 a | \\uhhh | 由4位十六进制数字hhhh表示的Unicode字符。如：“\\u597d”表示“好” |
3、字符串长度
字符串是由若干个字符组成的，这些字符的数量就是字符串的长度。
通过字符串的length属性可以获取整个字符串的长度
var str = 'my name is xiaoyun'; console.log(str.length); //输出结果为 184、字符串的拼接
多个字符串之间可以使用 + 进行拼接，拼接方式为 字符串+任何类型 = 拼接后的新字符串
拼接前会把与字符串相加的任何类型抓换为字符串，再拼接成一个新的字符串
只要有字符串和其他类型相拼接，最终的结果都是字符串类型。数值相加，字符相连
console.log('沙漠' + '骆驼'); // 输出结果为 沙漠骆驼 console.log('沙漠' + 18); // 输出结果为 沙漠18 console.log('沙漠' + true); // 输出结果为 沙漠true console.log(12 + 12); // 输出结果为24 console.log('12' + 12); // 输出结果为 12125、字符串拼接加强
变量不要写到字符串里，是通过和字符串相连的方式实现的
经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值。
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀是“引引加加”，删掉数字，变量写加号中间
var age = 18; console.log('我今年' + age + '岁了'); //输出结果 ：我今年18岁了 三、布尔型包含两个值：true 和 false。 其中true 表示真（对），false 表示假（错）
布尔型和数值型相加的时候，true的值为1， false 的值为0
var flag = true; var flaa = false; console.log(flag + 1); // true 参与加法运算当1来看 ，即输出结果为 2 console.log(flaa + 1); // false 参与加法运算当0来看， 即输出结果为1 四、undefined一个声明没有被赋值的变量会有一个默认值 undefined（如果进行相连或者相加时，注意结果）
undefined 与 数字相加 是 NaN
var str; console.log(str); // 输出结果 undefined var variable = undefined; console.log(variable + 'haha'); // 输出结果是 undefinedhaha console.log(variable + 1); // 输出结果是 NaN 五、Nullnull 与字符串相连 返回值是 字符串。null 与 数字相连 返回值是 数字型的，null表示0
var space = null; console.log(space + 'pink'); // 输出结果是 nullpink console.log(space + 1); // 输出结果是 1 六、数据类型的检测1、检测变量的数据类型
当不确定一个变量或值是什么数据类型的时候，可以利用typeof 运算符进行数据类型检测
- 在控制台显示结果颜色是黑色，表示这个变量是 字符型的
- 显示结果是蓝色，表示这个变量是数字型的
- 显示结果是深蓝色的，表示这个变量是 布尔型的
- 显示结果是浅灰色的，表示这个变量是undefined 和null
2、字面量
是指在源代码中的固定值的表示法。就是指字面量来表示如何在代码中表达这个值
通过字面量我们可以很容易地看出来它是哪种类型的值。
| 数字字面量 | 8,9,10 |
| 字符串字面量 | 'hello','world' |
| 布尔字面量 | true、false |
| 数组字面量 | [1,2,3] |
| 对象字面量 | {name:'小明'，age：18} |
就是把某一种数据类型转换成另一种数据类型。使用表单、prompt()等方式获取到的数据默认是字符串类型的，此时不能直接进行简单的加法计算，需要转换成数字型才可以计算。
常见的数据类型转换有：
- 转换为字符串型
- 转换为数字型
- 转换为布尔型
- 使用 toString() 转换字符型
- 使用 String() 强制转换
- 使用加号拼接字符串
- 使用 parseInt(string) 函数
- 使用 parseFloat(string) 函数
- Number() 强制转换函数
- js隐式转换 （- * /）
3、转换为布尔型
- 使用 Boolean()函数
代表 空、否定的值 会被转换成 false ，如：''、0、NaN、null、undefined
其余的值都会被转换成 true
console.log(Boolean('')); // 返回的值是 false console.log(Boolean(0)); // 返回的值是 false console.log(Boolean(NaN)); // 返回的值是 false console.log(Boolean(null)); // 返回的值是 false console.log(Boolean(undefined)); // 返回的值是 false console.log(Boolean('小白')); // 返回的值是 true console.log(Boolean(12)); // 返回的值是 true 运算符运算符也称为“操作符”，是用于实现赋值、比较和执行算数运算等功能的符号。
常用的运算符有：
用于对两个变量或值进行算术运算
| 运算符 | 描述 | 实例 | 结果 |
| + | 加 | 10+20 | 30 |
| - | 减 | 10-20 | -10 |
| * | 乘 | 10*20 | 200 |
| / | 除 | 10/20 | 0.5 |
| % | 取余数（取模） | 9%2 | 1 |
注意点：
表达式是各种类型的数据、变量和运算符的集合。是由数字、运算符、变量等组成的式子。
最简单的表达式可以是一个变量或字面量。表达式最终都会有一个返回值
2、递增和递减运算符前置递增运算符 和 后置递增运算符
如果需要反复给数字添加或减去1，可以使用 递增（++）和递减（--）运算符来完成
递增（++）和递减（--）既可以放在变量前面，也可以放在变量后面。
放在变量前面时，我们称为 前置递增（递减）运算符，放在变量名后边时，我们成为后置递增（递减）运算符
// 1.前置递增运算符 ++ 放在变量的前边 var age = 10; ++age; // age = age + 1; console.log(age); // 先自加，后返回值 // 2.后置递增运算符 ++ 放在变量的后边 var num = 10; num++; // num = num + 1 console.log(num); // 先返回原值，后自加 var age =10; console.log(age++ + 10 ); // 返回的值是 20注：前置自增和后置自增如果单独使用 效果是一样的
本文标签： 代码教程JavaScript
版权声明：本文标题：JavaScript 代码教程 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686867119a112340.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论