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 相关文章推荐
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
详解node.js 事件循环
Jul 22 Javascript
js实现弹窗效果
Aug 09 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
生成sessionid和随机密码的例子
2006/10/09 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
2016年教师节感恩寄语
2015/12/04 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python