JavaScript basics-introduction

table of Contents

Introduction

Features of JS

JavaScript is one of the 3 languages that web developers must learn:

Object classification in JavaScript

Built-in objects

Host object

Custom object

JavaScript can output data in different ways:

JavaScript common events

Code display (the keyboard controls the movement of the div)

Introduction

JavaScript is the programming language of the Web. All modern HTML pages use JavaScript. (Very powerful!!!) Now popular JQuery and Vue are class libraries in JavaScript.

Features of JS

- interpreted language : finished run directly without compilation

--JavaScript is a lightweight programming language . Similar to C and Java syntax structure

--Prototype - based object-oriented , JavaScript is a programming code that can be inserted into HTML pages

--JavaScript is a weak language type programming language

JavaScript is one of the 3 languages that web developers must learn:

HTML defines the content of web pages
CSS describes the layout of a web page
JavaScript page behavior
JavaScript is behavior, CSS is performance

Object classification in JavaScript

Built-in objects

Objects defined by ES standards can be used in any ES implementation

例如：Math String Number Boolean Function Object

Host object

The object provided by the runtime environment of js. Mainly BOM, DOM

Custom object

Objects created by developers

JavaScript can output data in different ways:

Use window.alert() to pop up a warning box.
Use the document.write() method to write the content into the HTML document.
Use innerHTML to write to HTML elements.
Use console.log() to write to the browser's console.

JavaScript common events

In HTML, JavaScript code must be located between the <script> and </script> tags.

HTML events are things that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can trigger these events.

The main event processing is "find the object" -find the corresponding element in the HTML page; "make the object" -bind the event for the found element;

event	description
onchange	HTML element changes
onclick	User clicks on HTML element
onmouseover	The user moves the mouse on an HTML element
onmouseout	The user removes the mouse from an HTML element
onkeydown	The user presses a keyboard key
onload	The browser has finished loading the page

Code display (the keyboard controls the movement of the div)

<html>
	<head>
		<meta charset="utf-8" />
		<title>键盘移动div</title>
			<style type="text/css">
                /*
				*定义box1的显示效果
				*/
				#box1{
					width: 100px;
					height: 100px;
					background-color: darkred;
					position: absolute;
				}
				
			</style>
			
			<script type="text/javascript">
				/*
				*使div根据不同方向移动
				*/
			    window.onload = function(){
					
					document.onkeydown = function(event){ //绑定函数，event是事件对象
						event=event || window.event;
						console.log(event.keyCode);
						switch(event.keyCode){
							case 37 :
							//alert("向左");
							box1.style.left=box1.offsetLeft -10 +"px";
							break;
							case 39 :
							//alert("向右");
							box1.style.left=box1.offsetLeft +10 +"px";
							break;
							case 38 :
							//alert("向上");
							box1.style.top=box1.offsetTop -10 +"px";
							break;
							case 40 :
							//alert("向下");
							box1.style.top=box1.offsetTop +10 +"px";
							break;
							
						}
					};
				};
			</script>
	</head>
	<body>
		<div id="box1">
			
		</div>
	</body>
</html>

If this blog is helpful to you, please remember to leave a message + like it.