大家好,本文将围绕javascript文件的创建与引用方法展开说明,单独存放js程序的文件扩展名是一个很多人都想弄明白的事情,想搞清楚单独js文件开头怎么写需要先了解以下几个事情。
JavaScript 是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器中的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能GPT改写。
特点:
1、弱语言 2、区分大小写
3、面向对象 4、跨平台
页面中添加JavaScript代码
语法: < type="text/java"> </> //js相关代码
js代码可以放到网页的任意位置
JavaScript的组成
JavaScript由ECMAScript(基本语法)、DOM(文档对象模型)、BOM(浏览器对象模型)三部分组成
代码书写位置
有三种书写位置,分别是行内式、内嵌式(嵌入式)和外部式(外链式)
1、行内式
是指将单行或少量的JavaScript代码写在HTML标签的事件属性中(也就是以on开头的属性,如onclick)
<input type="button" value="点我" onclick="alert('行内式')">
2、内嵌式
是指使用 <> 标签包裹JavaScript代码,<>标签可以写在<head>或者<body>标签中,可以将多行JavaScript代码写在<>标签中
<>
alert('内嵌式') ; // 弹出一个警告框。警告框中显示“内嵌式”
</>
3、外链式
是指将JavaScript代码写在一个单独的文件中,一般用 "js" 作为文件的扩展名。 有利于HTML页面代码结构化。外链式 标签内不允许写其他JavaScript代码
具体操作
1.创建demo03.html代码,用来编写外部式 JavaScript 代码
<head>
< src = "test.js"> </>
</head>
2.创建test.js文件,在文件中编写JavaScript代码
alert('外部式');
3.伪协议,另一种嵌入JavaScript 代码的方法
<a href="java:alert('伪协议')">点我</a>
JS输出语句
1、alert('内嵌式') ; // 弹出一个警告框。警告框中显示“内嵌式”
2、document.write("未来的我你好呀!");
// 在页面中显示 “未来的我你好呀!”在 body标签中写入内容
3、cosole.log("猜猜我在哪"); //向控制台输出一个内容
JS按钮标签
1、<button> 按钮
<button onclick = "alert('点我干嘛,讨厌');"> 点我一下 </button>
// 在网页中 出现button按钮,每点击一次出现一个警告框并显示“点我干嘛,讨厌”
2、 <a>按钮
<a href = "java:alert('让你点你就点!');"> 点我一下 </a>
// 在网页中显示链接,点击一下就显示警告框,警告框中显示 “让你点你就点”
JavaScript基本语法规则
1、严格区分大小写
2、对空格、换行、缩进不敏感,一条语句可以分为多行书写
3、如果一条语句书写结束后,换行书写下一条语句,前一行语句后面的分号可以省略
JavaScript异步加载
1、async
用于异步加载,即先下载文件,不阻塞其他代码运行,下载完成后再执行
< src= "file.js" async></>
2、defer
用于延后执行,即先下载文件,直到网页加载完成后再执行
< src= "file.js" defer></>
注释
1、单行注释 //
以 "//" 开始,在vscode 中用快捷键 CTRL+/
2、多行注释 /* */
以 " /* " 开始 , " */ "结束。多行注释语句中可以嵌套单行注释语句,但不能嵌套多行注释语句
在vscode 中用快捷键 shift+alt+a
JavaScript输入输出 语句
语句 | 语法 |
---|---|
alert('msg') | 浏览器弹出警告框 |
console.log('msg') | 浏览器控制台输出信息 |
prompt('msg') | 浏览器弹出输入框,用户可以输入内容 |
<>
1、alert('内嵌式') ; // 弹出一个警告框。警告框中显示“内嵌式”
2、document.write("未来的我你好呀!");
// 在页面中显示 “未来的我你好呀!”在 body标签中写入内容
3、cosole.log("猜猜我在哪"); //向控制台输出一个内容 (需要在浏览器的控制台中查看)
4、prompt('这是一个输入框'); // 弹出一个输入框,用户可以输入内容信息
</>
字面量和变量
字面量
指一些不可改变的值,可以直接使用,但是一般不会直接使用字面量
变量
变量是程序在内存中申请的一块用来存放数据的空间,内存中的变量需要进行命名
变量的使用
变量在使用时分为两步,分别是“声明变量”和“赋值”
声明变量:通常使用 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 | - | - | - |
变量语法扩展
1、更新变量
一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以卒子后一次赋的值为准。
var age = 18;
age = 20;
console.log(age); // 最后的结果就是 20
2、声明多个变量
同时声明多个变量只需要写一个var 多个变量之间用 英文逗号隔开,最后一句加上分号。
var age = 18,
address = '火影村',
name = '大大';
3、声明变量的特殊情况
- 只声明变量,但不赋值,则输出变量时,结果为undefined
- 不声明变量,不赋值,直接输出变量的值,则程序会出错
- 不声明变量,直接赋值(直接赋值一个未声明的变量,也可以正确输出变量的值)
数据类型
1、变量的数据类型
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、不成立
// 默认值为 false
2、String(字符串型)用单引号或者双引号 包裹
var str = '' //表示空字符串
var str = 'abc' //用单引号包裹的字符串 abc
var str = "abc" //用双引号包裹的字符串 abc
// 默认值为 ""
3、Number(数字型) 包含 数值型和浮点型
var num = 21; //数值型
var num = 0.21; //浮点型
// 默认值为 0
4、Null(空型) 只有一个值 null
var a = null; //变量a的值为 null
// 默认值为null
5、Undefined(未定义型) 只有一个值undefined
var a; //声明变量a,未赋值,此时a 的返回值就是undefined
var b = undefined; //变量b的值为undefined
// 默认值为 undefined
6、Object (对象型)
一、数字型
1、进制
1.数字型进制
常见的进制有 二进制、八 进制、十进制和十六进制。
- 二进制:由数字 0 和 1 组成
- 八进制:在数字开头加上 0 表示八进制, 由数字 0-7 组成
- 十进制:由数字 0-9 组成
- 十六进制:在数字开头加上 0x表示十六进制,由 0-9,a-f 组成
2.数字型范围
js中的最大值和最小值
alert (Number.MAX_VALUE);
console.log(Number.MAX_VALUE);
// 显示最大值 1.7976931348623157e+308
alert (Number.MIN_VALUE);
console.log(Number.MIN_VALUE);
// 显示最小值 5e-324
3.数字型三个特殊值
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); //输出结果为 18
4、字符串的拼接
多个字符串之间可以使用 + 进行拼接,拼接方式为 字符串+任何类型 = 拼接后的新字符串
拼接前会把与字符串相加的任何类型抓换为字符串,再拼接成一个新的字符串
只要有字符串和其他类型相拼接,最终的结果都是字符串类型。数值相加,字符相连
console.log('沙漠' + '骆驼'); // 输出结果为 沙漠骆驼
console.log('沙漠' + 18); // 输出结果为 沙漠18
console.log('沙漠' + true); // 输出结果为 沙漠true
console.log(12 + 12); // 输出结果为24
console.log('12' + 12); // 输出结果为 1212
5、字符串拼接加强
变量不要写到字符串里,是通过和字符串相连的方式实现的
经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值。
变量是不能添加引号的,因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接,口诀是“引引加加”,删掉数字,变量写加号中间
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
五、Null
null 与字符串相连 返回值是 字符串。null 与 数字相连 返回值是 数字型的,null表示0
var space = null;
console.log(space + 'pink'); // 输出结果是 nullpink
console.log(space + 1); // 输出结果是 1
六、数据类型的检测
1、检测变量的数据类型
当不确定一个变量或值是什么数据类型的时候,可以利用typeof 运算符进行数据类型检测
- 在控制台显示结果颜色是黑色,表示这个变量是 字符型的
- 显示结果是蓝色,表示这个变量是数字型的
- 显示结果是深蓝色的,表示这个变量是 布尔型的
- 显示结果是浅灰色的,表示这个变量是undefined 和null
var num = 10;
console.log(typeof num); // 返回 number
var str = '你是我的神';
console.log(typeof str); // 返回 string
var flag = true;
console.log(typeof flag); // 返回 boolean
var lala = undefined;
console.log(lala); // 返回 undefined
var haha = null;
console.log(haha); // 返回 object
// prompt 取过来的值是 字符型的
var age = prompt('请您输入您的年龄');
console.log(age); // 输入一个数字 18 返回18
console.log(typeof age); // 输入一个数字18 返回string
2、字面量
是指在源代码中的固定值的表示法。就是指字面量来表示如何在代码中表达这个值
通过字面量我们可以很容易地看出来它是哪种类型的值。
数字字面量 | 8,9,10 |
字符串字面量 | 'hello','world' |
布尔字面量 | true、false |
数组字面量 | [1,2,3] |
对象字面量 | {name:'小明',age:18} |
数据类型的转换
就是把某一种数据类型转换成另一种数据类型。使用表单、prompt()等方式获取到的数据默认是字符串类型的,此时不能直接进行简单的加法计算,需要转换成数字型才可以计算。
常见的数据类型转换有:
- 转换为字符串型
- 转换为数字型
- 转换为布尔型
1、转换为字符串型
- 使用 toString() 转换字符型
- 使用 String() 强制转换
- 使用加号拼接字符串
// 1.把数字型转换为字符串型 变量.toString()
var num= 10;
var str = num.toString();
console.log(str); // 输出结果 10
console.log(typeof str); // 输出结果 string
// 2.利用 String(变量)
console.log(String(num));
// 3.利用 “+” 拼接字符串的方式实现转换效果 隐式转换
console.log(num + ''); // 输出结果是 字符串10
2、转换为数字型(重点)
- 使用 parseInt(string) 函数
- 使用 parseFloat(string) 函数
- Number() 强制转换函数
- js隐式转换 (- * /)
// 1. 利用 parseInt(变量) 将字符型转换为数值型,得到的是整数
var age = '20';
console.log(age); // 返回的值是字符型的 20
console.log(parseInt(age)); // 返回的值是数值型的 20
console.log(parseInt('3.14')); // 返回的值是取整数 3
console.log(parseInt('3.94')); // 返回的值是取整数 3
console.log(parseInt('120xc')); // 返回的值是120
console.log(parseInt('wd124df'));// 返回的值是NaN
// 2. 利用 parseFloat(变量) 将字符型转换为浮点型,得到的是小数、浮点数
console.log(parseFloat('2.23')); // 返回的值是2.23
console.log(parseFloat('120rm')); // 返回的值是120
console.log(parseFloat('asd120sd')); // 返回的值是 NaN
// 3. 利用 Number(变量) 将字符型强制转换成数值型
var str = '112';
console.log(Number(str)); // 返回的值是数值型 112
console.log(Number('1121')); // 返回的值是数值型1121
// 4. 利用算数运算 - * / 隐式转换
console.log('12' - 0); // 返回的值是 数值型的12
console.log('123' - '120'); // 返回的值是 数值型的3
console.log('123' * 1); // 返回的值是 数值型的123
console.log('120' / 2); // 返回的值是 数值型的60
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
运算符
运算符也称为“操作符”,是用于实现赋值、比较和执行算数运算等功能的符号。
常用的运算符有:
- 算术运算符
- 递增递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
- 三元运算符
1、算术运算符
用于对两个变量或值进行算术运算
运算符 | 描述 | 实例 | 结果 |
+ | 加 | 10+20 | 30 |
- | 减 | 10-20 | -10 |
* | 乘 | 10*20 | 200 |
/ | 除 | 10/20 | 0.5 |
% | 取余数(取模) | 9%2 | 1 |
注意点:
- 进行四则运算时,遵循 “先乘除后加减” 的原则,
- 进行取模运算时,运算结果的正负取决于被模数(%左边的数)的符号,与模数(%右边的数)无关。例如:(-8) % 7 = -1, 8 % (-7) = 1
- 尽量避免利用浮点数进行运算,浮点数值的最高精度是17位小数,但在进行算术计算时精确度远远不如整数。正常的运算 0.1 +0.2 = 0.3,但是js的计算结果确是0.30000000000000004.,此时可以将运算的小数化为整数,计算后再转换为小数即可
- 使用 + 和 - 可以表示正数和负数。例如:(+2.1)+(-1.1)=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
注:前置自增和后置自增如果单独使用 效果是一样的