1. What is JavaScript (js for short)
1. First of all, we must understand the composition of the front-end page (the three-tier structure of the front-end page)
-
HTML represents what's inside your page, making up the skeleton (structural layer) of the page
-
CSS expresses what each piece of content on your page looks like (style layer)
-
JavaScript (referred to as js) shows how each content in your page changes, and what behavior content (behavior layer)
2.JavaScript
It is an object-based and event-driven client-side scripting language with relative security. At the same time, it is also a scripting language widely used in client-side Web development. It is often used to add dynamic functions to HTML web pages, such as responding to various operations of users.
2. The composition of JavaScript
1. ECMASCRIPT: defines the grammar specification of javascript, describes the basic grammar and data types of the language
2.BOM (Browser Object Model): Browser Object Model
There is a set of mature API that can operate the browser, and the browser can be operated through the BOM. For example: pop-up box, browser jump, get resolution, etc.
3.DOM (Document Object Model): Document Object Model
There is a set of mature API that can manipulate page elements, and elements in the page can be manipulated through DOM. For example: add a div, reduce a div, change the position of a div, etc.
Summary: JS is to operate the browser and label structure through a fixed syntax to achieve various effects on the web page
3. JavaScript execution environment
The JavaScript program cannot run independently, it needs to be embedded in the HTML, and then the browser can execute the JavaScript code. The writing position of the JavaScript code is the same as that of CSS. Our js can also be written on the page in many ways to make it take effect. There are also many js There are three ways of writing, which are divided into inline style, embedded style and external chain style.
The first piece of JS code, before we start, let's learn the first piece of js code
alert("hello world")effect:
A pop-up box appears in the browser, and the content displayed in the pop-up box is the text written in parentheses
Notice:
-
If the content in parentheses is not pure digital content, it needs to be wrapped in quotation marks (single quotation marks or double quotation marks are acceptable)
-
Inline JS code (not recommended) a tag because a tag has its own jump behavior, this is the tag itself, when we click it will automatically jump to the specified page
-
As long as we write javascript:; in the position of the herf attribute of the a tag, it will not jump
-
When we write the js code between the colon and the semicolon, the js code we wrote will be executed.
<a href="javascript:alert('hello world');">点击一下试试</a>
non-a tag
If it is a non-a tag, it does not have the ability to jump, we need to give it this ability, first learn the first ability, onclick, this is a click behavior, in the position of the value, just write js code directly , no javascript:; is needed, the js code written on the label needs to be triggered by events (behaviors).
<div onclick="alert('我是一个弹出层')">点一下试试看</div>
Embedded JS code (not recommended)
The embedded js code will be triggered directly when the page is opened
<script type="text/javascript">
alert('我是一个弹出层')
</script>
Notice:
1. The code inside the script tag pair does not need any behavior, it will be executed when the page is opened
2.script tag pairs can be written anywhere on the page in principle
It is recommended to put it at the end of the head tag or the end of the body tag
Currently we recommend placing it at the end of the body
3. In principle, any number of script tags can be written on a page
The code in each script tag will be executed sequentially from top to bottom
External link JS code (recommended)
-
The external link code is written in a .js file
-
As long as the external chain js code is introduced into the html page, it will be directly triggered (parsed) when the page is opened
-
Create a new file with a .js suffix, write js code in the file, and import the written js file into the html page
<script src="index.js"></script>
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>
Notice :
1. The external link js code does not need any action, it will be executed when the page is opened
2.script tag pairs can be written anywhere on the page in principle
It is recommended to put it at the end of the head or the end of the body
It is currently recommended to put it at the end of the body
3. A page can write any number of script tags
Each script tag will be executed in order from top to bottom
4. When you write the src attribute in a script tag, it means that you want to use it as an external link
Then at this time it cannot be used as an embedded type, and the content written in the tag pair is meaningless
As long as you write the src attribute, regardless of whether the address of the value is written, the embedded type is meaningless
5. A page can have external links and inline links at the same time. The order of execution should be closed according to the writing position of your script tags, and the ones written on it will be executed first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<script src="demo.js">
// 此处的代码会被忽略掉！！！！
// 不管你有没有写demo.js。
// 只要看到 src 属性浏览器就会当做外链式来解析。
// 你写在 script 标签中的代码就不起作用了
alert(千锋欢迎您);
</script>
</body>
</html>
Comments in JS
To learn a language, first learn the comments of a language, because the comments are for ourselves and developers. Writing a comment will help us read the code in the future. JavaScript supports two forms of comment syntax: single-line comments, Multiline comments.
single line comment
Generally, it is used to describe the function of the following line of code, you can directly write two /, or press ctrl + /.
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>基础-注释</title>
</head>
<body>
<script>
// 这种是单行注释的语法
// 一次只能注释一行
// 可以重复注释
alert('嗨，欢迎来千锋学习前端技术！');
</script>
</body>
</html>
multiline comment
Generally used to write a long paragraph, or comment a piece of code, you can directly write /* */ and then write a comment between the two asterisks, the shortcut keys of each editor are different, vscode is Alt + shift + a.
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>基础-注释</title>
</head>
<body>
<script>
/*
这是多行注释的语法
*/
/*
注释的代码不会执行
alert('我是一个弹出层')
alert('我是一个弹出层')
*/
alert('欢迎您的到来')
</script>
</body>
</html>
variable (emphasis)
A variable is a "container" used to store data in a computer. It can make the computer have memory. A popular understanding of a variable is to use [a certain symbol] to represent [a specific value] (data)
A variable is an identifier for data stored in the computer memory. According to the variable name, the data stored in the memory can be obtained. That is to say, we have stored a piece of data in the memory, and then we need to give this data a name, so that we can use it again in the future. find it
Syntax: var variable name = value
Define (declare) variables and assign values
Declaring (defining) variables consists of two parts: declaring keywords, variable names (identifications)
-
var: the keyword to define a variable, telling the browser that I am going to define a variable
-
Space: must be written, distinguish between key and variable name
-
Variable name: a name of your own
-
= : Assignment symbol, assign the content on the right to the variable on the left
-
Value: What value do you assign to the variable you defined
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>基础-声明和赋值</title>
</head>
<body>
<script>
// 语法: var 名字 = 值
var age = 18
// var 关键字 所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>基础-声明和赋值</title>
</head>
<body>
<script>
// 1. 定义不赋值
// => 语法: var x
// => 准备一个变量, 以后使用, 暂时先不进行赋值
var x
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>基础-声明和赋值</title>
</head>
<body>
<script>
// 2. 定义并赋值
// => 语法: var x = 100
// => 准备一个变量的同时, 并且给他赋值为某一个数据
var x = 100
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>基础-声明和赋值</title>
</head>
<body>
<script>
// 3. 一次性定义多个变量不赋值
// => 语法: var x, x2, x3, x4, ...
// => 同时定义多个变量, 都不进行赋值
var x, x1, x2
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>基础-声明和赋值</title>
</head>
<body>
<script>
// 4. 一次性定义多个变量并赋值
// => 语法: var x = 10, x2 = 20, x3 = 30, ...
var x = 10, x1 = 20, x2 = 30
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>基础-声明和赋值</title>
</head>
<body>
<script>
// 5. 一次性定义多个变量, 有的赋值有的不赋值
// => 语法: var x = 10, x2, x3 = 30
var x = 10, x1, x2 = 20
</script>
</body>
</html>
Variable Naming Rules and Specifications
Variable naming rules (you must follow)
-
A variable can only consist of letters (az, AZ) numbers (0-9) underscores (_) dollar signs ($)
-
A variable cannot start with a number
-
Variables are strictly case sensitive
-
Do not use keywords or reserved words
Variable naming convention (recommended you follow)
-
variable semantics
-
CamelCase
-
do not use Chinese
Variable usage considerations
-
Allow declaration and assignment at the same time
-
Allow multiple variables to be declared and assigned at the same time
-
Some keywords built into JavaScript cannot be used as variable names
-
A variable name can only store one value
-
When assigning a value to a variable again, the previous value is gone
Variable names are case sensitive (JS is strictly case sensitive)
-
JS input and output
-
Output and input can also be understood as the interaction between human and computer. The user inputs information to the computer through the keyboard, mouse, etc., and the computer processes and then displays the result to the user. This is a process of input and output.
For example: if you press the arrow keys on the keyboard, the up/down keys can scroll the page, the action of pressing the up/down keys is called input, and the scrolling of the page is called output.
output
Displayed to the user in the form of a pop-up window
// 以弹出层的形式展示给我们
alert('你好 世界')
displayed to the user on the page
// 直接展示到我们的页面上
document.write('hello world')
Displayed in the console that ordinary users cannot see
// 在控制台展示出来
console.log('大家好');
enter
user selection box
// 这个选择框返回的是一布尔值
var name = confirm('你是程序员吗')
// 打印我们拿到的结果(也就是布尔值)
console.log(name)
user input box
// 这个输入框返回的是用户输出的内容
var name = prompt('请输入你的姓名')
// 我们拿到的结果就是用户输入的结果
console.log(name)Recommended getting started tutorial: