Web Front-end Basics (05)

#### Overflow Sets overflow

Visible (default) out of range display
Hidden Out of range does not display
Scroll out of range to display ###JavaScript
Effect: Adds dynamic effects to a page
It has nothing to do with Java, just to catch the heat
Language features:
1. Belongs to the scripting language, does not need to compile directly parsing execution
2. Object-oriented based
3. Int x = 10; String s = “ABC”; Weak type var x = 10; Var s = “ABC”;
4. High security,JavaScript language can only access data inside the browser, data outside the browser is not allowed to access
5. High interactivity, because THE JS language can be embedded in the HTML page and directly interact with the user

Inline: Adds JS code to the event attribute of the tag and executes the JS code when the event is raised
Inside: Add script tags anywhere on an HTML page, write JS code inside the tag, and execute it when the page loads
External: Write JS code in a separate JS file, imported in HTML pages via the SRC attribute of the script tag, and execute ### syntax when the page loads

Includes: variable data type operators various statement methods object-oriented ### variable declaration and assignment
JavaScript is a weakly typed language
java: int x = 10; String s = “ABC”; X = “ABC”; Person p = new Person();
JS: var x = 10; Var s = “ABC”; X = “ABC”; Var p = new Person(); ### Data type
There are only object types in JavaScript
There are several common object types:
1. Var x=18; Var y = 18.5;
2. String: String can be assigned with single or double quotation marks var s = “ABC”/” ABC “;
3. Boolean: Boolean true/false
4. Undefined :undefined specifies the type of a variable to be undefined when it is declared without assigning a value.
5. Object Person Car Hero ### operator + – * / % > < >= <= =! = = =
Much the same as Java
“666”==666 true; “666”==666; “666”==666; “666”===666 false
Java: int x = 5; Java: int x = 5; int y=2; x/y=? 2 js: var x=5; var y=2; x/y=? 2.5 x = 6 x/y =? 3
Typeof variables; Get the type ### statement if else for while switch case
Int I = var I ###
Java: Public return value type method name (argument list){method body}
Js: function method name (argument list){method body}
There are four common ways to declare:

No parameter no return value
No parameter has a return value
There are parameters and return values
Parameter no return value

There are three methods declared in js:

Function Method name (argument list){method body} **********
Var method name = function(argument list){method body}
Var method name = new Function(” 1 “, “2”, “method body”); ### page-specific methods
Var d = document.getelementById (” d1 “);
Gets and modifies the text content of the element

Access: d.i nnerText;
Update: d.i nnerText = “XXX”;

Gets and modifies the value of the text box

Modification: input value = “ABC”;
Access: input. The value;

Gets and modifies the HTML content of the element

Access to:d.innerHTML
Modification:d.innerHTML="<h1>abc</h1>";

###NaN

Not a Number: Not a Number.
IsNaN (x) checks if x isNaN. Returns a value true for NaN(not a number). Returns a value false for not NaN(a number).

Practice:

1. Overflow mode

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				border: 1px solid blue;
				/* visible(default) hidden beyond scroll beyond */
				overflow:scroll;
			}
		</style>
	</head>
	<body>
		<div>
			<img src=".. /2.jpg" >
		</div>
	</body>
</html>
Copy the code

Display effect:

2. Introduction method

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <! --> <input type="button" value="Button" onclick="Alert (' Inline introduced successfully! ')"/ > <! --> <script type="text/javascript">
			alert("Successful internal introduction!") </script> <! Import external js files --> <script SRC ="my.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
Copy the code

Display effect:

Method declaration

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// Single line comment /* */ multi-line comment
			// Declare a method with no parameters and no return value
			function fn1(a){
				alert("Fn1 execution!");
			}
			// The calling method is the same as Java
			// fn1();
			// Declare parameters with no return value
			function fn2(name,age){
				alert(name+":"+age);
			}
			// fn2(" liu Bei ",18)
			// Declare a method with no parameters and a return value
			function fn3(a){
			return "Let's go!";
			}
			var s = fn3();
			console.log(s) ;
			// Declare parameters with return values
			function fn4(x,y){
			return x*y;
			}
			var result = fn4(5.9);
			console.log(result);
			// The format of the second declaration method
			var fn5 = function(){
				alert("Fn5 execution!");
			}
			fn5();
		</script>
	</body>
</html>
Copy the code

Operation effect:

4. Page related methods

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="Button" onclick="myfn()"/>
		<input type="text" id="i1"/>
		<div id="d1"This is div</div> <script type="text/javascript">
			// Execute this method when the button is clicked
			function myfn(a){
				// Get the element object by the element ID
				var d = document.getElementById("d1");
				// Get the text content in div
				// alert(d.innerText)
				// d.innerText=" Change done!" ;
				// Get the text box by id
				var i = document.getElementById("i1")
				// Modify the value of the text box
				// i.value="abc";
				// Put the value inside the textbox into the div
				d.innerText = i.value;
			}
		</script>
	</body>
</html>
Copy the code

Display effect:

5. Square exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="i1"/>
		<input type="button" value="Square" onclick="myfn()"/>
		<div id="d1">
			
		</div>
		<script type="text/javascript">
			function myfn(a){
				var d = document.getElementById("d1");
				var i = document.getElementById("i1");
				if(isNaN(i.value)){/* NaN, not number */
					d.innerText="Input error!";
				}else{/ * is * /
					d.innerText = i.value*i.value;
				}
				
			}
		</script>
	</body>
</html>
Copy the code

6. The calculator

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="i1" />
		<input type="text" id="i2" /><br>
		<input type="button" value="Add" onclick="fn5(1)" />
		<input type="button" value="Cut" onclick="fn5(2)" />
		<input type="button" value="Take" onclick="fn5(3)" />
		<input type="button" value="In addition to" onclick="fn5(4)" />
		<hr />
		<div id="mydiv">

		</div>
		<script type="text/javascript">
			function fn1(a) {
				/* var d = document.getElementById("mydiv"); var i1 = document.getElementById("i1"); var i2 = document.getElementById("i2"); * /
				mydiv.innerText = i1.value * 1 + i2.value * 1;
			}

			function fn2(a) {
				mydiv.innerText = i1.value - i2.value;
			}

			function fn3(a) {
				mydiv.innerText = i1.value * i2.value;
			}

			function fn4(a) {
				mydiv.innerText = i1.value / i2.value;
			}

			function fn5(x) {
				// Check if it is a value
				if (isNaN(i1.value) || isNaN(i2.value)){
						mydiv.innerText = "Input error";
						return; // End the current method
					}
					switch (x) {
						case 1:
							mydiv.innerText = i1.value*1 + i2.value*1;
							break;
						case 2:
							mydiv.innerText = i1.value-i2.value;
							break;
						case 3:
							mydiv.innerText = i1.value*i2.value;
							break;
						case 4:
							mydiv.innerText = i1.value/i2.value;
							break;
					}
				}
		</script>
	</body>
</html>
Copy the code

7. Guess the Numbers

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" placeholder="Please enter an integer between 0 and 100" id="i1"/>
		<input type= "button" value="Guess" onclick="myfn()"/>
		<div id= "mydiv">
		</div>
		<script type="text/javascript">
			// Generate a random number from 0 to 100
			var x = parseInt(Math.random()*100);
			console.log(x);
			/* Call myfn method 2 when the button is clicked. Declare myfn (), check the relationship between the value of the text box and x. If it is greater than x, mydiv will display a big guess, if it is less than x, mydiv will display a small guess,else mydiv will display congratulations you guessed right, */
			var count=0;
			function myfn(a){
				count++;
				if(i1.value>x){
					mydiv.innerText="Big guess!";
				}else if(i1.value<x){
					mydiv.innerText="Small guess!";
				}else{
					mydiv.innerText="Congratulations on your first."+count+"That's right!";
					// Reset data
					count = 0;
					x = parseInt(Math.random()*100)
				}
			}
		</script>
	</body>
</html>
Copy the code

Practice:

Related Posts

link

From beginning to realize the message queue and event loop | creator training camp

How to write your own Virtual DOM