javascript基础05

1、变量的作用域

变量既可以是全局，也可以是局部的。

全局变量：可以在脚本中的任何位置被引用，一旦你在某个脚本里声明了全局变量，你就可以

在这个脚本的任何位置（包括函数内部）引用它，全局变量的作用域是整个脚本;

局部变量：只存在于对它做出声明的函数内部，在函数的外部无法相用它，局部变量的作用域

仅限于函数内部;

function square(num){

        var total;

        total = num * num;

        return total;

    }

    var total = 50;

    alert(total);

    var number = square(20);

    alert(total);

2、JavaScript 内部函数

在javascript中有一些功能是很常用的，它们以全局函数的形式提供给用户，这些函数称为内

部函数。

parseInt 和 parseFloat 将字符串转换为数字

3、escape 和 unescape  进行URL编码和解码 

var url = “http://www.baidu.com/s?name=小米”;

    url = escape(url);

    alert(url);

    alert(unescape(url));

4、对象

avascript是一种面向对象的语言，因此可以使用面向对象的思想来进行

javascript程序设计

对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体。

本地对象

1.Date 日期对象用来处理日期和时间。

var myDate = new Date();

myDate.getFullYear();    //获取完整的年份(4位,1970-????)

myDate.getMonth();       //获取当前月份(0-11,0代表1月)

myDate.getDate();        //获取当前日(1-31)

myDate.getDay();         //获取当前星期X(0-6,0代表星期天)

myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours();       //获取当前小时数(0-23)

myDate.getMinutes();     //获取当前分钟数(0-59)

myDate.getSeconds();     //获取当前秒数(0-59)

myDate.getMilliseconds();    //获取当前毫秒数(0-999)

myDate.toLocaleDateString();     //获取当前日期

var mytime=myDate.toLocaleTimeString();     //获取当前时间

myDate.toLocaleString();        //获取日期与时间    
2.Math 对象

Math 对象用来处理复杂的数学运算。

Math对象是javascript的一个全局对象，不需要用new 创建

Math.abs(-2);           该方法可返回一个数的绝对值。

Math.round(5.5);      该方法可把一个数字舍入为最接近的整数。

Math.random();      该方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。

Math.ceil(1.4);         ceil()   方法返回大于等于x的最小整数。（取大整）

Math.floor(1.6);       floor() 方法返回小于等于x的最大整数。（取小整）

Math.pow(4,3);        pow() 方法返回 x 的 y 次幂。  （4的3次方）

作业题：

最简单的表格和时间封装，写出复杂的面向对象，我也是闲的无聊啊。

你是猪吗？这么简单的封装函数，写出这个什么鬼。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格输出</title>

    <script>

        window.onload=function(){

            var tb=new Table("body",5,5,{bg:"#000"});

            var tb1=new Table("body",5,5,{bg:"#eee"});

            var tb2=new Table("body",5,5,{bg:"#0ff"});

            var tb3=new Table("body",5,5,{bg:"#f0f",circle:true});

        }

        function Table(obj,r,c,json){

            this.str='';

            this.obj=document.querySelector(obj);

            this.init(json);

            this.create(c,r);

        }

        Table.prototype.init=function(json){

            this.setting={

                border:"1px solid #000",

                bg:"#fff",

                w:40,

                h:30,

                circle:false,

            };

            extend(json,this.setting);

        }

        Table.prototype.create=function(c,r){

            var createE=document.createElement("div");

            this.str='<table>';

            for(var i=0;i<r;i++){

                this.str+="<tr>";

                for(var j=0;j<c;j++){

                    if(this.setting.circle){

                        this.str+='<td style="width:'+this.setting.w+'px;height:'+this.setting.h+'px;border:'+this.setting.border+';background:'+this.setting.bg+';border-radius:50%;"></td>';

                    }else{

                        this.str+='<td style="width:'+this.setting.w+'px;height:'+this.setting.h+'px;border:'+this.setting.border+';background:'+this.setting.bg+';"></td>';

                    }

                }

                this.str+="</tr>";

            }

            this.str+='</table>';

            createE.innerHTML=this.str;

            this.obj.appendChild(createE);

        }

        function extend(obj,obj1){

            for(var attr in obj){

                obj1[attr]=obj[attr];

            }

        }

    </script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>时间</title>

    <script>

        window.onload=function(){

            var b=new Time("body",{y:"/",m:"/",d1:"",color:"#0f0",size:20});

            var b1=new Time("body",{y:"-",m:"-",d1:"",color:"#ff0",size:26});

            var b2=new Time("body",{y:"|",m:"|",d1:"<br/>",color:"#f00",size:15});

        }

        function Time(obj,json){

            this.obj=document.querySelector(obj);

            this.CE=document.createElement("div");

            this.obj.appendChild(this.CE);

            var This=this;

            this.init(json);

            this.d();

            setInterval(function(){

                This.d();

            },1000);

        }

        Time.prototype.init=function(json){

            this.setting={

                y:"年",

                m:"月",

                d1:"日",

                d:":",

                color:"#000",

                size:16,

            }

            extend(json,this.setting);

        }

        Time.prototype.d=function(){

            var date=new Date(),

            y1=date.getFullYear(),

            m1=date.getMonth()+1,

            d1=date.getDate(),

            h=date.getHours(),

            i=date.getMinutes(),

            s=date.getSeconds(),

            w=date.getDay();

            str='';

            arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

            str=y1+this.setting.y+m1+this.setting.m+d1+this.setting.d1+" "+num(h)+this.setting.d+num(i)+this.setting.d+num(s)+" "+arr[w];

            this.CE.innerHTML=str;

            this.CE.style.cssText="font-size:"+this.setting.size+"px;color:"+this.setting.color+";";

        }

        function num(a){

            return a<10?"0"+a:""+a;

        }

        function extend(obj,obj1){

            for(var attr in obj){

                obj1[attr]=obj[attr];

            }

        }

    </script>

</head>

<body>

</body>

</html>

javascript基础05的更多相关文章

  1. JavaScript基础05——严格模式

    严格模式: 除了正常运行模式,ECMAscript5添加了第二种运行模式:“严格模式”(strict mode).顾名思义,这种模式是的Javascript在更严格的条件下运行. 严格模式的作用: 1 ...

  2. JavaScript基础入门05

    目录 JavaScript 基础入门05 严格模式 严格模式的设计目的 如何开启使用严格模式 显式报错 字符串 字符串的创建 字符串实例方法之常用API JavaScript 基础入门05 严格模式 ...

  3. JavaScript基础第05天笔记

    JavaScript基础第05天笔记 1 - 作用域 1.1 作用域概述 通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域.作用域的使用提 ...

  4. javaScript基础之闭包

    不管是Jquery还是EXTJS,现代的js框架中大量应用了js的一些特性,比如:匿名函数,闭包等等,导致源代码非常难以阅读. 不过要想真正的使用好前台的UI技术,还是需要去深入的理解这些概念.   ...

  5. JavaScript基础视频教程总结（031-040章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  7. JavaScript基础语法资料

    JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...

  8. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  9. 一步步学习javascript基础篇（0）:开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

随机推荐

  1. jdbc java数据库连接 2）jdbc接口核心的API

    JDBC接口核心的API java.sql.*   和  javax.sql.*(java2.0以后更新的扩展) |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接 ...

  2. 简单的angular购物车商品小计

    <!DOCTYPE html> <html lang="en" ng-app="shopApp"> <head> <m ...

  3. Linux下快速迁移海量文件的操作记录

    有这么一种迁移海量文件的运维场景:由于现有网站服务器配置不够,需要做网站迁移(就是迁移到另一台高配置服务器上跑着),站点目录下有海量的小文件,大概100G左右,图片文件居多.目测直接拷贝过去的话,要好 ...

  4. php结合redis实现高并发下的抢购、秒杀功能

    抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个:1 高并发对数据库产生的压力2 竞争状态下如何解决库存的正确减少("超卖"问题)对于第一个问题,已经很容易想到用缓存 ...

  5. Linux 进程间通讯详解一

    进程间的通讯 两台主机间的进程通讯 --socket 一台主机间的进程通讯 --管道(匿名管道,有名管道) --System V进程间通信(IPC)包括System V消息队列,System V信号量 ...

  6. ReactNative新手学习之路07ListView_ renderHeader使用StaticContainer

    react native新手学习之路07ListView_ renderHeader使用StaticContainer 1.某些特殊场景需要用ScrollView滚动和ListView配合但是不幸运的 ...

  7. C++11笔记<一>

    目录: 1.std::share_ptr智能指针: 2.std::tr1::function模板类: 3.stringstream: 4.set/vector/map: 5.static_cast&l ...

  8. nginx、php-fpm二三问

    php-cgi为什么没了? php-fpm子进程是干啥的?php-cgi是原来php自带的fastcgi进程管理器,有一些缺点,比如不能平滑重启,进程管理差.php-fpm可以看做升级版的php-fp ...

  9. CloudSim介绍和使用

    本文主要介绍一下我在使用CloudSim时翻译.整理和理解的一些信息,以及我的使用经验,希望能对有需要的朋友们有所帮助~1.我翻译和理解的一些信息:    2009年4月8日,澳大利亚墨尔本大学的网格 ...

  10. Spring MVC 处理静态资源不能访问问题

    在web.xml文件中加入如下代码: <servlet-mapping> <servlet-name>default</servlet-name> <url- ...