编程知识 cdmana.com

Introduction and beginners of JavaScript

1. Why learn JavaScript?

?JavaScript yes web One of the three languages developers must learn :
HTML Define the content of the web page ----[ Make a web page ]---- Simple and boring
CSS Specify the layout and style of the web page —[ Beautify the web ]
HTML+CSS— Webpage — No dynamic web pages 【1. No dynamic effects 2. Data is not dynamic 】
JavaScript Programming web behavior 【 Dynamic effect , Data dynamic loading 】
2. What is? JavaScript?
?? 1.javascript and java It's a totally different language , Whether it's concept or design .
?? netscape ---- browser 【Netscape Navigator】----LiveScript-----JavaScript
?? Microsoft ---- browser [IE]----JScript
… wait
?? ECMA— European Association of computer manufacturers –ECMA-262 standard —ECMAScript
?? 2.JavaScript Object oriented scripting language
?? object-oriented — Programming idea
?? Script program — According to a certain format to write the executable file 【 Direct operation 】
?? 3.JavaScript Use
??1. Marked events
<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		<h1>1. Marked events </h1>		<input type="button" value=" test Javascript Use " 		onclick="alert(' Welcome to use Javascript')" />	</body></html>

javascript Introduction and beginners


2.script Use in tags
?? script–<script>javascript Program </script>
?? Location –<head> In the mark /<body> In the mark 【 Last 】
<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>		<script type="text/javascript">			alert(" Welcome to use JavaScript!");		</script>	</head>	<body>		<h1>script Use of tags in </h1>		<h1>script The mark appears in head In the mark </h1>		<input type="button"  value=" test javascript Use " onclick="test1();" />	</body></html>

javascript Introduction and beginners



javascript Introduction and beginners

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		<h1>script Use of marks </h1>		<h1>script The mark appears in body In the mark </h1>		<input type="button" value=" test JavaScript Use " onclick="test1()" />		<script type="text/javascript">			function test1(){				alert(" Welcome to use javascript!");			}		</script>	</body></html>

javascript Introduction and beginners


3. External script — take JavaScript Program to a separate file 【.js】, adopt <script> The tag provides src Properties will be independent of the file 【.js】, Import to html In file .
?? You can go to <head> or <body> Place external script references in .
?? Format :<script src=“js File path ”></script>
independent jsWENJIAN 【myscript1.js】
function test1(){
?alert(" Welcome to use javascript!”);
}
.js file
function test1(){	alert(" Welcome to use JavaScript!")}

html file
<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>		<script src="javascript.js" type="text/javascript" charset="utf-8"></script>	</head>	<body>		<h1>script External script usage </h1>		<input type="button"  value=" test JavaScript Use " onclick="test1();" />	</body></html>

javascript Introduction and beginners


3.JavaScript Output
JavaScript Be able to... In different ways “ Show ” data :
?? 1. Use window.alert() Write warning box
?? 2. Use document.write() write in HTML Output
?? 3. Use innerHTML write in HTML Elements
?? 4. Use console.log() Write to browser console
<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		<h1>1. Use window.alert() Write warning box </h1>		<!--		<script type="text/javascript">			window.alert(" test window.alert() Write warning box ")		</script>		-->		<h1>2. Use document.write() write in HTML Output </h1>		<!--		<script type="text/javascript">			document.write(" test document.write() write in HTML Output ")		</script>		-->		<h1>3. Use innerHTML write in HTML Elements </h1>		<p id="p1"></p>		<!--		<script type="text/javascript">			document.getElementById("p1").innerHTML="<font size='7'> test innerHTML write in HTML Elements </font>"		</script>		-->		<h1>4. Use console.log() Write to browser console </h1>		<script type="text/javascript">			console.log("console.log() Write to browser console ")		</script>	</body></html>

javascript Introduction and beginners


4.JavaScript sentence
JavaScript The statement consists of :
?? value 、 Operator 、 expression 、 Keywords and notes .
?? document.getElementById(“demo”).innerHTML = “Hello Kitty.”;
“Hello Kitty.”---- value
?? = — Assignment operator
?? key word – Often a keyword is used to identify what needs to be performed JavaScript action


javascript Introduction and beginners


notes – Explain the meaning of the code / Debugging program 【 The content of the comment is not executed 】
// Single-line comments 【 Make sure a line of code is commented out and not executed 】
/*
Multiline comment 【 Ensure that multiple lines of code are commented out and not executed 】
// Can contain single line comments
*/
  <script>			/*			//console.log("console.log()  Write to browser console ");			console.log("console.log()  Write to browser console ");			console.log("console.log()  Write to browser console ");console.log("console.log()  Write to browser console ");			*/		</script>

A semicolon ; It means one javascript The end of the statement .
?? You can write statements with semicolons on the same line , Usually we don't write that , It's not convenient to search after an error , So line by line .
JavaScript Code block 【{ Code block }】
function myFunction(){
??document.getElementById(“demo”).innerHTML = “Hello Kitty.”;
??document.getElementById(“myDIV”).innerHTML = “How are you?”;
}
5.JavaScript grammar
JavaScript value
JavaScript Statement defines two types of values : Mixed values and variable values .
Mixed values are called literal quantities (literal)— Constant values
Write numerical value with or without decimal point :12.5 1001
Write string :”zhangsan”
Variable values are called variables [ The smallest unit of program operation ] Save data values .
Need to pass through var key word To define variables
usage 1 : var a; // Defining variables
??a = 1001; // Variable assignment
usage 2: var b = ”hello”;
JavaScript Operator
JavaScript Use operators (+ - * /) To calculate the value .
JavaScript Use (=) Assignment operator .
JavaScript Use (> < == >= <= !=) Comparison operator .
JavaScript Use (|| && !) Logical operators .

JavaScript expression
Expressions are values 、 A combination of variables and operators , The result is the value of .
100+123【 Arithmetic expression 】
var b=“hello”; 【 Assignment expression 】
12>23 【 Relationship expression 】
(12>23)&&(23<12) —【 Logical expression 】

JavaScript identifier
The identifier is for JavaScript Elements 【 function , Variable , object …】 A string of names .
1. It can be made of letters 、 Underline (_) Or the dollar sign ($), Digital composition , The number can't start .
2. You can't use keywords
3. Case sensitive
Hump naming rules — title case 【FirstName, LastName, MasterCard, InterCity.】
JavaScript Programmers tend to use camel case with lowercase letters
6. JavaScript Variable
??JavaScript Variables are containers for storing data values .
??JavaScript data type
?? In programming , Text values are called strings .
??JavaScript Can handle multiple data types , But now , We only focus on numeric and string values .
?? Strings are enclosed in double or single quotation marks . Values don't use quotation marks .
?? If you put the value in quotation marks , Will be treated as a text string .
??true/false Boolean type
??null null type
Statement ( establish ) JavaScript Variable
stay JavaScript Creating variables in is called “ Statement ” Variable .
You can var Key words to declare JavaScript Variable :
var carName;
After the statement , Variables have no values .( technical , Its value is undefined.) We need to give the initial value when we use the variable , Otherwise it is considered undefined .
adopt ”=” Assign a value to a variable .
var carName;
carName=”BMW”;

var carName = ”BMW”;
A sentence , Multiple variables
var person = “Bill Gates”, carName = “porsche”, price = 15000;

7.JavaScript Operator

JavaScript Use (=) Assignment operator .
JavaScript Use arithmetic operators (+ - * / % ++ --) To calculate the value .
<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title> Variable - Operator - expression </title>		<script>			function  suanshu(){				// Declare variables 				var num1=10;				var num2=3;				document.getElementById("h1").innerHTML=num1+"+"+num2+"="+(num1+num2);				document.getElementById("h2").innerHTML=num1+"-"+num2+"="+(num1-num2);				document.getElementById("h3").innerHTML=num1+"*"+num2+"="+(num1*num2);				document.getElementById("h4").innerHTML=num1+"/"+num2+"="+(num1/num2);				document.getElementById("h5").innerHTML=num1+"%"+num2+"="+(num1%num2);				// ++ [ Automatic addition 1]				//  Variable ++  [ Use first, then add ]				//num1++;  //10				//document.getElementById("h6").innerHTML=num1; //11				// ++ Variable   [ Add before use ]				//++num1;  //11				//document.getElementById("h6").innerHTML=num1; //11				// -- [ Auto subtract 1]				//  Variable -- [ Use before subtract ]				//num1-- ; //10				//document.getElementById("h6").innerHTML=num1; //9				//  --  Variable 				--num1;  // 9				document.getElementById("h6").innerHTML=num1; //9			}		</script>	</head>	<body>		<input  type="button"  value=" Test arithmetic operators " onclick="suanshu()"/><br>		<h1 id="h1"></h1>		<h1 id="h2"></h1>		<h1 id="h3"></h1>		<h1 id="h4"></h1>		<h1 id="h5"></h1>		<h1 id="h6"></h1>	</body></html>

javascript Introduction and beginners


JavaScript Use (> < == >= <= != ) Comparison operator, operator .

JavaScript Use (|| && ! ) Logical operators, operators .

版权声明
本文为[Villain I]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/04/20210422042453330z.html

Scroll to Top