<> One ,JavaScript brief introduction


JavaScript Is an interpretative scripting language belonging to the network , It has been widely used Web application development , It is often used to add various dynamic functions to web pages , To provide users with more smooth and beautiful browsing effect . usually JavaScript The script is embedded in the HTML To achieve their own functions .

It is mainly used to provide HTML( An application of Standard General Markup Language ) Page add interaction behavior .
It can be embedded directly HTML page , But it's written separately js Documents facilitate the separation of structure and behavior .
Cross platform features , With the support of most browsers , It can run on a variety of platforms .
Javascript Four basic data types and two special data types are provided to handle data and text . Variables provide a place to store information , Expression can be used to process complex information .

<> Two , Why learn JavaScript?

* All major browsers support it JavaScript
* at present , Most of the world's web pages are used JavaScript
* It allows web pages to present a variety of dynamic effects


<> Three , Start formal learning JavaScript

1. <script> label
<script> JS The code is here html The code can't be written here ! </script> <script> Labels can be placed in HTML Page's <body> and <
head> In part . <script> and </script> Will tell JavaScript Where to start and end .
2. document.getElementById( )
document.getElementById("id").style.color="color"; <Button type="Button"
onclick="alert('Hello World!')"> Order me this Button!</Button> document.getElementById(
"h1").innerHTML="innerHTML It can be replaced HTML element ";
3. console output
console output : console.log() Clear console information : console.clear()
4. notes
HTML notes <!-- --> JavaScript notes // /*...*/
5. data type
stay JavaScript There are 5 Different data types : string number boolean object function 3 Object types :
Object Date Array2 Data types that do not contain any values : null undefined If the object is JavaScript Array or
JavaScript Date, We can't get through typeof To judge their classes type , Because it's all back Object.
6. variable declaration
var a = 666; var b = "666 abc";
7. array
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" };
8. function
function(){ ... }
9. Nested Function
JavaScript Support nested functions , Nested functions can access the function variables of the previous level . In this example , Nested Function plus() That can access the parent function counter variable . example :
function add() { var counter = 0; function plus() {counter += 1;} plus(); return
counter; }
10. regular expression
regular expression ( In code, it is often abbreviated as regex,regexp or RE) Use a single string to describe , Piece With a series of string search patterns that conform to a certain syntax rule .
A regular expression is a search pattern formed by a sequence of characters . When you search for data in text , You can use search patterns to describe what you're looking for . Regular expressions can be used for all text search and text replacement operations . grammar
/ Regular expression body / Modifier ( Optional ), The modifier is optional . example :var patt = /runoob/i
11. try{ … } catch( ){ … }
15.JavaScript error try{ // Run the code here throw...} catch(){ // Handle error messages here }
12. void keyword
javascript:void( expression ) The most important thing is void keyword ,void yes JavaScript It's very important keyword ,
This operator specifies that an expression is evaluated but does not return a value . Examples :<body> <p> Click the link below to see the results :</p> <a href="javascript:void(0)">
I didn't respond !</a> <a href="javascript:void(alert('Warning!!!'))"> Point me !</a> </body>
13. typeof Operator
typeof Operator returns the type of a variable or expression document.getElementById("demo").innerHTML = typeof "john"
+ "<br>" + typeof 3.14 + "<br>" + typeof false + "<br>" + typeof [1,2,3,4] +
"<br>" + typeof {name:'john', age:34};

<> Four , Practice code

1. obtain id set up color
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="
text/html; charset=utf-8" /> <title> warm-up </title> </head> <body> <p id="p1"> I'm the first paragraph
</p> <p id="p2"> I'm the second paragraph </p> <script type="text/javascript"> document.write(
"Hello world!"); document.getElementById("p1").style.color="blue"; document.
getElementById("p2").style.color="red"; </script> </body> </html>

2. Reference external JS file
--------------------------------index.html--------------------------------
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="
text/html; charset=utf-8" /> <title> quote JS file </title> <script src="script.js"></
script> </head> <body> </body> </html>
--------------------------------script.js------------------------------
// Please write JS code document.write("Hello my lover!");

3. Click event
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </
head> <body> <!-- start:Js exercise one --> <h3 id="h1"> This is a title </h3> <p id="p1">
This is a paragraph </p> <script> document.write("<h3> This is the second title </h3>"); document.write(
"<p> This is the second paragraph .</p>"); document.getElementById("h1").style.color="red"; document.
getElementById("p1").style.color="blue"; document.getElementById("h1").innerHTML
="innerHTML It can be replaced HTML element "; document.write(Date()); function myFunction(){ alert(
"This is my first function!"); } </script> <br> <br> <button type="button"
onclick="myFunction()"> Point me !</button> <br> <hr> <br> <!-- end --> <!-- start:Js
exercise two --> <p id="p3"> Knock on your mother !!!</p> <p id="p4"> one's junior of equal standing , What's the matter with you ?</p> <button type="
button" onclick="secondFunction()"> Order me </button> <script> a=4; b=6; console.log(a
+b);// Console F12 //console.clear(); function secondFunction(){ document.
getElementById("p3").innerHTML=" Steady with skin ,"; document.getElementById("p4").innerHTML=
" there is none under heaven to equal him !"; } </script> <!-- end --> </body> </html>

4.Java data type , array , object
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </
head> <body> <!-- start: Java data type --> <script> var string1="qiaonima"; var
string2="xiaolaodi"; var string3="nizenmehuishi?"; document.write(string1 + " ")
; document.write(string2 + " "); document.write(string3 + " "); </script> <!--
end --> <!-- start: Java array --> <p id="p1"></p> <br> <script> var i; var number=
new Array(); number[0]="what"; number[1]="is"; number[2]="up"; number[3]="?";
for(i=0;i<number.length;i++){ document.write(number[i]+" "); } function addSpace
(){ document.getElementById("p1").innerHTML="<br>"; } </script> <br><br><br> <
button type="button" onclick="addSpace()"> Add blank line </button> <!-- end --> <!--
start: Java object --> <br><br> <script> var biaoqingbao= { first : " one's junior of equal standing ,", second :
" How are you? ", third : " What's going on ?" }; function biaoQingbao(){ document.write(biaoqingbao.first
); document.write(biaoqingbao.second); document.write(biaoqingbao.third); } </
script> <button type="button" onclick="biaoQingbao()"> one's junior of equal standing </button> <br> <!--
end --> <!-- start: JavaScript function --> <br> <script> function returnNumber(num1,
num2,num3){ document.write(num1+num2+num3); } </script> <button type="button"
onclick="returnNumber(1000,300,14)">caculate</button> <!-- end --> </body> </
html>

5.switch() case
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </
head> <body> <!-- start --> <p> What day is today ?</p> <p id="p1"></p> <button onclick="
myFunction()"> click here </button> <script> function myFunction(){ var x; var d=new
Date().getDay(); switch (d){ case 0: x=" Today is Sunday "; break; case 1: x=" Today is Monday ";
break; case 2: x=" Today is Tuesday "; break; case 3: x=" Today is Wednesday "; break; case 4: x=" Today is Thursday ";
break; case 5: x=" Today is Friday "; break; case 6: x=" Today is Saturday "; break; } document.
getElementById("p1").innerHTML=x; } </script> <!-- end --> </body> </html>

6. regular expression :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </
head> <body> <!-- start: search --> <p> Search the string stupid Location of :</p> <p id="p1">you are
a stupid boy!</p> <button onclick="searchStr()">search</button> <script>
function searchStr(){ var str="you are a stupid boy!" var n=str.search(/stupid/i
); document.getElementById("p1").innerHTML=n; } </script> <br> <br> <!-- end -->
<!-- start: replace --> <p> Replace the " one's junior of equal standing " </p> <p id="p2"> one's junior of equal standing , What's the matter with you ?<p> <button
onclick="strReplace()">replace</button> <script> function strReplace(){ var str2
=" one's junior of equal standing , What's the matter with you ?"; var str3=str2.replace(/ one's junior of equal standing /i," Little old sister "); document.getElementById("p2"
).innerHTML=str3; } </script> <br> <br> <!-- end --> <!-- start: RegExp object
text() --> <script> var patt1=new RegExp("e"); document.write(patt1.test("The
best things in life are free")); </script> <br> <br> <!-- start: RegExp object
exec() --> <script> var patt1=new RegExp("e"); document.write(patt1.exec("The
best things in life are free")); </script> </body> </html>