Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • HTML, CSS, Js The Big Picture

    Încărcat de

    samir
    188 vizualizări2 pagini
    A unified look at HTML, CSS and JS

    Titlu original

    HTML, Css, Js the Big Picture

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    A unified look at HTML, CSS and JS

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    188 vizualizări2 pagini

    HTML, CSS, Js The Big Picture

    Încărcat de

    samir
    A unified look at HTML, CSS and JS

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 2

    Html, JavaScript and CSS- the Big Picture

    For the last several years, the nature of software has changed from a write-everything-yourself to a write-
    the-glue kind of approach. Most of the time we write code nowadays, we are using a lot of third-party code
    to achieve our software ends. Examples are java libraries (or .net libraries) or even javascript libraries and
    html frameworks.

    What is quite forbidding to anyone approaching the subject for the first time is the plethora of systems and
    conventions and interfaces that face the newcomer. What is needed at such a time is to cut to the chase and
    get at the core issues. That's easier said than done. The reason is that there are multiple facets to any new
    technology and without seeing the whole picture, you can never really come to grips with the subject.
    Here is an attempt at giving a whole-picture view of the subject of Html, Javascript and CSS. To do this, I
    am taking the example of an Javascript calendar. So here goes.
    The way to approach this subject (or any new technology) is to try to create a big-picture view in your own
    mind. What is a Javascript calendar at the implementation level? To answer this, we need to consider the
    following facets of the calendar:

    1. What is the structure of the html that hosts the calendar?
    2. How is the calendar shown and hidden?
    3. How is the content of the calendar (the dates) painted?
    4. How does the calendar provide the date back to the html form?

    If we have an answer to each of these questions, we will have a big-picture view of the whole problem.

    1. What is the structure of the html that hosts the calendar?
    The html structure for the calendar will be a <table> having a <tbody> that represents the dates in the
    calendar. And a text input that will hold the result of a date selection from the calendar.

    This means that the html structure will be something like the following:
    <html>
    ...
    <body>
    ...
    <form>
    <!-- textbox showing date -->
    <input type="text" id="txtDateField" />
    </form>
    <table id="tblCalendar" >
    ...
    <tbody id="tbdDates" />
    </table>
    ...
    </body>
    </html>


    2. How is the calendar shown and hidden?
    The calendar will be shown and hidden using javascript. The javascript construct
    object.style.display
    can be assigned the value "none" to hide the object
    and it can be assigned the value "block" to display a block element.

    We use this mechanism in the javascript code:
    function hideCalendar()
    {
    var cal = document.getElementById("tblCalendar");
    cal.style.display = none;
    }

    3. How is the content of the calendar (the dates) painted?
    This is the more complex part of the implementation. The dates in the calendar need to be constructed in
    javascript because the contents of the table cells are dependent on the month and year selected.

    To create the contents of a table, we need to construct the elements of the dom and attach the structure to
    the tbody element. We need to create a row <TR> element. And within it, we need to construct data
    <TD>elements. And finally attach the row to the tbody element. All this can be achieved in javascript:
    ...
    tblDates = document.getElementById ( "tbdDates" );
    tr = document.createElement ( "TR" );
    for (...)
    {
    td = document.createElement ( "TD" );
    td.appendChild ( document.createTextNode(dt++) );
    tr.appendChild ( td );
    }
    tblDates.appendChild(tr);
    ...

    4. How does the calendar provide the date back to the html form?
    For each of the td elements, we need to add an onClick member that invokes a function. The parameters to
    the function are the year, month and date values. This part of the code is advanced javascript. It looks as
    follows:
    var str = d + "-" + month + "-" + year;
    td.onclick = new Function (
    "document.getElementById('txtDateField').value='" + str + "'" );

    This code constructs a function object for each td element in the dom. The function object is compiled
    when the button is clicked and executed. The code that gets executed is:
    document.getElementById('txtDateField').value='12-6-2012'
    which sets the contents of the form element representing the date.
    Conclusion
    I have not provided the complete code for the javascript calendar here. The reason is that the purpose of
    this article is to show the central facets of a html-javascript interaction. It tries to answer the question "how
    does one go about writing a javascript based web page?". And the answer is that you have to first frame the
    right questions and then answer each one of them. The answers should give you a big picture view of the
    problem and its solution. Once that is achieved, the implementation is almost trivial.

    In this case, start with the html above and put it in a cal.htm file. Add a <script> tag and add the javascript
    function to hide and show the calendar. In the table tag add another tbody with some static content. Use this
    as a starting point to implement the show / hide functionality. Once this is running, add the table contents
    with some static dates. Integrate the code to invoke the integration with the text date field. Proceed to add
    embellishments to select months and years. Add CSS styles to make the calendar look more slick. And your
    javascript calendar comes to life before your eyes.

    S-ar putea să vă placă și