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函数-局部变量和全局变量

  

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script>
  9. var n = 10; m = 10;//全局变量
  10. function demo(){
  11. var i = 10;//局部变量
  12. x = 10;//全局变量(但是要等x所在的demo函数调用之后才可以使用)
  13. }
  14. demo();
  15. alert(x);
  16. </script>
  17. </body>
  18. </html>

  

2、事件

2.1、什么是事件?

  事件是可以被JavaScript侦测到的行为

2.2、主要事件

事件 描述
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body onload="mgs()">
  8. <div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)">this</div>
  9. <script>
  10. function onOver(ooj){
  11. ooj.innerHTML = "hello";
  12. }
  13. function onOut(ooj){
  14. ooj.innerHTML = "world";
  15. }
  16. </script>
  17.  
  18. <form>
  19. <input type="text" onchange="alert('内容改变了');">
  20. <input type="text" onselect="changeDemo(this)">
  21. </form>
  22. <script>
  23. function changeDemo(bg){
  24. bg.style.background = "blue";
  25. }
  26. function mgs(){
  27. alert("网页内容加载完毕");
  28. }
  29. </script>
  30. </body>
  31. </html>

异常处理

1、异常:

  当JavaScript引擎执行JavaScript代码时,发生了错误,导致程序停止运行

2、异常抛出

  当异常产生,并且将这个异常生成一个错误信息

3、异常捕获

  try{

    //发生异常的代码块;

  }catch(err){

    错误信息处理;

  }

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script>
  9. function demo(){
  10. try{
  11. alert(str);//正确错误都要执行。
  12. }catch(err){
  13. alert(err);
  14. }
  15. }
  16. demo();
  17. </script>
  18. </body>
  19. </html>

4、Throw语句

  通过throw语句创建一个自定义错误

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <form>
  9. <input type="text" id="txt">
  10. <input type="button" id="button" onclick="demo()" value="按钮">
  11. </form>
  12. <script>
  13. function demo(){
  14. try{
  15. var e = document.getElementById("txt").value;
  16. if(e == ""){
  17. throw "用户输入异常 == null";
  18. }
  19. }catch(err){
  20. alert(err);
  21. }
  22. }
  23. </script>
  24. </body>
  25. </html>

web前端学习(四)JavaScript学习笔记部分(3)-- JavaScript函数+异常处理+事件处理的更多相关文章

  1. web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)

    函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...

  2. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  3. 想做web前端project师应该学习些什么?

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  4. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  5. web前端开发控件学习笔记之jqgrid+ztree+echarts

    版权声明:本文为博主原创文章,转载请注明出处.   作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...

  6. 2022年Web前端开发流程和学习路线(详尽版)

    前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...

  7. 最适合2018年自学的web前端零基础系统学习视频+资料

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  8. web前端零基础入门学习!前端真不难!

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...

  9. 史上最全的web前端开发程序员学习清单!

    今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...

  10. WEB 前端模块化,读文笔记

    文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 req ...

随机推荐

  1. VS 断点不会命中的情况

    总结下遇到的几次断点无法命中的情况: 1.手误设置为release模式 如果是release模式的情况下,断点跳转命中情况是无法预知的,所以请修改成debug 2.与源文件不一致 这个情况是最常见的, ...

  2. hdu 1754 I Hate It (线段树)

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 线段树的模板题,详细的都写在代码里了 //不知道为什么定义单个字符,用%c输入会超时,换成字符数 ...

  3. 前端面试题(js部分)

    一.==和===的区别 1.==   用于比较.判断两者相等,比较时可自动换数据类型 2.===  用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时 ...

  4. mysql TIMESTAMP 不能为NULL

    一般建表时候,创建时间用datetime,更新时间用timestamp.这是非常重要的. 我测试了一下,如果你的表中有两个timestamp字段,只要你更新任何非timestamp字段的值,则第一个t ...

  5. C语言开发系列-二进制

    n位二进制的取值范围 -2的n-1次方 ~ 2的n-1次方-1 输出一个整数的二进制的存储形式 #include <stdio.h> // 输出一个整数的二进制的存储形式 void put ...

  6. spring boot 项目添加maven依赖时provided

    spring boot 项目是自带tomcat 的,但是我们有时候是需要把项目打包成war 然后放到独立的tomcat中运行的,这个时候我们就需要将它自带的tomcat给排除开,这时候我们就可以使用& ...

  7. 廖雪峰Java10加密与安全-4加密算法-4密钥交换算法

    1DH算法 1.1.原根公式:g^i mod P 条件:1<g<P,0<i<P 原根:介于[1, p-1]之间的任意2个数i,j(p为素数,i≠j)的结果不相等,即 g^i m ...

  8. java虚拟机(十一)--GC日志分析

    GC相关:java虚拟机(六)--垃圾收集器和内存分配策略 java虚拟机(五)--垃圾回收机制GC 打印日志相关参数: -XX:+PrintGCDetails -XX:PrintGCTimestam ...

  9. 阿里云 Aliplayer高级功能介绍(七):多分辨率

    基本介绍 网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: Source模式 source的方式指定多个清晰度的地 ...

  10. std::unique_lock与std::lock_guard区别示例

    std::lock_guard std::lock_guard<std::mutex> lk(frame_mutex); std::unique_lock<std::mutex> ...