week#1 day#1 java script course

Un ordered Lists.

.List Item

.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.

Hyperlinks.Used for navigating between sites.Syntax:text to appear on the link We can also decide the target of the link.Associated attributes include: Link.Vlink.Alink.Images.Syntax:.Associated attributes:Alt.Width.Height.Align.Border.

Tables.Tables are commonly used on web pages in two ways:

To organize information To format the layout of an entire Web pageConfigured with ,,, and elementsTable attributes include: 1. Align 2. bgcolor 3. border 4. cellpadding 5. cellspacing 6. Bordercolor. 7. width .Also remember :Colspan and rowspan.20FORM.The ... tag encloses form elements (and probably other elements as well)The arguments to form tell what to do with the user inputaction="url"(required)Specifies where to send the data when the Submit button is clickedmethod="get"(default)Form data is sent as a URL with ?form_data info appended to the endCan be used only if data is all ASCII and not more than 100 charactersmethod="post"Form data is sent in the body of the URL requestCannot be bookmarked by most browserstarget="target"Tells where to open the page sent as a result of the requesttarget= _blank means open in a new windowtarget= _top means use the same window2021Input.Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it istype can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image

Other common input tag arguments include:name: the name of the elementid: a unique identifier for the elementvalue: the value of the element; used in different ways for different values of type readonly: the value cannot be changeddisabled: the user cant do anything with this elementOther arguments are defined for the input tag but have meaning only for certain values of type Maxlength and size.2122Buttons. A submit button: A reset button: A plain button:

submit: send data

reset: restore all form elements to their initial statebutton: take some action as specified by JavaScript

Note that the type is input, not button2223Drop-down menu or listA menu or list:

red green blue

Additional arguments:size: the number of items visible in the list (default is "1")multipleif set to "true" (or just about anything else), any number of items may be selectedif omitted, only one item may be selectedif set to "false", behavior depends on the particular browser

23The Fieldset & Legend ElementsThe Fieldset Element

Container tagCreates a visual group of form controls on a web pageThe Legend Element

Container tagCreates a text label within the fieldset

24Customer Information Name:

Email:

24CASCADING STYLE SHEETS [CSS]INTRODUCTIONCascading 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. 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.

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.

29Using Style SheetsThere are three ways of using CSS:External style sheetEmbedded style sheetInline styles

This is called inline styleInline Style sheetsCreating an Embedded Style SheetBy 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 tags) located in the head section of the document (defined by opening and closing tags). Embedded style sheets affect only the specific HTML document in which the CSS code resides.In the head section of an HTML document, enter an opening tag.Define a type attribute for the tag and set it equal to text/css.Insert a line or two and begin entering selectors and declarationsTo close the embedded style sheet, enter a closing tag.

An Embedded StylesheetCreating an External Style SheetExternal 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.Open a new blank document in your editor and enter the styles you wish to define, as shown:

An External Style sheetSave the file with a .css extensionOpen the HTML documents to which you want to attach the style sheet. Within the head section of each document, insert a 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.

Defining Style ClassesBefore 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.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):

Using IDExample: #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):

Block-Level and Inline-Level elementsThe 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.Note:Define your classes in embedded or external style sheets. Because style classes require a selector, it isnt possible to create an inline style class.

Working with Background ImagesIn 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) }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 imagerepeat-x tiles the image horizontally onlyrepeat-y tiles the image vertically onlybackground-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 | rightDefining Border Style Propertiesborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleDefine a value for your border style properties using any of the following keyword values:None dotted dashed solid double groove ridge inset outsetShort Hand => border-style: solid;46Defining Border Width Propertiesborder-top-widthborder-bottom-widthborder-left-widthborder-right-widthThese properties accept keyword values:thin, medium, thickAs well as any positive length value.A value of zero collapses the border area completely. Negative values are not permitted.Short Hand => border-width: thick;47Defining Border Color Propertiesborder-top-colorborder-bottom-colorborder-right-colorborder-left-color

Short Hand => border-color: red;

48Using the Border Property ShorthandTo 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 }To specify the style, width, and color for all sides of an elements border, include a border property in your declaration.Define the width, style, and then color (separated by spaces) as a single valueFor example:div { border: thin dashed #FF0000 }

Week#1Day#2 Let us get started.

CSS Basic Page LayoutThe CSS Box ModelThe box model refers to picturing all elements visually as a box that contains content and padding, and has borders and margins.

Positioning elements using CSSWeb browsers normally position elements in the same order the elements appear in the source for an html page. In-line elements, such as the tags, are placed left to right, while block-level elements, such as the tags, are placed on a new line. This flow is the browsers normal layout flow.Position PropertyThepositionproperty is used to define whether an element is absolute, relative or static.The valuestaticis the default value for elements and renders the position in the normal order of things, as they appear in HTML.

Relativeis much likestatic, but the element can be offset from its original position with the properties:top, right, bottom and left.Absolutepulls an element out of the normal flow of the HTML and delivers it to a world all of its own.The absolute element can be placed anywhere on the page using :top, right, bottom and left.Offset=Place out of line.56FloatingFloating an element will shift it to the right or left of a line, with surrounding content flowing around it.Example:float: leftORfloat: rightIf you do not want the next element to wrap around the floating objects, you can apply the clear property. clear: left will clear left floated elements, clear: right will clear right floated elements and clear: both will clear both left and right floated elements. For example:#footer {clear: both;}

That is all about HTML and CSS

So, What is Java Script?A Programming language that adds interactivity to your pages.Also known as Scripting language.Scripting language does not require a compiler like other programming languages.It is interpreted and run by your web browser.JS script is a program that is included on an HTML page.JS used to be LiveScript.Java Script is not JAVA, so if you came here to learn Java, you are in the wrong place.

What can you do with Java Script?Create an active user interface. (based on user input)Validate user input on Forms.Your site becomes more friendly and responsive.Servers also validate user input, because all browsers do not have Java script.Create custom HTML pages based on:User input.Information from cookies.Date, type and place of the user and many more.What JavaScript can not do?

Can not talk to a database.Can not write to files.

Workflow:First get your HTML and CSS code ready and test it.Start adding a little bit of java script code and test it.Do not write down a bunch of code , if bugs rise in your code you can hardly find it.

Tools you need.A good text editor like Notepad++ that has:Line numbers.Code folding.Syntax coloring.

Browsers: get as many of them as possible.But have one dependable browser, like Firefox.

First Script.

Body and Header ScriptsExternal Java Script.Remember CSS? Handy to use it.External JavaScript are just the same.Create your JavaScript code in a separate file with an extension of ( .js).Then refer to that file in the Head section using the following code:

External Hello Message.

Java Script CodeHTML CodeNo Script tag.There are some people whose browsers do not support Java Script.Or do not want to enable Java Script in their browsers.The no script tag is help full in this case.At least you can let them know that java script code is not run for them.Add the no script tag inside the body of the page.

Comments in Java Script.Why comments?Two types of comments:Single line comment: // comment.Multi line comment: /* comments */

JS Variables.They are objects created by the user to store some data.Declaration: var varibaleName;You can also give value to the Variable at declaration time.var course=Java Script;var phoneNumber= 25261-xxxxxx;In Java Script, any variable can contain any type of data.

Operators.Addition => var myNum = 2 + 3;Concatenation => var myCourse = Java + Script;Increment => var myCounter ;myCounter = myCounter +1; or myCounter += 1;or simply myCounter++ ;Negation =>var myNum;myNum= - myNum;OperatorsOperatorExampleSame as= x = y x = y+= x += y x = x+y-= x -= y x = x-y*= x *= y x = x*y/= x /= y x = x/y%= x %= y x = x%yJS Objects.Java Script is Object Based Language.In the real world, we have objects around us.Computer, class, university are all objects.Objects can contain other objects called propertiesSo disk, CPU and keyboard are properties for computer object .So when referring to properties we use dot operator (.) . => disk.computer

From Most General to Most SpecificSimilarly Browser window has a variety of objects.Example: document.titledocument.form.submit Objects have also Methods. (things objects do).DOM inspector tool : gives a tree structure of objects in the browser.JS Objects.Comparisons.OperatorMeaningExample== Equal 3 == 8 result FALSE!= Not Equal 3 != 8 result TRUE> Greater than 3 > 8 result FALSE=Greater than or Equal 3 >= 8 result FALSE

week#1 day#1 java script course

Documents