javascript 面向对象 经典例子

<html>

<head>

<title>YouCube - The Blog for Cube Puzzlers</title>

<script type="text/javascript">

      // Custom Date function to display a date in MM/DD/YYYY format

      Date.prototype.shortFormat = function() {

        return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();

      }



      // 构造函数

      // Blog object constructor

      function Blog(body, date, image) {

        // Assign the properties

        // 实例特性

        this.body = body;

        this.date = date;

        this.image = image;

      }



      // 实例方法

      // Return a string representation of the blog entry

      Blog.prototype.toString = function() {

        return "[" + this.date.shortFormat() + "] " + this.body;

      };



      // Return a formatted HTML representation of the blog entry

      Blog.prototype.toHTML = function(highlight) {

        // Use a gray background as a highlight, if specified

        var blogHTML = "";

        blogHTML += highlight ? "<p style='background-color:#EEEEEE'>" : "<p>";



        // Generate the formatted blog HTML code

        if (this.image) {

          blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br /><table><tr><td><img src='" +

            this.image + "'/></td><td style='vertical-align:top'>" + this.body + "</td></tr></table><em>" +

            this.signature + "</em></p>";

        }

        else {

          blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br />" + this.body +

            "<br /><em>" + this.signature + "</em></p>";

        }

        return blogHTML;

      };



      // See if the blog body contains a string of text

      Blog.prototype.containsText = function(text) {

        return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);

      };



      // Set the blog-wide signature

      //类特性

      Blog.prototype.signature = "by Puzzler Ruby";



      // Sort helper to sort blog entries in reverse chronological order (most recent first)

      //类方法

      Blog.blogSorter = function(blog1, blog2) {

        return blog2.date - blog1.date;

      };



      // Global array of blog entries

      var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),

                   new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one.", new Date("08/19/2008")),

                   new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", new Date("08/16/2008")),

                   new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", new Date("08/21/2008")),

                   new Blog("Met up with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed feelings.", new Date("08/29/2008")),

                   new Blog("Went ahead and ordered the scary 7x7x7 cube. Starting a mental exercise regimen to prepare.", new Date("09/01/2008")),

                   new Blog("Attended a rally outside of a local toy store that stopped carrying cube puzzles. Power to the puzzlers!", new Date("09/03/2008")),

                   new Blog("Got the new 7x7x7 cube. Could be my last blog post for a while...", new Date("09/05/2008")),

                   new Blog("Wow, it took me a couple of weeks but the new cube is finally solved!", new Date("09/19/2008"), "cube777.png") ];



      // Show the list of blog entries

      function showBlog(numEntries) {

        // First sort the blog

        blog.sort(Blog.blogSorter);



        // Adjust the number of entries to show the full blog, if necessary

        if (!numEntries)

          numEntries = blog.length;



        // Show the blog entries

        var i = 0, blogListHTML = "";

        while (i < blog.length && i < numEntries) {

          blogListHTML += blog[i].toHTML(i % 2 == 0);

          i++;

        }



        // Set the blog HTML code on the page

        document.getElementById("blog").innerHTML = blogListHTML;

      }



      // Search the list of blog entries for a piece of text

      function searchBlog() {

        var searchText = document.getElementById("searchtext").value;

        for (var i = 0; i < blog.length; i++) {

          // See if the blog entry contains the search text

          if (blog[i].containsText(searchText)) {

            alert(blog[i]);

            break;

          }

        }



        // If the search text wasn't found, display a message

        if (i == blog.length)

          alert("Sorry, there are no blog entries containing the search text.");

      }



      // Display a randomly chosen blog entry

      function randomBlog() {

        // Pick a random number between 0 and blog.length - 1

        var i = Math.floor(Math.random() * blog.length);

        alert(blog[i]);

      }

    </script>

</head>



<body onLoad="showBlog(5);">

<h3>YouCube - The Blog for Cube Puzzlers</h3>

<img src="cube.png" alt="YouCube" />

<input type="button" id="search" value="Search the Blog" onClick="searchBlog();" />

<input type="text" id="searchtext" name="searchtext" value="" />

<div id="blog">

</div>

<input type="button" id="showall" value="Show All Blog Entries" onClick="showBlog();" />

<input type="button" id="viewrandom" value="View a Random Blog Entry" onClick="randomBlog();" />

</body>

</html>

 

你可能感兴趣的:(JavaScript)