大家好,给大家分享一下扩展名为js的文件怎么打开,很多人还不知道这一点。下面详细解释一下。现在让我们来看看!
一、概述
1.1 什么是JavaScript?
1.1.1 概念
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)
JavaScript是一种轻量级的编程语言
JavaScript是可以插入HTML页面的编程代码
JavaScript插入HTML页面后,可由所有的现代浏览器执行
1.1.2 作用
- 为网页添加各式各样的动态功能
- 为用户提供更流畅更美观的浏览效果
通常JavaScript脚本是通过嵌入在HTML中来实现自身功能的。
1.2 JavaScript用法
JavaScript通常简称为js,或js脚本
1.2.1 HTML页面中的JavaScript
在HTML页面中的脚本必须位于围堵标签之间,标签放在head中可以,body中也可以,放在最后也可以,对位置要求不严格
我们可以在HTML文档中放入不限数量的标签,通常的做法是把内容统一放入head或者页面底部,这样可以把它们安置到同一处位置,不会干扰页面的内容
PS:有些案例中可能会在标签中出现type=“text/java”Python中的所有运算符号。现在完全可以省略了,JavaScript已经是所以现代浏览器以及HTML5中的默认脚本语言。
1.2.2 外部的JavaScript
可以把脚本保存到外部文件中,外部文件通常包含被多个网页使用的代码。外部JavaScript文件的文件扩展名是:.js。
当我们使用外部文件时,在HTML页面的标签的“src”属性中设置该 .js文件:
PS:外部脚本不能包含标签
1.2.3 标签属性中的JavaScript
直接编写在HTML标签的一些属性中,用于简单的JavaScript代码的编写,用的偏少
<a href="java:alert('ok')">登录</a>
1.3 JavaScript显示数据
1.3.1 使用window.alert()弹出框
PS这里的window可以省略,等价于alert(“hello”);
1.3.2 使用document.write()将内容写入到html文档
1.3.3 使用innerHTML写入到HTML元素
注意,此时浏览器报错,因为代码从上至下执行,红色部分要获取id=1的元素,但是此时div元素并未创建,所以会报错,我们需要将红色部分移动到元素创建完毕之后。
1.3.4 使用console.log写入到浏览器控制台
二、JavaScript的注释
JavaScript注释与java的单行和多行注释相同
单行注释以//开头
多行以 /* 开头 ,以*/结尾
三、JavaScript基本语法
JavaScript是一个脚本语言,它是一个轻量级,但功能强大的编程语言。
JavaScript语法跟java相似,但是也有区别,JavaScript是弱语言类型,即有些时候有些错误不影响运行,但是依然推荐大家按照规范去写代码。
3.1 JavaScript变量
声明变量用关键字:var
语法:var 变量名;
变量的命名规则:
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头
- 变量名称对大小写敏感(y和Y是不同变量)
- 不能使用关键字保留字
变量的命名规范:
- 见名知意。例如:breadPirce,userService等,避免无意义的a.b.c等
- 推荐驼峰命名法,即第一个单词的首字母小写,以后每个单词的首字母大写。例如lastName
3.2 JavaScript的语句
JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么
JavaScript是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码,而对于传统编程来说,会在执行前对所有代码进行编译。
JavaScript中也有分支结构和循环结构,语法与java类似,此处就不再深入讲解。细节上的内容等我们后面使用过的时候再说
PS:一般一行只写一条语句,每句以分号结束
3.3 JavaScript的数据类型
3.3.1 值类型(基本类型)
3.3.1.1 字符串String
字符串是储存字符的变量。字符串可以是引号中的任意文本。必须使用单引号或者双引号:
3.3.1.2 数字Number
JavaScript只有一种数字类型。数字可以带小数点,也可以不带:
3.3.1.3布尔boolean
只能有两个值:true 或 false
3.3.1.4 空 null
var email = null;
3.3.1.5 未定义 undefined
表示变量不含有值。可以通过将变量的值设为null来清空变量。
共有四种情况会出现undefined的值
1、变量声明且没有赋值
var obj;
alert(obj);//obj值为undefined
2、获取对象中不存在的属性时
var obj;
alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of undefined"
3、函数需要实参,但是调用时没有传值,那么函数的形参是undefined;
4、函数调用没有返回值或者return后没有数据,接收函数返回值的变量是undefined
function printNum(num){
alert(num);
}
var result = printNum();//调用函数未传递参数,执行函数的时候num的值是undefined
alert(result);//result的值也是undefined,因为printNum()没有返回值
3.3.1.6 Symbol
表示独一无二的值
3.3.2 引用数据类型:
对象(Object)、数组(Array)、函数(Function)
3.3.3 JavaScript拥有动态类型
JavaScript拥有动态类型,这意味着相同的变量可用作不同的类型;
var param; //param 类型为 undefined
param = 5; //现在 param 为数字
param = "john";//现在 param 为字符串
PS:不推荐该写法,还是应该声明变量时就确定它是什么类型,不要再更改
3.4 JavaScript中的运算符
算数运算符:+ - x / % 、 ++ 、 –
赋值运算符:= 、 +=、 -= 、*= 、 /= 、 %=
字符串的连接符:+
逻辑运算符: && || !
条件运算符:?:
比较运算符: == 、!= 、 > 、<、 >= 、 <=
以上运算符的运算规则与java一样,强调两个新的比较运算符:
var x = 5;
var res;
res = (x===5);//trye
res = (x==='5');//false
res = (x!==5);//false
res = (x!=='5');//true
四、JavaScript对象
4.1 JavaScript的String对象
4.1.1 String对象属性-长度属性
var str = "12345";
console.log(str.length); //5
4.1.2 String对象方法
类似java
4.2 JavaScript的Array对象
Array对象用于在变量中存储多个值,也就是数组
4.2.1 声明数组
4.2.2 数组的长度 length 属性
此处注意length是数组的属性,而不是方法,所以没有括号
var nameArr=["宝玉","黛玉","湘云"];
var len=nameArr.length; //获取数组的长度
4.2.3 Array对象的方法
4.3 JavaScript的Date对象
4.3.1 创建日期对象
var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
4.3.2 日期对象的常用方法
4.4 JavaScript的Math对象
与Java中的Math相似,跟数字相关的内容都在这里。有很多方法属性与java中也相似。
4.4.1 Math常用属性
var pi = Math.PI; //返回圆周率
4.4.2 Math常用方法
var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的小值。
五、JavaScript调试
六、JavaScript的函数
6.1 JavaScript的常用全局函数
JavaScript中有个常用的全局属性NaN,即非数值(Not a Number),NaN属性用于引用特殊的非数字值,该属性指定的并不是不合法的数字。
6.1.1 isNaN(param)
用于检查其参数是否是非数字值。
是数值的返回false,不是数值返回true
console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true
6.1.2 parseFloat(String)
可解析一个字符串,并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串
console.log(parseFloat("66"));//66
console.log(parseFloat("199.99"));//199.99
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat("10年"));//10
console.log(parseFloat("今天是8号"));//NaN
- 字符串中只返回第一个数字
- 开头和结尾的空格是允许的
- 如果字符串的第一个字符不能被转换为数字,那么parseFloat() 会返回NaN
6.1.3 praseInt(String,radix)
可解析一个字符串,并返回一个整数
当参数radix的值为0,或没有设置该参数时,parseInt()会根据String 来判断数字的基数
当忽略参数 radix,JavaScript默认数字的基数如下:
- 如果String 以"0x"开头,parseInt() 会把String 的其余部分解析为十六进制的整数
- 如果String 以 0 开头,那么ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进 制或十六进制的数字。
- 如果String 以 1 - 9 的数字开头,parseInt()将把它解析为十进制的整数
console.log(parseInt("66"));//66
console.log(parseInt("199.99"));//199
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16
PS:旧浏览器由于使用旧版本的ECMAScript(ECMAScript版本小于ECMAScript 5
当字符串以"0"开 头时默认使用八进制,ECMAScript 5使用的是十进制)
所以在解析("010") 将输出8
- 只有字符串中的第一个数字会被返回
- 开头和结尾的空格是允许的
- 如果第一个字符不识数字,那么会返回NaN
- 在字符串以“0”为开始时 默认是十进制基数
6.2 JavaScript的自定义函数
类似Java
6.2.1 自定义函数语法
使用function关键字定义函数
function 自定义函数名称(参数列表){
//函数体
}
6.2.2 自定义函数实例
注意:
1、函数的形参直接写参数名称,不需要声明类型,所以不需要写 var
2、函数的返回取决于函数体中是否有return关键字
6.3 JavaScript的匿名函数
七、JavaScript变量的作用域
7.1局部JavaScript变量
在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问。
在不同的函数中可以声明名称相同的变量,因为局部变量出该函数就失效了。
7.2 全局JavaScript变量
在函数外声明的变量是全局变量,网页上所有脚本和函数都能访问它。
7.3 变量的生命周期
JavaScript 变量的生命周期从它们被声明的时间开始
局部变量会在函数运行以后被删除,全局变量会在页面关闭后被删除。
八、JavaScript自定义对象
对象也是一个变量,但对象可以包含多个值(多个变量)
8.1 定义对象
对象中可以有属性,也可以有方法
8.2 对象的属性
可以说JavaScript中的对象是变量的容器
但是,我们通常认为JavaScript对象是键值对的容器
键值对通常写法为 name:value (键与值以冒号分割)
键值对在JavaScript对象通常称为 对象的属性
8.3 访问对象的属性
8.4 访问对象的方法
九、JavaScript Window–浏览器对象模型
浏览器对象模型(BOM)使 JavaScript 有能力与浏览器“对话”。
BOM:Browser Object Model , 中文 浏览器对象模型
虽然现在BOM尚无正式标准,但是由于现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性,因此window常被认为是BOM的方法和属性
9.1 window对象
所有浏览器都支持window对象。它表示浏览器窗口。
多有JavaScript 全局对象,函数以及变量均自动称为window对象的成员
全局变量是window对象的属性。全局函数是window对象的方法
window 对象表示浏览器中打开的窗口
9.2 window对象属性
常用属性:
9.2.1 history对象
window.history对象包含浏览器的历史
window.history 对象在编写时可不使用window这个前缀。
常用方法:
history.back()-与浏览器点击后退按钮相同
history.forward() -与浏览器点击向前按钮相同
history.go(1/-1) -参数为1 等同于history.forward(),参数为-1 等同于history.back()
例如:
<a href="java:window.history.forward()">前进</a>
<a href="java:window.history.back()">后退</a>
<a href="java:window.history.go(1)">前进go</a>