JavaWeb-JS基础
4.JS基础
(1)JS的引入方式
HTML内部引入
- 将JS代码放在“< script >< /script >”标签之间
- 在HTML文档中,可以在任意地方放置任意数量的< script >
- 一般将其放在 body 元素的底部,改善显示速度
<script>
alert("WY") //JS代码
</script>
外部.js文件引入
在外部单独编写js脚本,在HTML中写入以下代码引入JS脚本
<script src="js/demo.js"></script>
(2)JS书写语法规则
- JS区分大小写
- 每行的分号可有可无
- 注释:单行// 多行/* */
- 大括号{}表示代码块
(3)JS的三种输出语法
alert()
- Window.alert()写入警告框
window.alert("警告") //打开网页后浏览器弹出警告框
write()
- 写入HTML页面中
document.write("Hi") //直接写入HTML网页中
log()
写入浏览器控制台
控制台打开方式:右建-检查-console 或者 F12
console.log("Bye") //写入浏览器控制台
(4)变量
变量名的规则
- 组成字符为任何字母,数字,下划线_ 美元符号$
- 数字不能开头
- 使用驼峰命名
变量的声明
- JS语言是弱类型语言,可以存放不同类型的值
- var定义的变量作用域大,属于全局变量
- var定义的变量可以再次重复定义
var a = 20;
a = "张三";
新增变量定义关键字
- let关键字定义的变量只在所在的代码块内有效,且不允许重复声明
- const关键字用来声明一个只读的常量,一旦声明,常量的值不能改变。
(5)数据类型&运算符
- JS的数据类型分为:原始类型 和 引用数据类型
- typeof可以获取数据类型
原始类型
number:数字
string:字符串,单双引号都可以
boolean:布尔。true,flase
null:对象为空
undefined:当声明的变量未初始化时,该变量的默认值为undefined
运算符
在JS语言中,运算符与Java语言中的运算符基本相同,但比Java语言多了一个"==="全等运算符
- ==符号会自动进行类型转换
- ===不会自动进行类型转换
var a = 10;
alert(a == "10"); //true
alert(a === "10"); //flase
alert(a === 10); //true
(6)常用类型转换
字符串类型转数字:将字符串字面值转为数字,如果字面值不是数字,则转为NaN。
其他类型转为boolean:
- Number:0和Nan为flase,其他为true。转换语句parseInt() 。
- String:空字符串为flase,其他为true
- Null和undefined:均转为flase
//字符串转数字示例
parseInt("12"); //12
parseInt("12A45"); //12 将最前面的数字转换后,不是数字的部分被舍弃
parseInt("A45"); //NaN
(7)函数
- 函数是被设计为执行特定任务的代码块
函数的定义
//定义方式1
function functionName(参数1,参数2...){
//要执行的代码
}
//定义方式2
var add = function(a,b){
return a+b;
}
//调用
var result = add(10,20);
var result2 = add(10,20,30,40); //与上一条调用语句的结果相同,只会传递10,20两个实际参数
- 形式参数不需要类型,因为JS语言是弱语言类型
- 返回值不需要定义类型,可以直接return
- 调用: 函数名(实参列表)
- 实际传递的参数可以比形参列表多,传递进去的参数会是最前面的几个
(8)对象-Array数组
- JS中Array对象用于定义数组。
定义
//方式1
var 变量名 = new Array(元素列表);
var arr = new Array(1,2,3,4);
//方式2
var 变量名 = [元素列表];
var arr = [1,2,3,4];
调用
arr[索引] = 值;
arr[10] = "hello";
- Array数组的特点:
- 长度可变(可以直接追加长度),类型可变(一个数组里面可以存储多种类型的数据)
//长度可变测试
var arr = [1,2,3,4];
arr[10] = 50;
console.log(arr[10]); //50
console.log(arr[9]); //undefined
//类型可变测试
arr[9] = "A";
arr[8] = true;
Array的属性
- length:设置或返回数组中元素的数量
int len = arr.length;
方法
- forEach(函数):遍历数组中的每个有值的元素,并调用一次传入的函数
- push():将新元素添加到数组的末尾,并返回新的长度
- splice(索引位置,删除个数):从数组中删除元素。
- push(e1,e2,e3...):追加元素到数组末尾
//forEach(函数)
arr.forEach(function (e){ //打印遍历元素,e代表"element"元素
console.log(e);
})
//push()函数
arr.push(6,7,8); //追加元素到数组末尾
//splice(索引位置,删除个数)
arr.splice(2,2); //表示从第二个索引开始删除2个元素
(9)JS对象-String字符串
定义
//方式1
var 变量名 = new String("...");
var str = new String("Hello String");
//方式2
var 变量名 = "..."
var str = "Hello String";
属性
- length
int len = arr.length;
方法
- charAt(索引):返回在指定位置的字符
- indexOf(”字符串“):检索字符串
- trim():去除字符串两边的空格
- substring(开始索引,结束索引):提取字符串中两个指定的索引号之间的字符
(10)JS对象-JSON
JS自定义对象
定义
var 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3,
函数名称:function(形参列表){}
};
var user = {
name:"Tom",
age:20,
gender:"male",
eat:function(形参列表){
alert("你好");
}
};
调用
//对象名.属性名;
user.name;
//对象名.函数名();
user.eat();
JSON
- JSON中对象的定义与JS语言定义对象格式基本相同,其属性名需要用双引号
- JSON常用于作为数据载体,在网络中进行数据传输
- JSON可以理解为一种书写格式
{"name":"Tom","age":20,"gender":"male"}
JSON基础语法
- 定义
var 变量名 = '{"key1":value1,"key2":value2}'
var userStr = '{"name":"Tom","age":20,"gender":"male"}'
- JSON的转换
- 转换1:将JSON字符串转为JS对象
- 转换2:将JS对象转为JSON字符串
var jsObject = JSON.parse(userStr); //转换1
alert(jsObject.name); //转换之后才能获取属性值
var jsonStr = JSON.stringify(jsObject); //转换2
alert(jsonStr); //打印字符串
(11)BOM浏览器对象模型
- BOM是浏览器对象模型,允许JS与浏览器对话,JS将浏览器的各个组成部分封装成为对象
BOM的组成:
Winodw:浏览器窗口对象
Navigator:浏览器对象(应用名称,版本,内核)
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象
Window对象方法
//alert():显示一段消息和带一个确认按钮的警告框
window.alert("Hello"); //可以省略window
alert("Hello"); //可以省略window
//confirm():显示一段消息和带一个确认按钮和取消按钮的警告框。带有一个返回值(确认为true,反之flase)
confirm("您确认删除该记录吗?");
var flag = confirm("您确认删除该记录吗?"); //保存返回值
//setInterval(函数,周期时间(单位ms)):周期性地执行传入的函数
setInterval(function(){
console.log("执行定时器")
},2000)
//setTimeout(函数,延迟时间(ms)) --- 延迟指定时间执行一次
setTimeout(function(){
alert("执行定时器")
},2000)
Location对象
- 地址栏对象
- 获取:window.location获取,其中window.可以省略
//对象的获取
window.location.属性;
location.属性;
//location的属性
//href:设置或返回完整的URL
alert(location.href); //打印该网页网址
location.href="https://www.itcast.cn" //跳转到指定域名
(12)DOM对象
DOM是文档对象模型
将标记语言的各个组成部分封装成对应的对象
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
DOM获取元素对象的函数
//1.根据id属性值获取,返回单个Element对象
var h1 = document.getElementByID('h1');
//2.根据标签名获取,返回Element对象数组
var divs = document.getElementsByTagName('div');
//3.根据name属性值获取,返回Element对象数组
var hobbys = document.getElementsByName('hobby');
//4.根据class属性值获取,返回Element对象数组
var class = document.getElementsByClassName('cls');
DOM的使用
- 以下展示常用的函数,更多用法参考手册
//1.获取div的DOM对象
var divs = document.getElementsByTagName('div');
//2.选择要修改的对象
var div1 = divs[0]; //选择第一个div的内容
//3.innerHTML修改div值
div1.innerHTML = "WY"; //修改文本内容
(13)事件监听
- 事件:HTML事件是发生在HTML元素上的“事情”。比如:
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
- 事件监听:JS可以在事件被侦测到时执行代码
事件绑定的两种方式
- 方式1:通过HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1" >
<script>
function on(){
alert('已点击');
}
</script>
- 方式2:通过DOM元素属性绑定
<input type="button" id="btn" value="按钮2" >
<script>
document.getElementById('btn').onclick=function on(){
alert('已点击');
}
</script>
常见元素事件
JavaWeb-JS基础的更多相关文章
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- JS基础(超级简单)
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
- JavaWeb:JavaBean基础
JavaBean基础 JavaBean简介: 1.JavaBean是一种可以重复使用的类,可以没有用户界面,主要负责业务数据或者处理事物(数据运算.操作数据库) 2.与JSP配合,可以简化JSP代码. ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
随机推荐
- Cilium系列-16-CiliumNetworkPolicy 实战演练
系列文章 Cilium 系列文章 前言 今天我们进入 Cilium 安全相关主题, 基于 Cilium 官方的<星球大战> Demo 做详细的 CiliumNetworkPolicy 实战 ...
- form 表单恢复初始数据
1 表单数据的保存和恢复方法 1.1 前端数据保存方法 在前端,我们可以使用两种方法来保存表单数据:LocalStorage 和 Cookie. 使用 LocalStorage 保存数据:LocalS ...
- [MAUI]在.NET MAUI中实现可拖拽排序列表
.NET MAUI 中提供了拖放(drag-drop)手势识别器,允许用户通过拖动手势来移动控件.在这篇文章中,我们将学习如何使用拖放手势识别器来实现可拖拽排序列表.在本例中,列表中显示不同大小的磁贴 ...
- GitHub Actions CI/CD 工作流实战
1. 什么是 GitHub Actions 与 workflow ? GitHub Actions 是 GitHub 提供的一种持续集成(CI)和持续部署(CD)的工具,用于自动化软件开发过程中的各种 ...
- 深入理解Linux内核——内存管理(4)——伙伴系统(1)
提要:本系列文章主要参考MIT 6.828课程以及两本书籍<深入理解Linux内核> <深入Linux内核架构>对Linux内核内容进行总结. 内存管理的实现覆盖了多个领域: ...
- 《Python魔法大冒险》005 魔法挑战:自我介绍机器人
魔法师和小鱼坐在图书馆的一扇窗户旁,窗外的星空闪烁着神秘的光芒.魔法师轻轻地拍了拍小鱼的肩膀. 魔法师: 小鱼,你已经学会了编写简单的魔法程序,现在我要教你如何创造一个有自己思想的机器人,让它能够和我 ...
- 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(1)
在我们的SqlSugar的开发框架中,整合了Winform端.Vue3+ElementPlus的前端.以及基于UniApp+Vue+ThorUI的移动前端几个前端处理,基本上覆盖了我们日常的应用模式了 ...
- 在线PNG, JPG, BMP 转ICO图标,适用WINDOWS XP, VISTA, 7, 8, 10
在线PNG, JPG, BMP 转ICO图标网址: http://static.krpano.tech/image2ico 该网站可以把PNG, JPG和BMP图片转换成包含多个层级的ICO图标, 可 ...
- 电气工程师必学------CODESYS v3.5 入门学习笔记(一)
一.新建工程 打开软件新建工程,如图 此教程只是入门练习,所以这里一般情况下都是创建的Standard project,也就是标准工程.窗口下方可以设置工程名称与存放位置. 紧接着是选择设备与编译语言 ...
- Text2Cypher:大语言模型驱动的图查询生成
话接上文<图技术在 LLM 下的应用:知识图谱驱动的大语言模型 Llama Index> 同大家简单介绍过 LLM 和图.知识图谱相关的结合,现在我来和大家分享下最新的成果.毕竟,从 GP ...