单独js文件开头怎么写,javascript文件怎么运行

大家好,本文将围绕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、建议遵循驼峰命名法,首字母小写,后面的单词首字母大写

ECMAScript 6中的保留关键字

break

casecatchclass
constcontinuedebuggerdefault
extendsfinallyforfunction
deletedoelseexport
ifimportininstanceof
newreturnsuperswitch
thisthrowtrytrpeof
varvoidwhilewith
yield--

-

未来保留关键字
enumimplementspackagepublic
interfaceprivatestaticlet
protected---

变量语法扩展

1、更新变量

一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以卒子后一次赋的值为准。

var age = 18;
age = 20;
console.log(age);    // 最后的结果就是 20
2、声明多个变量

同时声明多个变量只需要写一个var 多个变量之间用 英文逗号隔开,最后一句加上分号。

var age = 18,
    address = '火影村',
    name = '大大';
3、声明变量的特殊情况
  1. 只声明变量,但不赋值,则输出变量时,结果为undefined
  2. 不声明变量,不赋值,直接输出变量的值,则程序会出错
  3. 不声明变量,直接赋值(直接赋值一个未声明的变量,也可以正确输出变量的值)

数据类型

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.数字型进制

常见的进制有 二进制、八 进制、十进制和十六进制。

  1. 二进制:由数字 0 和 1 组成
  2. 八进制:在数字开头加上 0 表示八进制, 由数字 0-7 组成
  3. 十进制:由数字 0-9 组成
  4. 十六进制:在数字开头加上 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等特殊符号时,可以用转义字符来进行转义。

转义符都是以“\”开始的,并且要包含到引号里

常用的转义字符
转义符解释说明转义符解释说明
\'单引号\"双引号
\nLF换行,n表示newline\v跳格(Tab、水平)
\tTab符号\rCR换行
\f换页\\反斜线\
\b退格,b表示blank\0Null 字节
\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. 算术运算符
  2. 递增递减运算符
  3. 比较运算符
  4. 逻辑运算符
  5. 赋值运算符
  6. 三元运算符
1、算术运算符

用于对两个变量或值进行算术运算

算术运算符
运算符描述实例结果
+10+2030
-10-20-10
*10*20200
10/200.5
%取余数(取模)9%2

1

注意点:

  1. 进行四则运算时,遵循 “先乘除后加减” 的原则,
  2. 进行取模运算时,运算结果的正负取决于被模数(%左边的数)的符号,与模数(%右边的数)无关。例如:(-8) % 7 = -1, 8 % (-7) = 1
  3. 尽量避免利用浮点数进行运算,浮点数值的最高精度是17位小数,但在进行算术计算时精确度远远不如整数。正常的运算 0.1 +0.2 = 0.3,但是js的计算结果确是0.30000000000000004.,此时可以将运算的小数化为整数,计算后再转换为小数即可
  4. 使用 + 和 - 可以表示正数和负数。例如:(+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

注:前置自增和后置自增如果单独使用 效果是一样的 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L2Z56yZLic=,size_20,color_FFFFFF,t_70,g_se,x_16

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值