JavaWed第三章：JavaScript的全面知识
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
个人主页tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主
本文由 tq02 原创首发于 CSDN
本章讲解内容JavaScript的全面简洁讲解欢迎各位→点赞 + 收藏⭐ + 评论+关注✨
编译器VS Code
前言
本博文主要简单讲解JavaScript的概要知识为了后端而作准备虽然是概要知识但是依然是十分主要的知识点更好的了解前端知识以便后期后端知识的学习。
一.JavaScript的简介
概念
- JavaScript (简称:JS) 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的它能使网页可交互。
- JavaScript和Java 是完全不同的语言不论是概念还是设计。但是基础语法类似。
- JavaScript在1995年由 Brendan Eich 发明并于1997年成为ECMA标准
- ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)。
学习内容
JS主要学习以下内容
- JavaScript是控制网页行为的因此需要引入到HTML文档而引入的方式本文会有讲解
- Java和JavaScript毫无联系只是名字有点相似但是在基础语法方面类似并且JavaScript是一门弱类型语言且有单独的数据类型。
- JS函数不同于Java函数主要用于是被设计为执行特定任务的代码块。
- JS对象常用的对象例如Array、String等以及Json、BOM
- JS事件绑定等
二.JavaScript的引入方式
将JS代码与HTML文档代码结合如此一来便可以控制网页的行为而引入方式有2种分别为内部脚本和外部脚本
内部脚本
内部脚本将JS代码引入到HTML页面当中
JS代码 内部引入 要求
- JavaScript代码必须位于<script> </script>标签之间
- 在HTML文档中可以在任意地方放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部可改善显示速度
例如
//script可在任意位置
<html lang="en">
<head>
<title>JS代码</title>
<script>/* JS代码 */</script>
</head>
<body>
<script>/* JS代码 */</script>
</body>
<script>/* JS代码 */</script>
</html>外部脚本
外部脚本:将JS代码定义在外部JS文件(xx.js 文件)中然后引入到 HTML页面中
JS代码 外部引入 要求
- 外部JS文件中只包含]S代码不包含<script>标签
- <script>标签不能自闭合
引入语法<script src="js文件"></script>
例如
//js文件--new.js
代码文件
//HTML文件---old.html
<html lang="en">
<head>
<title>JS代码</title>
</head>
<body>
<script src="new.js"></script>
//自闭合<script src="new.js"/> 错误不可以这样
</body>
</html>
三.JavaScript的基础语法
基础语法包括三种语法书写、变量、数据类型和运算符及流程控制语句
注JavaScript是弱类型语言、JavaScript的运算符和流程控制语句和Java是十分相似的。
语法的书写
JavaScript语法的基本要求
- 区分大小写:与Java 一样变量名、函数名以及其他一切东西都是 区分大小写 的
- 每行结尾的分号可有可无但是建议大家使用。
- 注释: 单行注释: //注释内容 多行注释: /*注释内容*/
- 大括号代表代码块
JavaScript的输出形式有三种方式:
- window.alert()
将括号的内容写在警告框之中浏览器负责弹出注可以将window.省略直接使用alert()
- document.write()
将括号中的信息填入到网页之中
- console.log()
将括号内的内容写入控制台控制台网页->右击 "检查" ->点击 "console"
代码示例
<html lang="en">
<head>
<title>JS输出</title>
</head>
<body>
<script>
window.alert("我喜欢学习");
document.write("我喜欢Java");
console.log("我喜欢中国");
</script>
</body>
</html>输出结果
变量
JavaScript的变量声明不像Java会使用各种数据类型声明目前JavaScript有两种关键字可以定义变量分别为var全局变量、let局部变量
示例var a=10; let b=20变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线()或美元符号 (S)
- 数字不能开头
- 建议使用驼峰命名
JavaScript是一门弱类型语言变量可以存放各种类型的值。因此存在着原本的值被其他类型替换
ECMAScript 6新增了let局部变量、const常量
✨ 全局变量
关键字var 特点1、作用域很大 2、可重复定义
<script>
{
var a=10;
var a="tq02";
}
alert(a);
</script>其中a被定义了两次分别为10和"tq02"而最后定义是tq02因此a为tq02。
✨局部变量
关键字let 特点1、作用域为所在的代码块 2、不可以重复声明
<html lang="en">
<head>
<title>JS输出</title>
</head>
<body>
<script>
var a=10;
var a="tq02";
//不可以重复声明
//let a="20";
{
let a=20;
alert(a); //警告框输出为20出了代码块就失效了
}
window.alert(a);
document.write("我喜欢Java");
console.log("我喜欢中国");
</script>
</body>
</html>✨常量
关键字const 特点一旦声明常量的值就不可以改变编译时不会报错但无法编译成功
<html lang="en">
<head>
<title>JS输出</title>
</head>
<body>
<script>
const a=10;
// a="tq02"
window.alert(a);
</script>
</body>
</html>JavaScript的数据类型
因为JavaScript是弱类型语言在定义变量时不用指定数据类型但是JavaScript是存在数据类型的JavaScript数据类型分为原始类型、引用类型 引用类型就是JS函数在下一章有详细讲解我们主要讲解原始类型
| 原始类型 | 取值 |
|---|---|
| number | 数字小数、整数、NANnot a numer |
| string | 字符串单双引号皆可 |
| boolean | true、false |
| null | 对象为空 |
| undefined | 当声明的变量未初始化时默认为underfined |
问在平时中我们应该如何查看变量的元素类型呢
答使用关键字typeof
<script>
//number类型
alert(typeof 3);
alert(typeof 3.15);
//string
alert(typeof "tq02");
alert(typeof 'tq02');
//boolean
alert(typeof true);
alert(typeof false);
//object
alert(typeof null);
//underfined
var a;
alert(typeof a);而细心的人一定可以发现为什么null的数据类型是object啊
官方作出的解释这实际上是 JavaScript 最初实现中的一个错误然后被 ECMAScript 沿用了。现在null 被认为是对象的占位符从而解释了这一矛盾但从技术上来说它仍然是原始值。
JavaScript运算符
✨运算符的讲解
| JavaScript运算符 | |
| 算数运算符 | + — * / % ++ -- |
| 关系运算符 | > < >= <= != == === |
| 逻辑运算符 | && || |
| 条件三目运算符 | 条件表达式true_valuefalse_value |
| 赋值运算符 | = += *= != - = /= %= |
JavaScript的运算符和Java大致一样但是不同的就在于 === 不同于== ===表示的是值与类型相同而==为值相同
例如
<script>
a=10;
alert(a=="10") //true
alert(a==="10") //false
<script>如上图a=="10"时a会自动进行类型装换因此相等而a==="10",错误因为类型不同。
✨类型转换
类型装换分2种字符串转换成数字其他类型转换为boolean类型。
字符串转换为数字
将字符串字面值转换为数字如果字面值不是数字则转换为NaN。
而在转换的过程中有几个特别注意的。
<script> parseInt("12") //12 parseInt("ABC12") //NaN parseInt("12AB") //12 </script>注如果字符串是数字+字母则装换为前面的数字
其他类型转换为boolean类型
- Number0 和 NaN为false 其他均为true
- String空字符串为false 其他转换为true
- null和unde均为false
代码示例
<script> if(0){ //0为false不成立 alert("”0转换为false"); } if(NaN){ //NaN为false不成立 alert("NaN转换为false"); } if(1){ alert("1转换为true"); } if(""){ //空字符串为false不成立 alert("false"); } if("tq02"){ //字符串为true alert("true") } if(null||undefined){ //为false不成立不执行 alert(false); }注" "不是空字符串中间含有空格因此为true
流程控制语句
JavaScript流程控制语句有以下几种用法和Java是一致的。
- if....else if.....else
- switch
- for
- while
- do...while
四.JS函数
函数被设计为执行特定任务的代码块通过使用关键字 function进行定义。
语法格式
第一种定义方法 function 函数名(参数1,参数2..){ //执行的代码 } 第二种定义方法 var 变量名=function(参数1参数2{ //待执行代码 }注1、形式参数不需要类型。因为JavaScript是弱类型语言
2、返回值也不需要定义类型可以在函数内部直接使用return返回即可
第一种定义方法代码 展示
//注形式参数不需要类型所以直接为参数名
function add(a,b){
return a+b;
}
var result=add(10,20);第二种定义方法代码 展示
var result=add(a,b){
return a+b;
};
//函数调用的方法一样
add(20,30);函数调用时需要注意一点函数调用时可以传递任意个数的参数但是函数只接收前几个。
例如
var result=add(a,b){ //只接收20和30
return a+b;
};
add(20,3050,60,70);
五.JS对象
JavaScript中含有很多对象官方资料查找https://www.w3school.com.cn/
而我们主要讲解3种对象JS当中最为重要的Array、String、JSON
Array讲解
✨Array基本知识
Array对象我们很熟悉用于定义数组的。
定义方法
- var 变量名 =new Array(元素列表;
- var 变量名=[ 元素列表 ];
访问方法
- 变量名[ 下标值 ] 注和Java一样从下标0开始。
特点长度可变、类型可变
长度可变讲解
<script>
var a=new Array(1,2,3,4);
a[10]=50;
</script>如上述代码我定义了一个数组长度为4位然后我在下标为9的位置上赋值为50并没有出错而有人会问那么下标4到下标8的值为什么呢由于没有赋值因此为默认值undefined。
类型可变讲解
<script>
var a=new Array(1,2,3,4);
a[10]=50;
a[6]="tq02";
</script>在下标为5的位置上赋值了tq02而并没有报错正常编译。
✨Array之属性与方法
Array常用属性length。 作用获取数组长度
Array常用方法
- forEach() 作用遍历数组遍历数组中有值的元素。
- push() 作用添加元素可一次性添加多个元素。
- splice() 作用删除元素从某个下标删到某个下标。
forEach()方法
<script>
var a=[1,2,3,4,5,6,7,8];
a.forEach(function(e){
alert(e);
})
</script>额外讲一个箭头函数将函数关键字function删去如果有形参就使用没有就空着然后打上箭头(=>)。其他不变。例如将上述代码修改为箭头函数,使代码更为简洁
<script> var a=[1,2,3,4,5,6,7,8]; a.forEach((e)=>{ alert(e); }) </script>
push()方法
<script>
var a=[1,2,3,4,5,6,7,8];
a.push(3,4,5); //数组a添加了3个值
</script>splice()方法
<script>
var a=[1,2,3,4,5,6,7,8];
a.splice(2,5); //从下标值2开始删到下标值5
</script>String讲解
String字符串对象创建方法有2种
- var 变量名 = new String("....");
- var 变量名="....";
✨String之属性与方法
String常用属性length。 作用获取字符串长度
String常用方法
- charAt() 作用返回指定下标值的字符
- indexOf 作用检索字符串
- trim() 作用去除字符串两边的空格
- substring() 作用提取字符串中两个指定索引号之间的字符
charAt() 方法
<script>
var a="abcdefg";
alert(a.charAt(3)); //弹出下标为3的d
</script>indexOf()方法
<script>
var a="abcdefg";
alert(a.indexOf("cd")); //检索到下标为2
</script>
trim()方法
<script>
var a=" abcdefg ";
alert(a.trim()); //将字符串两端的空格去除
</script>
substring()方法
<script>
var a="abcdefghigk";
alert(a.substring(3,8)); //截取下标为3的d到下标7的h
</script> // 含头不含尾所以不含有下标为8的值
JSON对象
✨自定义对象
自己使用编译器定义一个对象以便操作。
语法格式var 对象名{
属性名1属性值,
属性名2属性值,
........ : .........,
函数名(形参列表{ }
}
调用方法1、对象名.属性名 2、对象名.函数名
✨JSON
概念JavaScript Object NotationJavaScript对象标记法
JSON是通过JavaScript对象标记法书写的文本。
注意了这是文本也就是字符串。而对象就是自定义对象由于是字符串所以大括号里的属性名也需要双引号。
基础语法var 变量名='{"key1":value1, "key2":value2, ............... }';
value数据类型数字整数、浮点数、字符串双引号当中、逻辑值true、false、数字方括号中、对象花括号中
例如
var a='{
"name":"tq02",
"sex":"男"
"age"22
"addr":["背景""上海""西安"]
}'
- 问如何调用JSON中key对应的value的值
答使用关键字parse将json字符串 转换 js对象
问那么可以讲 js对象 转换为 JSON字符串 嘛
答可以使用stringify关键字进行转换。
<script>
var a='{ "name":"tq02", "age":22 , "addr": ["北京","上海","四川"]}';
var j=JSON.parse(a); //转换为了js对象
alert(j.addr);
alert(JSON.stringify(j)); //再次转换为了JSON字符串
</script>
六.JS之BOM
概念Browser 0bject Model 浏览器对象模型允许avaScript与浏览器对话JavaScript 将浏览器的各个组成部分封装为对象。也就是说BOM就是由对象组成。
BOM组成
- window浏览器窗口对象
- Navigator浏览器对象主要是浏览器的应用名称、版本和内核
- Screen屏幕对象
- History历史记录对象
- Location浏览器的地址栏对象
window
问如何使用window对象
答直接使用window就可以了
问如何调用window对象的方法或者属性
答使用window.对象/方法 对了使用方法时可以省略window.
常用属性
- history: 对 History 对象的只读引用。
- location: 用于窗口或框架的 Location 对象。
- navigator: 对Navigator 对象的只读引用。
常见的方法
- alert(): 显示带有一段消息和一个确认按钮的警告框
- confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框并且有返回值
- setlnterval(): 按照指定的周期 (以毫秒计)来调用函数或计算表达式
- setTimeout(): 在指定的毫秒数后调用函数或计算表达式。
<script>
alert("tq02");
confirm("你确定删除嘛");
//每两秒执行一次
var i=0;
setInterval(()=>
{
document.write(i++);
},2000)
//两秒之后执行该函数
setTimeout(()=>{
document.write(5000);
},2000)
</script>Location
Location地址栏对象
使用方法window.location由于window.可以省略因此直接使用location
属性href设置或返回完整的URL。
<script>
location.href="https://blog.csdn.net/m0_74097410?type=blog";
</script>
七.JS之DOM
概念Document Obiect ModelW3C(万维网联盟)的标准文档对象模型定义了访HTML和XML文档的标准分为3个不同的部分1.Core DOM、2.XMLDOM、3.HTML DOM
1.Core DOM将标记语言的各个组成部分封装为对应的对象:
- Document: 整个文档对象 封装的是整个文本
- Element:元素对象 封装了文本的所有的标签
- Attribute:属性对象 封装了所有标签中的属性
- Text:文本对象 封装了所有标签之间的文本
- Comment: 注释对象 封装了文本所有的注释
2.XMLDOM-XML 文档的标准模型核心DOM的子集。
3.HTML DOM-HTML JavaScript可以通过DOM进而对HTML进行操作
- 改变HTML元素的内容
- 改变HTML元素的样式(CSS)
- 对HTMLDOM 事件作出反应
- 添加和删除HTML元素
注我们主要学习HTML DOM-HTML、主要学习如何获取该元素对象、如何修改该对象内容
如何获取该元素对象
HTML中的HTML元素可以通过Document对象获取而Document对象是通过window对象获取的。
而Document对象提供了以下以下获取HTML元素对象的函数:
- 根据id属性值获取返回单个Element对象
var h1 = document.getElementById( 'h1'); - 根据标签名称获取返回Element对象数组
var divs = document.getElementsByTagName( 'div'); - 根据name属性值获取返回Element对象数组
var hobbys = document.getElementsByName( 'hobby'); - 根据class属性值获取返回Element对象数组
完整代码示例var clss = document.getElementsByClassName('cls');
<html lang="en">
<head>
<title>Document</title>
<img id="h1" src="图片链接"><br><br>
<div class="cls">csdn官网</div> <br>
<div class="cls">tq02网页</div> <br>
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
</head>
<body>
<script>
//1.获取元素根据id名获取
var img=document.getElementById('h1');
alert(img);
//2.根据标签获取
var divs=document.getElementsByTagName('div');
for(let i=0;i<divs.length;i++){
alert(divs[i]);
}
//根据name属性值获取
var hobbys = document.getElementsByName( 'hobby');
for(let i=0;i<hobbys.length;i++){
alert(hobbys[i]);
}
//根据class属性值获取
var clss = document.getElementsByClassName('cls');
for(let i=0;i<clss.length;i++){
alert(clss[i]);
}
</script>
</body>
</html> 修改文本内容
通过DOM修改文本内容我们需要使用到getElementsByClassName()方法;以及innerHTML属性
代码示例 ------ 将csdn官网文字变为划拳游戏
<html lang="en">
<head>
<title>Document</title>
<img id="h1" src="图片链接"><br><br>
<div class="cls">csdn官网</div> <br>
<div class="cls">tq02网页</div> <br>
</head>
<body>
<script>
var a=doucument.getElementByClassName('cls');
var divs=a[0];
divs.innnerHTML="划拳游戏";
</script>
</html>
八.事件监听
事件监听顾名思义分为事件和监听两者相辅相成。缺一不可。
事件HTML事件指发生在HTML元素上的'事情'比如按钮被点击鼠标移动按下键盘等等。
而计算机是如何监听到事件的发生呢
答通过事件绑定
常见事件
| 事件名 | 说明 |
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
而下面的事件绑定我们使用onclick
事件绑定
事件绑定有两种方式
方式一通过HTML标签的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1">
<script>
function on(){alert(!我被点击了!');
}
</script>解析当点击按钮时我们就可以通过事件属性onclick,所绑定的on()方法然后调用script中的on()方法
方式二通过 DOM 元素属性绑定
<input type="button" id="btn" value="按钮2">
<script>
document.getElementById('btn' ).onclick=function(){
alert('我被点击了!);
}
</script>解析通过document获取指令DOM元素然后再通过onclick属性来绑定一个函数。
总结
看到这里JavaScript的基本内容已经学会了理论已经有了是时候进行实践操作了JavaScript最重要最难的内容是DOM和事件监听本文内容显示有限如果想更加深入学习还是需要去看视频进行加一步学习。
------------------懒惰的tq02