web前端学习(四)JavaScript学习笔记部分(3)-- JavaScript函数+异常处理+事件处理
1、Javascript函数-了解函数的用途
1.1、函数:
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
2、Javascript函数-定义函数
2.1、function必须小写
3、Javascript函数-调用函数
3.1、调用方式:
在<script>标签内部调用
在HTML文件中调用
加一个onclick()函数
4、Javascript函数-带参数的函数
onclick="demo('iwen',20)";
在这里要注意的是在双引号内部传string类型数值时需要使用单引号。
5、Javascript函数-带返回值的函数
有时需要将函数的值返回给调用他的地方。
通过使用return语句就可以实现
注意:在使用return语句时,函数会停止执行,同时返回值;
return
6、Javascript函数-局部变量和全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var n = 10; m = 10;//全局变量
function demo(){
var i = 10;//局部变量
x = 10;//全局变量(但是要等x所在的demo函数调用之后才可以使用)
}
demo();
alert(x);
</script>
</body>
</html>
2、事件
2.1、什么是事件?
事件是可以被JavaScript侦测到的行为
2.2、主要事件
事件 | 描述 |
onClick | 单击事件 |
onMouseOver | 鼠标经过事件 |
onMouseOut | 鼠标移出事件 |
onChange | 文本内容改变事件 |
onSelect | 文本框选中事件 |
onFocus | 光标聚集事件 |
onBlur | 移开光标事件 |
onLoad | 网页加载事件 |
onUnload | 关闭网页事件 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="mgs()">
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)">this</div>
<script>
function onOver(ooj){
ooj.innerHTML = "hello";
}
function onOut(ooj){
ooj.innerHTML = "world";
}
</script> <form>
<input type="text" onchange="alert('内容改变了');">
<input type="text" onselect="changeDemo(this)">
</form>
<script>
function changeDemo(bg){
bg.style.background = "blue";
}
function mgs(){
alert("网页内容加载完毕");
}
</script>
</body>
</html>
异常处理
1、异常:
当JavaScript引擎执行JavaScript代码时,发生了错误,导致程序停止运行
2、异常抛出
当异常产生,并且将这个异常生成一个错误信息
3、异常捕获
try{
//发生异常的代码块;
}catch(err){
错误信息处理;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function demo(){
try{
alert(str);//正确错误都要执行。
}catch(err){
alert(err);
}
}
demo();
</script>
</body>
</html>
4、Throw语句
通过throw语句创建一个自定义错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" id="button" onclick="demo()" value="按钮">
</form>
<script>
function demo(){
try{
var e = document.getElementById("txt").value;
if(e == ""){
throw "用户输入异常 == null";
}
}catch(err){
alert(err);
}
}
</script>
</body>
</html>
web前端学习(四)JavaScript学习笔记部分(3)-- JavaScript函数+异常处理+事件处理的更多相关文章
- web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)
函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么?
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
- 2022年Web前端开发流程和学习路线(详尽版)
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- 最适合2018年自学的web前端零基础系统学习视频+资料
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
- web前端零基础入门学习!前端真不难!
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 史上最全的web前端开发程序员学习清单!
今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...
- WEB 前端模块化,读文笔记
文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 req ...
随机推荐
- 过滤器filters
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- Java MySQL 批量查询数据,每次查询10条
因为 数据量比较多, 比如每次 /** * 批量查询 * @param sourList * @param batchCount * @param userMapper * @return */ pu ...
- Python学习day26-面向对象之小结
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- C#用API可以改程序名字
[DllImport("user32.dll", EntryPoint = "FindWindow")] public static extern int Fi ...
- 几种远程调用接口协议简单比较和web service(SOAP)与HTTP接口的区别:
什么是web service? 答:soap请求是HTTP POST的一个专用版本,遵循一种特殊的xml消息格式Content-type设置为: text/xml任何数据都可以xml化. ...
- [Ceoi2007]Royaltreasury
#1945. [Ceoi2007]Royaltreasury Online Judge:Bzoj-1945 Label:树形Dp,高精度 题目描述 在很久很久以前的一个王国里,王国的财产开始变得越来越 ...
- NOIP2018崩崩记
比赛前,做做往年的题目,嗯,似乎都很水,400+绝对没问题,如果完全发挥,起码500+. 然而-- Day0 这天是运动会,信息学的同学们向老师请假来机房. 然后我在机房里刷往届的题目,信心倍增. 最 ...
- iframe加载完成事件
var iframe = document.createElement("iframe"); iframe.src = "http://www.jb51.net" ...
- [转]js模块化(一)
java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5版本的ja ...
- 将数组按指定个数分割,并以"|"做分割
```js function sliceArray(arr,num){ let newArr=[] for (var i = 0; i < arr.length; i+=num) { if(ar ...