Javascript change HTML(1)

来源：互联网发布：vim c语言插件编辑：程序博客网时间：2024/06/15 20:46

Javascript change HTML

getElementById
change text content, text size,

tag

<script type="text/javascript">  </script>

JavaScript function
Placed in the <head>or <body> section of an HTML page.

<head><script>function myFunction() {    document.getElementById("demo").innerHTML = "Paragraph changed.";}</script></head>

External JavaScript
External file: myScript.js

<script src="myScript.js"></script>

Advantages

1.It separates HTML and code
2.It makes HTML and JavaScript easier to read and maintain
3.Cached JavaScript files can speed up page loads

innerHTML, document.write(), window.alert(), console.log()
JavaScript Programs
JavaScript statements are separated by semicolons
var keyword to declare variables

JavaScript Identifiers
The first character must be a letter, an underscore (_), or a dollar sign ($).
Numbers are not allowed as the first character.
first-name: Hyphens are not allowed. It is reserved for subtractions.
JavaScript programmers tend to use camel case
JavaScript uses the Unicode character set.

JavaScript Keywords
debugger Stops the execution of JavaScript, and calls (if available) the debugging function
Variables
var JavaScript variables can hold numbers like 100 and text values like “John Doe”.
String: inside double or single quotes.
Numbers: without quotes.
A variable declared without a value will have the value undefined.

Re-declare a JavaScript variable will not lose its value.

Arithmetic
- var x = “5” + 2 + 3;
523
If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated.
If you add a number and a string, the result will be a string!
- var x = 2 + 3 + “5”;
55

Comparison Operators
===: equal value and equal type
!==: not equal value or not equal type

Type Operators
instanceof
Returns true if an object is an instance of an object type

Bitwise Operators

JavaScript uses 32-bit signed numbers. It will return -6.
~00000000000000000000000000000101 will return 11111111111111111111111111111010

Objects
JavaScript objects are written with curly braces.
Name : Value pairs, separated by commas.

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

Accessing Object Properties

objectName.propertyName

objectName["propertyName"]

Accessing Object Methods

fullName    function() {return this.firstName + " " + this.lastName;}

A method is actually a function definition stored as a property value.

name = person.fullName();

Function
Accessing a function without () will return the function definition:

Arrays
written with square brackets

var cars = ["Saab", "Volvo", "BMW"]

typeof operator can return one of these primitive types:
string
number
boolean
null
undefined

typeof [1,2,3,4]             // Returns "object"

The typeof operator returns “object” for arrays because in JavaScript arrays are objects.

var person = null;         // Value is null, but type is still an object

null === undefined         // falsenull == undefined          // true

Automatically Global
If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.
All global variables belong to the window object.

var carName = "Volvo";// code here can use window.carName

Lifetime of JavaScript Variables
In a web browser, global variables are deleted when you close the browser window (or tab), but remains available to new pages loaded into the same window.

Events

<button onclick="this.innerHTML = Date()">The time is?</button>

Common HTML Events
Strings
Special Characters
The escape character (\) can also be used to insert other special characters in a string.

\', \'', \\

Strings

var x = "John";             var y = new String("John");// (x == y) is true because x and y have equal values// (x === y) is false, expects equality in both type and value.

var x = new String("John");             var y = new String("John");// (x == y) and (x === y) are false because x and y are different objects. Comparing two JavaScript objects will always return false.

String Methods and Properties

Truthy and Falsty
这里写图片描述

0 0