Day 6

CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:

background-color background-image background-repeat background-attachment background-position
Background Color
The background-color property specifies the background color of an element. The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de;}
With CSS, a color is most often specified by:

a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red"
Look at CSS Color Values for a complete list of possible color values. In the example below, the h1, p, and div elements have different background colors:
Example
h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;}
Background Image
The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this:
Example
body {background-image:url('paper.gif');}
Below is an example of a bad combination of text and background image. The text is almost not readable:
Example
body {background-image:url('bgdesert.jpg');}
Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
body { background-image:url('gradient2.png'); }
If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
Background Image - Set position and no-repeat

When using a background image, use an image that does not disturb the text. Showing the image only once is specified by the background-repeat property:
Example
body{ background-image:url('img_tree.png'); background-repeat:no-repeat; }
A Taste of JavaScript
JavaScript can:

Write directly to the HTML output stream Change the content or style of HTML elements React to HTML events and test HTML form input Delete and create HTML elements
JavaScript can Write to the HTML Output Stream Example

document.write("<p>This is a paragraph</p>");
JavaScript can change HTML Content Example

x=document.getElementById("demo") //Find an element x.innerHTML="Hello"; //Change the content
JavaScript can React to Events Example

<button type="button" onclick="myFunction()">Click Me!</button>
JavaScript can Change HTML Styles Example

document.getElementById("demo").style.color="#ff0000";
JavaScript is Not Java

JavaScript and Java are two completely different languages, in both concept and design. Java (developed by Sun) is acomplex programming language in the category as C and C++.
JavaScript in <body>
The example below manipulates the content of an existing <p> element when the page loads:
Example
<!DOCTYPE html> <html> <body>
<h1>My Web Page</h1> <p id="demo">A Paragraph</p> <script> document.getElementById("demo").innerHTML="My First JavaScript"; </script> </body> </html>
JavaScript Functions and Events

The JavaScript statement in the example above, is executed when the page loads, but that is not always what we want. Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button. Then we can write the script inside a function, and call the function when the event occurs. You will learn more about JavaScript functions and events in later chapters.
A JavaScript Function in <head>

The example below calls a function in the <head> section when a button is clicked:
Example
<!DOCTYPE html> <html>
<head> <script> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script> </head>
<body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html>
A JavaScript Function in <body>

This example also calls a function when a button is clicked, but the function is in the <body>:
Example
<!DOCTYPE html> <html> <body>
<h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script> </body> </html>
Scripts in <head> and <body>

You can place an unlimited number of scripts in your document, and you can have scripts in both the <body> and the <head> section at the same time. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.
Using an External JavaScript

Scripts can also be placed in external files. External files often contain code to be used by several different web pages. External JavaScript files have the file extension .js. To use an external script, point to the .js file in the "src" attribute of the <script> tag:
Example
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
You can place the script in the <head> or <body> as you like. The script will behave as it was located exactly where you put the <script> tag in the document. External scripts cannot contain <script> tags.
Writing to The Document Output

The example below writes a <p> element directly into the HTML document output:
Example
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <script> document.write("<p>My First JavaScript</p>"); </script> </body> </html>
Warning
Use document.write() only to write directly into the document output. If you execute document.write after the document has finished loading, the entire HTML page will be overwritten:
Example
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.write("Oops! The document disappeared!"); } </script> </body> </html>
JavaScript in Windows 8
Microsoft supports JavaScript for creating Windows 8 apps. JavaScript is definitely the future for both the Internet and Windows.
JavaScript is Case Sensitive

JavaScript is case sensitive. Watch your capitalization closely when you write JavaScript statements: A function getElementById is not the same as getElementbyID. A variable named myVariable is not the same as MyVariable.
White Space
JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent:
var name="Hege"; var name = "Hege";
Break up a Code Line

You can break up a code line within a text string with a backslash. The example below will be displayed properly:
document.write("Hello \ World!");
However, you cannot break up a code line like this:

document.write \ ("Hello World!");
JavaScript Statements
JavaScript statements are "commands" to the browser. The purpose of the statements is to tell the browser what to do. This JavaScript statement tells the browser to write "Hello Dolly" inside an HTML element with id="demo":
document.getElementById("demo").innerHTML="Hello Dolly";
Semicolon ;
Semicolon separates JavaScript statements. Normally you add a semicolon at the end of each executable statement. Using semicolons also makes it possible to write many statements on one line.
Ending statements with semicolon is optional in JavaScript. You might see examples without semicolons.
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. This example will manipulate two HTML elements:
Example
document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?";
JavaScript Code Blocks

JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket, and end with a right curly bracket. The purpose of a block is to make the sequence of statements execute together. A good example of statements grouped together in blocks, are JavaScript functions. This example will run a function that will manipulate two HTML elements:
Example
function myFunction() { document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; }
JavaScript variables are "containers" for storing information:
Example
var x=5; var y=6; var z=x+y;
Much Like Algebra

x=5 y=6 z=x+y In algebra we use letters (like x) to hold values (like 5). From the expression z=x+y above, we can calculate the value of z to be 11. In JavaScript these letters are called variables.
Think of variables as containers for storing data.
JavaScript Variables
As with algebra, JavaScript variables can be used to hold values (x=5) or expressions (z=x+y). Variable can have short names (like x and y) or more descriptive names (age, sum, totalvolume).

Variable names must begin with a letter Variable names can also begin with $ and _ (but we will not use it) Variable names are case sensitive (y and Y are different variables) Both JavaScript statements and JavaScript variables are case-sensitive.
JavaScript Data Types

JavaScript variables can also hold other types of data, like text values (name="John Doe"). In JavaScript a text like "John Doe" is called a string. There are many types of JavaScript variables, but for now, just think of numbers and strings. When you assign a text value to a variable, put double or single quotes around the value. When you assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a numeric value, it will be treated as text.
Example
var pi=3.14; var name="John Doe"; var answer='Yes I am!';
Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is most often referred to as "declaring" a variable. You declare JavaScript variables with the var keyword:
var carname;
After the declaration, the variable is empty (it has no value). To assign a value to the variable, use the equal sign:
carname="Volvo";
However, you can also assign a value to the variable when you declare it:
var carname="Volvo";
In the example below we create a variable called carname, assigns the value "Volvo" to it, and put the value inside the HTML paragraph with id="demo":
Example
<p id="demo"></p> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;
One Statement, Many Variables

You can declare many variables in one statement. Just start the statement with var and separate the variables by comma:
var name="Doe", age=30, job="carpenter";
Your declaration can also span multiple lines:

var name="Doe", age=30, job="carpenter";
Value = undefined
In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input. Variable declared without a value will have the value undefined. The variable carname will have the value undefined after the execution of the following statement:
var carname;
Re-Declaring JavaScript Variables

If you re-declare a JavaScript variable, it will not lose its value:. The value of the variable carname will still have the value "Volvo" after the execution of the following two statements:
var carname="Volvo"; var carname;
JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:
Example
y=5; x=y+2;
JavaScript Strings
A string is a variable which stores a series of characters like "John Doe". A string can be any text inside quotes. You can use simple or double quotes:
Example
var carname="Volvo XC60"; var carname='Volvo XC60';
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
Example
var answer="It's alright"; var answer="He is called 'Johnny'"; var answer='He is called "Johnny"';
JavaScript Numbers
JavaScript has only one type of numbers. Numbers can be written with, or without decimals:
Example
var x1=34.00; var x2=34; //Written with decimals //Written without decimals
Extra large or extra small numbers can be written with scientific (exponential) notation:
Example
var y=123e5; var z=123e-5; // 12300000 // 0.00123
JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic between variables and/or values. Given that y=5, the table below explains the arithmetic operators:
Operato Description r + * / % Addition Subtraction Multiplication Division Modulus (division Example x=y+2 x=y-2 x=y*2 x=y/2 x=y%2 Result of Result of x y 7 3 10 2.5 1 5 5 5 5 5
remainder) ++ Increment x=++y x=y++ -Decrement x=--y x=y-6 5 4 5 6 6 4 4

Day 6

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Day 6

Transféré par

Droits d'auteur :

Formats disponibles

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

background-color background-image background-repeat background-attachment background-position

With CSS, a color is most often specified by:

Background Image - Repeat Horizontally or Vertically

Background Image - Set position and no-repeat

JavaScript can Write to the HTML Output Stream Example

JavaScript can change HTML Content Example

JavaScript can React to Events Example

JavaScript can Change HTML Styles Example

JavaScript is Not Java

JavaScript Functions and Events

A JavaScript Function in <head>

A JavaScript Function in <body>

Scripts in <head> and <body>

Using an External JavaScript

Writing to The Document Output

JavaScript is Case Sensitive

Break up a Code Line

However, you cannot break up a code line like this:

JavaScript Code Blocks

JavaScript variables are "containers" for storing information:

Much Like Algebra

JavaScript Data Types

Declaring (Creating) JavaScript Variables

One Statement, Many Variables

Your declaration can also span multiple lines:

Re-Declaring JavaScript Variables

JavaScript Arithmetic Operators

remainder) ++ Increment x=++y x=y++ -Decrement x=--y x=y-6 5 4 5 6 6 4 4

Vous aimerez peut-être aussi