Javascript 类型转换、封闭函数及常见内置对象操作示例


Posted in Javascript onNovember 15, 2019

本文实例讲述了Javascript 类型转换、封闭函数及常见内置对象。分享给大家供大家参考,具体如下:

Javascript组成

1、ECMAscript javascript的语法(变量、函数、循环语句等语法)
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法

类型转换

1、直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127
alert( parseInt('12') + 7 ); //弹出19 
alert( parseInt(5.6)); // 弹出5
alert('5.6'+2.3); // 弹出5.62.3
alert(parseFloat('5.6')+2.3); // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

if('3'==3)
{
  alert('相等');
}
// 弹出'相等'
alert('10'-3); // 弹出7

3、NaN 和 isNaN

alert( parseInt('123abc') ); // 弹出123
alert( parseInt('abc123') ); // 弹出NaN

调试程序的方法

1、alert

2、console.log

3、document.title

变量作用域

变量作用域指的是变量的作用范围,javascript中的变量分为全局变量和局部变量。

1、全局变量:在函数之外定义的变量,为整个页面公用,函数内部外部都可以访问。
2、局部变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问。

<script type="text/javascript">
  //全局变量
  var a = 12;
  function myalert()
  {
    //局部变量
    var b = 23;
    alert(a);
    alert(b);
  }
  myalert(); //弹出12和23
  alert(a); //弹出12  
  alert(b); //出错
</script>

封闭函数

封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数。

一般定义的函数和执行函数:

function myalert(){
  alert('hello!');
};
myalert();

封闭函数:

(function myalert(){
  alert('hello!');
})();

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function myalert(){
  alert('hello!');
}()

封闭函数的好处

封闭函数可以创造一个独立的空间,在封闭函数内定义的变量和函数不会影响外部同名的函数和变量,可以避免命名冲突,在页面上引入多个js文件时,用这种方式添加js文件比较安全,比如:

var iNum01 = 12;
function myalert(){
  alert('hello!');
}
(function(){
  var iNum01 = 24;
  function myalert(){
    alert('hello!world');
  }
  alert(iNum01);
  myalert()
})()
alert(iNum01);
myalert();

常用内置对象

1、document

document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)

2、location

window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

3、Math、

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
javascript 中的继承实例详解
May 05 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
JavaScript定时器常见用法实例分析
Nov 15 #Javascript
解决Layui 表格自适应高度的问题
Nov 15 #Javascript
layui前端时间戳转化实例
Nov 15 #Javascript
JavaScript变量基本使用方法实例分析
Nov 15 #Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 #Javascript
layui数据表格重载实现往后台传参
Nov 15 #Javascript
JS实现贪吃蛇游戏
Nov 15 #Javascript
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
Python简明入门教程
2015/08/04 Python
python编写分类决策树的代码
2017/12/21 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python 如何对logging日志封装
2020/12/02 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
中学生获奖感言
2014/02/04 职场文书
学校联谊活动方案
2014/02/15 职场文书
父母寄语大全
2014/04/12 职场文书
感恩教育活动总结
2014/05/05 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
redis三种高可用方式部署的实现
2021/05/11 Redis