您现在的位置是：首页 > 技术教程正文

JavaScript基础（详细总结）

admin 阅读： 2024-03-29

后台-插件-广告管理-内容页头部广告（手机）

1、JavaScript简介

1.2、JavaScript的发展史

1.3、JavaScript的功能

1.4、JavaScript的特点

1.5、JavaScript组成

2、JavaScript基础语法

2.1、HTML引入JS

2.1.1、内部引入

2.1.2、外部引入

2.2、JS输出数据的三种方式

2.2.1、浏览器弹窗

2.2.2、输出HTML页面

2.2.3、输出浏览器控制台

2.3、JS注释

2.3.1、单行注释

2.3.2、多行注释

2.4、JS变量声明

2.4.1、定义变量

2.4.2、定义常量

2.5、JS的数据类型

2.5.1、类型判断 typeof变量

2.6、JS的运算符

2.6.1、算数运算符

2.6.2、比较运算符

2.6.3、三目（元）运算符

2.7、JS流程控制语句

2.7.1、if结构

2.7.2、switch语句

2.8 、循环结构

2.8.1、for循环

2.8.2、while循环

2.8.3、do...while循环

2.9、 JS函数

2.9.1、函数的第一种定义方式

2.9.2、函数的第二种定义方式

2.9.3、函数的第三种定义方式

2.9.4、绑定一个函数

2.9.5、获取标签中的内容

2.9.6、函数总结

2.10、正则表达式

3、JS的常用内置对象

3.1、String对象

3.1.1、创建对象

3.1.2、常用方法

3.2、Array对象

3.2.1、创建数组

3.2.2、常用方法

3.2.3、数组特点

3.3、Math对象

3.3.1、创建对象

3.4、Date对象

3.4.1、创建对象

3.4.2、常用方法

3.5、全局函数

3.5.1、什么是全局函数

3.5.2、常用全局函数

3.5.3、字符编码

3.5.4、普通字符串解析js代码

3.5.5、URL和URI

1、JavaScript简介

一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了。

1.2、JavaScript的发展史

起源问题：上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。
发明诞生：有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
竞争对手：看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
标准制定： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。

1.3、JavaScript的功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

1.4、JavaScript的特点

1、js源码不需要编译，浏览器可以直接解释运行。

2、js是弱类型语言，js变量声明不需要指明类型。

1.5、JavaScript组成

组成部分	作用
ECMA Script	构成了JS核心的语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用来操作网页中的元素（标签）

2、JavaScript基础语法

2.1、HTML引入JS

2.1.1、内部引入

定义script标签，标签体内容就是js代码

<script>
//js代码
script>

2.9.4、绑定一个函数

html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script>
function demo(){
alert("点我干嘛？");
}
script>
head>
<body>
<input type="button" value="点我哦" onclick="demo()" />
body>
html>

2.9.5、获取标签中的内容

<script>
function demo(){
//获取p标签
var pid = document.getElementById("pid");
//获取p标签中的内容
// alert(pid.innerHTML);
//修改标签中的内容
pid.innerHTML = "静相思";
/**
* 1、拿到要获取内容的标签
* 2、跟获取的标签，再【获取内容】对象名.innerHTML 【修改内容】对象名.innerHTML = "修改内容"
*/
}
script>
head>
<body>
<p id="pid">唐诗三百首p>
<button onclick="demo()">修改内容button>
body>

2.9.6、函数总结

注意事项

方法定义时，形参的类型不用写,返回值类型可写可不写
如果定义名称相同的方法，会被覆盖，js中没有方法的重载的概念
在JS中，方法的调用只与方法的名称有关，和参数列表无关
在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
JS函数中也可以有匿名函数

匿名函数经常会跟事件进行结合着使用

function(参数列表){
函数体;
[return 返回值;]
}

2.10、正则表达式

RegExp对象，正则对象，正则表达式的书写规则和Java也一致：

. 当前可以是任意字符
? 表示零次或一次
* 表示零次或多次
+ 表示一次或多次

() 对某个存在的正则进行分组组的使用 \组号 $组号
{} 当前的规则可以出现的次数
{2} 正好 2次 {m,} 最少m次 {m,n} 最少m次最多n
[] 当前位置上可以是中括号中某个字符
[abc] [^abc] [a-zA-Z][0-9]

\\d 当前位置上可以数字
\\w 当前位置上可以是字母数字下划线
\b 单词边界 hello world
^ 行开始
$ 行结尾

3、JS的常用内置对象

3.1、String对象

3.1.1、创建对象

有三种方式: 单引号('') 、双引号("") 、反引号(``)

<script type="text/javascript">
//双引号字符串
let s1 = "双引号字符串";
//单引号
let s2 = '单引号字符串';
//反引号字符又叫做`字符串模板` ,模板中可以使用${}来进行插值.
let s3 = `反引号字符串`;
let n = 3547;
let s5 =`你的验证码是：${n}`;
console.log(s5);//你的验证码是：3547
script>

3.1.2、常用方法

方法	说明
substring()	提取字符串中两个指定的索引号之间的字符，和java一样，包左不包右
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
replace()	替换与正则表达式匹配的子串。
charAt()	返回在指定位置的字符。
trim()	移除字符串首尾空白
split(delimiter)	把字符串分割为子字符串数组;分割为数组

<script>
let a = "我爱这个世界";
document.write(a.substring(2, 6));
document.write("
")
let b = "abcdefg";
document.write(b.toLocaleUpperCase());//把字符串转换为大写
document.write("
")
let c="ABCDEFG";
document.write(c.toLocaleLowerCase());//把字符串转换为小写
document.write("
")
let e="awejjj";
document.write(e.charAt(2));//从0开始 //e
document.write("
")
let f=" wii i ";
document.write(f.trim());//wii i //只清除两边的空白单词中间空格不清除
document.write("
")
let o="d,w,a,d,w";
console.info(o.split(","));
script>

3.2、Array对象

3.2.1、创建数组

let 数组名 = [元素1,元素2,元素3.....];

格式一

<script>
//数组中元素类型是随便写
let arr = [11,22,33,44,"55"];
//长度
// alert(arr.length);
//指定获取数组中的元素
// alert(arr[4]);
//通过脚标修改元素
arr[2] = 99;
arr[3] = "hello";
//遍历一
for(let i = 0; i< arr.length; i++){
document.write(arr[i]);
document.write("
");
}
//遍历二
for(let a in arr){
document.write(arr[a]+",");
}
script>

格式二

let 数组名 = new Array(元素1,元素2,元素3.....);

<script>
//如果给出多个参数，表示的是数组的元素
let arr = new Array(11,22,"hello",'88',true);
//长度
alert(arr.length);
//获取
alert(arr[2]);
//如果给的参数所number类型，并且只有一个，表示是长度
let arr = new Array(11);
alert(arr.length);
//如果给的参数所number类型，是一个小数，无法表示长度
let arr = new Array(3.14);
alert(arr.length);
//如果给的参数字符中类型，并且是一个，表示元素
let arr = new Array("11");
alert(arr.length);
//遍历
for(let i in arr){
document.write(arr[i]);
}
script>

3.2.2、常用方法

方法	说明
concat()	连接两个或更多的数组，并返回结果
push()	向数组的末尾添加一个或更多元素，并返回新的长度
join(参数)	将数组中的元素按照指定的分隔符拼接为字符串

<script type="text/javascript">
// 格式一创建数组
let arr1 = ["张三","李四","王五",true];
// 格式二创建数组
let arr2 = new Array("古力娜扎","玛尔扎哈",12.3,false);
// arr1 和 arr2 合为一个数组
let newArray = arr1.concat(arr2);
console.log(newArray);
// push: 添加一个新的元素
let len = arr2.push("新元素");
console.log(arr2);
console.log(len);
// join：按照一定的格式拼接字符串
let strArray = arr2.join("=");
console.log(strArray);
script>

3.2.3、数组特点

1、JS中，数组元素的类型可变的。
2、JS中，数组长度可变的。

3.3、Math对象

3.3.1、创建对象

Math对象不用创建，直接使用。 Math.方法名();

方法	说明
round(x)	把数四舍五入为最接近的整数。
floor(x)	向下取整
ceil(x)	向上取整
random()	随机数，返回 0 ~ 1 之间的随机数。含0不含1

<script>
let round = Math.round(3.14);
let ceil = Math.ceil(3.14);
let floor = Math.floor(3.14);
let random = Math.random();
// 获取1~100之间的随机整数
let randomNumber = Math.floor((Math.random() * 100)) + 1;
script>

属性	说明
PI	圆周率

3.4、Date对象

3.4.1、创建对象

var date = new Date();

3.4.2、常用方法

方法	说明
toLocaleString()	返回当前date对象对应的时间本地字符串格式
getTime()	获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
getFullYear()	获取年
getMonth()	获取月
getHours()	获取时
getMinutes()	获取分
getDate()	获取日
getSeconds()	获取秒

<script>
var d = new Date();
console.info(d);//Fri Jul 02 2021 17:23:09 GMT+0800 (中国标准时间)
console.info(d.toLocaleString()); //2021/7/2 下午5:23:19
console.info(d.toLocaleDateString());//2021/7/2
console.info(d.toLocaleTimeString());//下午5:23:19
console.info('获取年:'+d.getFullYear());//获取年
console.info('获取月:'+d.getMonth());//获取月
console.info('获取日:'+d.getDate());//获取日
console.info('获取小时:'+d.getHours());//获取小时
console.info('获取分:'+d.getMinutes());//获取分
console.info('获取秒:'+d.getSeconds());//获取秒
console.info('获取毫秒:'+d.getTime());获取毫秒
script>

3.5、全局函数

3.5.1、什么是全局函数

全局函数不需要对象就可以直接调用: 方法名();

3.5.2、常用全局函数

方法	说明
parseInt()	将字符串解析成一个整数。
parseFloat()	将字符串解析成一个浮点数。
isNaN()	判断是否是一个NaN类型的数据

<script>
console.log(parseInt("123.456"));//123
console.log(parseInt("12abc3.456"));//12
console.log(parseFloat("123.456"));//123.456
console.log(parseFloat("123.45abc6"));//123.45
console.log(parseInt("abc123"));//NaN : not a number 不是一个数字
console.log(isNaN("abc123"));//true
script>

如果要判断是否是一个NaN类型的数据，使用isNaN()

3.5.3、字符编码

方法	说明
encodeURI()	把字符串编码为 URI
decodeURI()	解码某个编码的 URI

<script>
let name = "明下午两点偷袭珍珠";
let encodeName = encodeURI(name);//编码
//%E6%98%8E%E4%B8%8B%E5%8D%88%E4%B8%A4%E7%82%B9%E5%81%B7%E8%A2%AD% E7%8F%8D%E7%8F%A0
console.log(encodeName);
// 对数据进行解码
let resultStr = decodeURI(encodeName);//解码
console.log(resultStr);
script>

3.5.4、普通字符串解析js代码

方法	说明
eval()	接受一个js字符串,校验字符串中的内容是不是js代码(脚本)，如果是js代码就执行，如果不是就不执行

3.5.5、URL和URI

如下面网址：

https://www.baidu.com/a/fdks/kdjs

http:// 网络传输协议

www 万维网

.baidu.com 域名

/a/fdks/kdjs 资源路径（资源：一个文件，一个程序，图片，视频，，，）

URL: 统一资源定位符百度一下，你就知道

URI：统一资源标识符 /a/fdks/kdjs

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）