• 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库
没有结果
查看所有结果
  • 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库
没有结果
查看所有结果
没有结果
查看所有结果

JS初级(四)事件、 传值与引用、 函数类型、 匿名函数、 转义字符

Mr.Lee 由 Mr.Lee
2018年5月19日
在 Javascript, 前端技术
0
JS初级(五)BOM、 DOM、 定时器、 对象、 时钟周期
0
分享
0
浏览

回顾

  1. for

for(初始值;条件;增量){

//循环体

}

  1. while

while(条件){

//循环体

}

  1. do-while

do{

//循环体

}while(条件)

  1. for-in

for(var 变量 in 数组){

//循环体

}

  1. 注意:切记不能出现死循环
  2. 跳转语句

    1. Break:中断循环
    2. Continue:跳出当前循环,进入下一个循环

函数

  1. 函数就是代码块,可以多次调用,很容易实现模块化编程。
  2. 函数也叫方法(其实函数和方法有一点点的区别,在面向对象中去讲解,目前我们认为他们是一样的)。
  3. 函数分为预定义函数和自定义函数
  4. 自定义函数的语法

function 函数名([参数…]){

//函数体

}

  1. 参数分为形式参数(形参)和实际参数(实参)。形参只起一个形式的作用,没有具体的值,只是告诉调用者调用的时候传递几个参数,在定义函数的时候使用。实际参数是传递给函数的具体的值,在调用函数的时候使用。

  1. 通过函数名来调用函数

函数的预加载

函数有预编译(预加载)的过程,可以实现调用在前,声明再后。在编译的时候先把函数编译好放在内存中,在执行JS的时候函数其实已经编译好了,所以直接调用就可以了。

多学一招:不只是函数可以预加载,只要先声明的都可以预加载。

提醒一下:在有的资料上也说变量不能预加载,原因是只是声明了空间,并没有将值加载进入。有的资料上称为“预编译”。

思考:形参和实参个数不一样会怎么样?

总结:

  1. 少传递的参数是undefined
  2. 多传递的参数函数中接受不到。

函数的调用

函数是通过函数名来调用的

一般函数的调用要结合“事件”来调用

调用的方式:

方法一(通过HTML标签调用):<标签 事件=”函数名()”/>

方法二(JS调用):对象.事件=函数

方法一:

方法二:

事件

事件和事件处理

事件:以“on”开头的都是事件,每个事件后面都有“事件处理”,事件处理一般是由函数来担当。

<标签 事件=’事件处理[函数]’>

常用的事件

  1. onclick:当鼠标点击的时候
  2. onfocus:当获得焦点的时候
  3. onblur:当失去焦点的时候
  4. onchange:发生改变的时候
  5. onkeydown:当键盘按键按下去的时候
  6. onkeyup:当键盘的键抬起的时候
  7. onmouseover:当鼠标滑过的时候
  8. onload:当加载的时候

例题

  1. 字符串.substr(start [, length ])
  2. 字符串.substring(start, end)

代码如下

<script type=”text/javascript”>

function fun_focus(){ //得到焦点

if(frm.card.value==’请注意格式:10XXXXXX’)

frm.card.value=”;

}

function fun_blur(){ //失去焦点

if(frm.card.value==”)

frm.card.value=’请注意格式:10XXXXXX’;

else{ //判断输入值的格式是否正确

var card=frm.card.value;

if(card.length!=8){ //卡号不是8位

alert(‘卡号是8位的,你输入的是’+card.length+’位’);

}else{

if(card.substr(0,2)!=’10’){

alert(‘卡号必须是”10″开头’);

}else{

alert(‘卡号正确’);

}

}

}

}

</script>

<form name=’frm’ action=””>

卡号:<input type=”text” name=”card” value=’请注意格式:10XXXXXX’ onfocus=’fun_focus()’ onblur=’fun_blur()’>

</form>

匿名函数

没有名字的函数,

语法

function(){

//匿名函数

}

例题

匿名函数自调用

匿名函数的使用

return

作用:

  1. 作用一:终止函数的执行

  1. 作用二:返回数据

脚下留心:如果要返回多个数据,将多个数据放到数组中返回,不能写多个return;

应该这样写:

使用类型函数进行类型的获取或转换

在计算机内部,所有的数据都可以转成布尔值。转换规律:

1、数字和布尔值转换规律: 0为false,非0为true

2、字符串和布尔值转换规律:空字符串为false,非空字符串为true

我们也可以通过类型函数显式转换

String():转成字符串

Boolean():转成布尔型

Number():转成数字型

typeof 获取数据类型

值传递和引用传递

函数中参数的传递有两种方式,值传递,引用传递(传递地址)

分析如下代码执行过程(值传递)

第一步:将保存10的空间的地址付给x。(x保存的是10的地址)

第二步:将10复制一份,将10的副本的地址付给y

分析如下代码执行过程(地址传递)


总结:只要是基本数据类型都是值传递,复杂类型都是地址传递。

传递不确定参数

通过arguments关键字保存传递的参数数组

变量作用域

变量按照作用的范围不一样分为

  1. 全局变量:在整个页面使用的变量
  2. 局部变量:在函数内部使用的变量

思考:隐式声明局部变量

总结:在函数中,通过var声明的变量是局部变量,不用var声明的变量在全局变量。

JS嵌入到网页的方法

方法一:内嵌引入,直接将函数体写到事件处理中


方法二:内部引入:在HTML页面的内部通过<script>开头,</script>结束

方法三:外部文件引入

第一步:创建JS文件,并在JS文件中写入代码

第二步:在HTML中引入外部的JS文件

具有特殊含义的字符

“”:字符串

‘’:字符串

JS换行 \n (new)

JS回车 \r (return)

制表位: \t

转义字符(\)

作用:将具有特殊含义的字符转成普通字符。

对象

能够了解对象的概念以及对象的分类

对象是属性(变量)和方法(函数)的组合。

调用对象的属性: 对象.属性

调用对象的方法: 对象.方法()

JavaScript三类对象

  1. HTML对象:就是HTML标签
  2. 脚本对象
  3. 浏览器对象

作业题

计算器

<script type=”text/javascript”>

function cal(op){

var num1=frm.num1.value;

var num2=frm.num2.value;

if(num1==” || isNaN(num1) || num2==” || isNaN(num2))

return; //不是数字就终止执行

num1=parseFloat(num1); //转换层数字类型

num2=parseFloat(num2);

switch(op){

case ‘+’:

frm.result.value=num1+num2;

break;

case ‘-‘:

frm.result.value=num1-num2;

break;

case ‘*’:

frm.result.value=num1*num2;

break;

case ‘/’:

frm.result.value=num1/num2;

break;

}

}

</script>

<form action=”” name=’frm’>

第一个数: <input type=”text” name=”num1″ id=””> <br>

第二个数:<input type=”text” name=”num2″ id=””> <br>

<input type=”button” value=” + ” onclick=”cal(‘+’)”>

<input type=”button” value=” – ” onclick=”cal(‘-‘)”>

<input type=”button” value=” * ” onclick=”cal(‘*’)”>

<input type=”button” value=” / ” onclick=”cal(‘/’)”> <br>

结果:<input type=”text” name=”result” id=””>

</form>

去字符串的空格

思路:声明一个变量用来保存结果字符串,遍历循环字符串,如果不是空格就保存到变量中。最后这个变量就是去掉空格的字符串。

标签: 事件传值与引用函数类型匿名函数转义字符
上一篇文章

JS初级(五)BOM、 DOM、 定时器、 对象、 时钟周期

下一篇文章

JS初级(三)do-while、 for、 for-in、 while、 三元运算符、 循环、 最值、 流程控制、 跳转语句、 遍历

下一篇文章
JS初级(五)BOM、 DOM、 定时器、 对象、 时钟周期

JS初级(三)do-while、 for、 for-in、 while、 三元运算符、 循环、 最值、 流程控制、 跳转语句、 遍历

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Search

没有结果
查看所有结果

About Me

个人随笔

Winston Lee

Programmer

Hello & welcome to my blog! My name is Winston Lee and am a programmer and am keen on sharing.

Winston Lee

About Me

Hello & welcome to my blog! My name is Winston Lee and am a programmer and am keen on sharing.

Categories

  • AJAX
  • BootStrap
  • CodeIgniter
  • CSS
  • DedeCMS
  • GIT
  • HTML
  • Javascript
  • Jquery
  • Laravel
  • Laravel在线教育平台
  • Linux
  • Memcache
  • MongoDB
  • MVC
  • Mysql
  • Nginx
  • Node
  • PDO
  • PHP
  • PHP7
  • PHP基本语法
  • PHP核心编程
  • Redis
  • Smarty
  • Socket
  • SVN
  • Swoole
  • TP3.2
  • TP3.2商城
  • TP5.0
  • TP5.0商城
  • XML
  • Yaf
  • Yii
  • Yii手机直播
  • 二次开发
  • 优化方案
  • 前端技术
  • 前端框架
  • 后台框架
  • 基本操作
  • 微信公众号
  • 数据库
  • 未分类
  • 混合APP
  • 源码Blog项目
  • 版本控制
  • 环境搭建
  • 移动端开发
  • 网站优化
  • 资料
  • 面向对象
  • 面向对象编程
  • 页面静态化

Tags

DOM Json RBAC 事件 传参 函数 分页 判断语句 匿名函数 变量 图片上传 存储过程 安装 对象 封装 属性 接口 控制器 数据库操作 数据类型 数据表 数组 文件上传 无刷新分页 权限 标签 模型 正则 流程控制 目录结构 算法 类 索引 继承 缩略图 表关系 视图 路由 运算符 选择器 递归 配置 错误处理 页面静态化 验证码
  • 首页
  • 前端
  • 前端框架
  • PHP
  • 数据库
  • 优化
  • 后台框架与实战
  • 移动开发
  • 二次开发
  • Linux
  • 版本控制
  • Node.js
  • 资料库

沪公网安备31011502400873 | 沪ICP备2024050435号-3

没有结果
查看所有结果
  • 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库

沪公网安备31011502400873 | 沪ICP备2024050435号-3