1 / 82

Week#1 Day#1 Java Script Course

Week#1 Day#1 Java Script Course. We are doing it for fun. No Quizzes. No Assignments. No Exams. No Fears At All. What we are going to cover:. Course Blog. We have established a blog for the course. http:// www.jsclass.wordpress.com

arva
Download Presentation

Week#1 Day#1 Java Script Course

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Week#1Day#1 Java Script Course

  2. We are doing it for fun. No Quizzes. No Assignments. No Exams No Fears At All.

  3. What we are going to cover:

  4. Course Blog. • We have established a blog for the course. • http://www.jsclass.wordpress.com • Things like Slides, Suggestions and Contributions would be posted on the blog. • Check the course blog regularly for updates. • If you do a nice project, just Email us and we will post it on the Blog.

  5. How do we Present the Course: • We Assume you are familiar with HTML and CSS. • We will pick a concept, explain it and start giving Demos. • When writing the code, we just go over the big picture. • How much you will get from this course, depends on how much practice you do at Home.

  6. Web Designing.Static websites VS Dynamic websites. • Static website: just writing down HTML code and displaying it to the User. • Dynamic website: involves interacting with user input and changing content dynamically, but needs real programming. • So HTML and CSS are not programming languages because you can not implement Logic, conditions and looping with them. • Instead they are called Markup language. • Dynamic HTML is HTML and CSS plus Java Script.

  7. Web Designing.AJAX • AJAX: A synchronous JavaScript And XML. • It really makes creating much more interesting user interfaces easier. • If user clicks at a link, the whole page is not reloaded as usual. • So, it is all about Bandwidth and user satisfaction. • Projects like Google Map would have never succeeded with out Java Script and AJAX. • let us watch this video.

  8. Things that happen in between. • Client • requests some type of service (such as a file or database access) from the server. • Server • fulfills the request and transmits the results to the client over a network

  9. Things that happen in between. • But we need protocols , Addresses and devices between servers and clients. • Protocols • Rules that describe the methods used for clients and servers to communicate with each other over a network. • TCP/IP, HTTP, FTP, etc. HTTP Request HTTP Response

  10. IP Addresses. • Each device connected to the Internet has a unique numeric IP address. • These addresses consist of a set of four groups of numbers, called octets. (X.Y.Z.W) 74.125.95.104 will get you Google! • An IP address may correspond to a domain name. • Can be either 32-bit or 128-bit

  11. Devices.

  12. Domain Name System • The Domain Name System (DNS) associates Domain Names with IP addresses. Domain Name DNS IP Address Web Browser requests web page Web Server Use TPC/IP to send HTTP Request Use TCP/IP to send HTTP Responseswith web page files & images Web Browserdisplays web page 12

  13. Buying a Domain Name:

  14. Hosting Your Site. • When you buy the domain name, you need to tell the world where it is going to live. • So Hosting issues comes here. • Tell your domain company the DNS for your site.

  15. Let us recap HTML and CSS staff.

  16. Lists: • HTML is a TAG language. • <html>… </html>. • Lists: • Ordered Lists. <OL> • Un ordered Lists. <UL>. • List Item <LI>. • You can change the type of the list: • OL: type=“A, a, l, and I” . • UL: type=“Square, Disc and Circle”. • Let us try some code….

  17. Hyperlinks. • Used for navigating between sites. • Syntax: • <a href=“distination URL”>text to appear on the link </a> • We can also decide the target of the link. • Associated attributes include: • Link. • Vlink. • Alink.

  18. Images. • Syntax: • <imgsrc=“pathname.extension”/>. • Associated attributes: • Alt. • Width. • Height. • Align. • Border.

  19. Tables. • Tables are commonly used on web pages in two ways: • To organize information • To format the layout of an entire Web page • Configured with <table>,<tr>,<th>, and<td> elements • Table attributes include: 1. Align 2.bgcolor3. border 4.cellpadding5.cellspacing6.Bordercolor. 7. width . • Also remember :Colspanand rowspan.

  20. FORM. • The<form arguments> ... </form> tag encloses form elements (and probably other elements as well) • The arguments to form tell what to do with the user input • action="url" (required) • Specifies where to send the data when theSubmitbutton is clicked • method="get" (default) • Form data is sent as a URL with?form_datainfo appended to the end • Can be used only if data is all ASCII and not more than 100 characters • method="post" • Form data is sent in the body of the URL request • Cannot be bookmarked by most browsers • target="target" • Tells where to open the page sent as a result of the request • target= _blankmeans open in a new window • target= _top means use the same window

  21. Input. • Most, but not all, form elements use the input tag, with a type="..."argument to tell which kind of element it is • type can be text,checkbox,radio,password,hidden,submit,reset,button,file,or image • Other common input tag arguments include: • name: the name of the element • id: a unique identifier for the element • value: the “value” of the element; used in different ways for different values of type • readonly: the value cannot be changed • disabled: the user can’t do anything with this element • Other arguments are defined for the input tag but have meaning only for certain values of type • Maxlength and size.

  22. A submit button: <input type="submit" name="Submit" value="Submit" /> A reset button: <input type="reset" name="Submit2" value="Reset" /> A plain button: <input type="button" name="Submit3" value="Push Me" /> submit: send data reset: restore all form elements to their initial state button: take some action as specified by JavaScript Buttons. • Note that the type is input, not “button”

  23. A menu or list:<select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option></select> Additional arguments: size: the number of items visible in the list (default is"1") multiple if set to "true" (or just about anything else), any number of items may be selected if omitted, only one item may be selected if set to "false", behavior depends on the particular browser Drop-down menu or list

  24. The Fieldset & Legend Elements • The Fieldset Element <fieldset> • Container tag • Creates a visual group of form controls on a web page • The Legend Element <legend> • Container tag • Creates a text label within the fieldset <fieldset><legend>Customer Information</legend> <label>Name: <input type="text" name="CName" id="CName" size="30"></label> <br><br > <label>Email: <input type="text" name="CEmail" id="CEmail"></label> </fieldset>

  25. CASCADING STYLE SHEETS [CSS]

  26. INTRODUCTION • “Cascading Style Sheets” (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.” • The purpose is to separate content from style, leaving HTML to deal with the former while CSS takes over the latter. • With the birth of CSS, any HTML markup that deals purely with how things should look is deprecated (no longer approved of). • Instead, CSS should be used.

  27. A rule consists of a selector that specifies the element to which to apply a style and a declaration that declares which style to apply. • A declaration consists of a property and a value.

  28. To assign a single declaration to a series of selectors, simply enter the selectors as a comma-separated list, as shown here:h1, h2, h3 { font-family: Arial, Helvetica, sans-serif } • To set selectors so that they only affect a tag when it appears under specific circumstances, separate a number of selectors with a space.For example: h1 b { color: red } • This type of style definition (called a descendant style) tells the browser only to apply this style to bold text used with level-1 headings.

  29. Using Style Sheets • There are three ways of using CSS: • External style sheet • Embedded style sheet • Inline styles

  30. Inline Style sheets • <p style=“font-family: Arial; font-size:12px; color: #000000”> • This is called “inline style”

  31. Creating an Embedded Style Sheet • By embedding a style sheet we mean placing CSS code within the HTML document itself. • The code is written within a style element (defined by opening and closing <style> tags) located in the head section of the document (defined by opening and closing <head> tags). • Embedded style sheets affect only the specific HTML document in which the CSS code resides.

  32. In the head section of an HTML document, enter an opening <style> tag. • Define a type attribute for the <style> tag and set it equal to text/css. • Insert a line or two and begin entering selectors and declarations • To close the embedded style sheet, enter a closing </style> tag.

  33. An Embedded Stylesheet

  34. Creating an External Style Sheet • External style sheets are separate documents containing nothing but style rules. • You attach these style sheets to HTML documents using a link reference, effectively allowing you to attach a single style sheet document to as many Web pages as you like. • This way you only need to change one style sheet document to update the formatting of elements across every page to which the style sheet document is attached.

  35. An External Style sheet • Open a new blank document in your editor and enter the styles you wish to define, as shown:

  36. Save the file with a .css extension • Open the HTML documents to which you want to attach the style sheet. • Within the head section of each document, insert a <link> tag with a rel attribute set equal to stylesheet, and a type attribute set equal to text/css. • The rel attribute stands for “relationship.” • The text/css value of the type attribute indicates that the code is text-based and written in CSS.

  37. Defining Style Classes • Before understanding CSS you must understand the HTML id attribute and class attribute. • Every HTML element can have an id and class attribute. • The id attribute assigns an element a unique name, while a class assigns the element a class name.

  38. When you create a style class, you specify your own unique selector name and attach a style declaration to it. • You can apply your classes to any tag by using the class attribute. • For example: .citation { font-size: 12px;font-style: italic } • Apply the class to your chosen HTML tag by adding a class attribute and setting it equal to the class name (without the period): • <div class=”citation”>

  39. Using ID • Example:#header { font-size: 20px;font-style: italic } • Apply the ID to your chosen HTML tag by adding an id attribute and setting it equal to the id name (without the # symbol): • <div id=”header”>

  40. Block-Level and Inline-Level elements • The div element is a block-level element that defines logical sections in an HTML document. CSS enables these logical sections to be formatted independently. • The span element is an in-line-level element and groups in-line content. It allows you to specify CSS formatting for arbitrary text and other in-line elements. You can wrap any in-line content in a span and then apply CSS formatting to it.

  41. Note: • Define your classes in embedded or external style sheets. Because style classes require a selector, it isn’t possible to create an inline style class.

  42. Working with Background Images • In HTML background images are limited to the document body and the various parts of the table element. In CSS you can make use of background images in virtually all elements. • body { background-image: url(images/bg.gif) }

  43. background-repeat: • repeat tiles the image horizontally and vertically (the default browser behavior) • no-repeat prevents the image from tiling at all, displaying only a single instance of the image • repeat-x tiles the image horizontally only • repeat-y tiles the image vertically only

  44. background-attachment: fixed; • background-position: • Define a value for the background-position property using the following value types:Keyword values: top | center | bottom and left | center | right

  45. Defining Border Style Properties • border-top-style • border-right-style • border-bottom-style • border-left-style • Define a value for your border style properties using any of the following keyword values: • None • dotted • dashed • solid • double• groove • ridge • inset • outset

  46. Defining Border Width Properties • border-top-width • border-bottom-width • border-left-width • border-right-width • These properties accept keyword values: • thin, medium, thick • As well as any positive length value. • A value of zero collapses the border area completely. • Negative values are not permitted.

  47. Defining Border Color Properties • border-top-color • border-bottom-color • border-right-color • border-left-color

  48. Using the Border Property Shorthand • To specify the style, width, and color for the single side of an element, include a border-top, border-right, border-bottom, or border-left property in your declaration. • Define the width, style, and then color (separated by spaces) as a single value. For example: • div { border-top: thin dashed #FF0000 }

  49. To specify the style, width, and color for all sides of an element’s border, include a border property in your declaration. • Define the width, style, and then color (separated by spaces) as a single value • For example: • div { border: thin dashed #FF0000 }

More Related