JavaScript Basic Syntax
What is JavaScript (js for short)
1. First understand the composition of the front-end page (the three-tier structure of the front-end page)
●HTML indicates what is in your page, and constitutes the skeleton of the page (structural layer)
●CSS indicates what each content in your page looks like (style layer)
JavaScript (referred to as js) indicates what is in your page How each content changes, 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.
The composition of JavaScript
1.ECMASCRIPT: defines the grammar specification of javascript, describes the basic syntax 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
JavaScript execution environment
A JavaScript program cannot run on its own, it needs to be embedded in HTML before the browser can execute the JavaScript code
Where to write JavaScript code
Like css, our js can also be written in multiple ways on the page to make it effective
js can also be written in multiple ways, divided into inline style, embedded style, and external link style
The first piece of JS code
Before we start, let's learn the first piece of js code
alert("hello world")
Function: A pop-up box will appear in the browser, and the content displayed in the pop-up box is the text written in parentheses
Note: 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 the a tag has its own jump behavior, this is the tag itself, when we click it will automatically jump to the specified page
●We only need to write javascript:; in the position of the herf attribute of the a tag Will not jump
●We write the js code between the colon and the semicolon, and the js code we wrote will be executed
<!-- 写在 a 标签的 href 属性上 -->
<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, which is a click behavior
●In the position of the value, directly write the js code That’s fine, no need for javascript:;
The js code written on the label needs to be triggered by events (behaviors)
<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>
<!--
注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->
Embedded JS code (not recommended)
The embedded js code will be triggered directly when the page is opened
<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
alert('我是一个弹出层')
</script>
<!--
注：script 标签可以放在 head 里面也可以放在 body 里面
-->
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 link js code is introduced into the html page, it will be triggered (parsed) directly when the page is opened to
create a new file with a .js suffix, and write js in the file Code, import the written js file into the html page
<!-- 我是一个 html 文件 -->
<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>
<!-- 一个页面可以引入多个 js 文件 -->
<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
●At present, it is 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 sequentially 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 it cannot be used as an embedded type at this time, 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 属性引入独立的 .js 文件 -->
<script src="demo.js">
// 此处的代码会被忽略掉！！！！
// 不管你有没有写demo.js。
// 只要看到 src 属性浏览器就会当做外链式来解析。
// 你写在 script 标签中的代码就不起作用了
alert(千锋欢迎您);
</script>
</body>
</html>
Comments in JS
To learn a language, first learn the annotations of a language, because the annotations are for ourselves and for developers. Write a comment, which will help us read the code later
JavaScript supports two forms of comment syntax: single-line comments and multi-line comments
single line comment
●It is generally used to describe the function of the following line of code
●You can write two / directly, 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 common understanding of a variable is to use [a certain symbol] to represent [a specific value] (data) ●A variable is a
computer The identifier of the data stored in the memory. According to the variable name, the data stored in the memory can be obtained
. That is to say, we store a piece of data in the memory, and then give this data a name, so that we can find it again in the future
. Syntax: var variable name = value
Define (declare) variables and assign values
●Declaration (definition) of variables consists of two parts: declaration keyword, variable name (identification)
○var: keyword to define a variable, telling the browser that I want to define a variable
○Space: must be written, to distinguish between key and variable name ○
Variable name: a name you created yourself
○=: 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)
1. A variable can only be composed of letters (az, AZ) numbers (0-9), underscore (_) dollar sign ($)
2. A variable cannot start with a number
3. Variables are strictly case-sensitive
4. Do not use keywords or reserved words
●Variable naming convention (recommended you follow)
1. Variable semantics
2. Camel case naming
3. Do not use Chinese
Variable usage considerations
●It is allowed to declare and assign at the same time
●It is allowed to declare multiple variables and assign values at the same time
●Some keywords built in 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 The value of
the variable name is 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.
●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
●Display to users in the form of pop-up window
// 以弹出层的形式展示给我们
alert('你好 世界')
●Display to users on the page
// 直接展示到我们的页面上
document.write('hello world')
●Display on 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)