1. Introduction to Javascript
1. What is Javascript
JavaScript ("JS" for short) is a lightweight, interpreted or just-in-time programming language with function priority. Although it is famous as a scripting language for developing Web pages, it is also used in many non-browser environments. JavaScript is based on prototype programming, a multi-paradigm dynamic scripting language, and supports object-oriented, imperative and declarative Such as functional programming) style.
JavaScript was designed and implemented by Netscape's Brendan Eich in Netscape Navigator's browser for the first time in 1995. Because Netscape worked with Sun, Netscape management wanted it to look like Java, so it was named JavaScript. But in fact its grammatical style is closer to Self and Scheme.
The standard of JavaScript is ECMAScript. As of 2012, all browsers fully support ECMAScript 5.1, and older browsers support at least the ECMAScript 3 standard. On June 17, 2015, ECMA International released the sixth edition of ECMAScript. The official name of this edition is ECMAScript 2015, but it is usually called ECMAScript 6 or ES6.
2. The Javascript component,
ECMAScript, describes the language's syntax and basic objects. The
Document Object Model (DOM) describes the methods and interfaces for processing web content.
Browser Object Model (BOM), describing methods and interfaces for interacting with the browser.
3. The basic characteristics of
Javascript JavaScript is a scripting language belonging to the Internet. It has been widely used in web application development. It is often used to add various dynamic functions to web pages to provide users with a smoother and more beautiful browsing effect. JavaScript scripts are usually embedded in HTML to achieve their own functions.
Is an interpreted scripting language (code is not pre-compiled).
Mainly used to add interactive behavior to HTML (an application under the standard universal markup language) page.
Can be directly embedded in HTML pages, but written as a separate js file is conducive to the separation of structure and behavior.
The cross-platform feature, supported by most browsers, can run on multiple platforms (such as Windows, Linux, Mac, Android, iOS, etc.).
The Javascript scripting language, like other languages, has its own basic data types, expressions and arithmetic operators and the basic program framework of the program. Javascript provides four basic data types and two special data types for processing data and text. While variables provide a place to store information, expressions can complete more complex information processing.
Note: Summarizing its characteristics:
Scripting language
Object-based,
concise,
dynamic,
cross-platform,
4. The main purpose of Javascript is to
embed dynamic text in HTML pages.
Respond to browser events.
Read and write HTML elements.
Verify the data before it is submitted to the server.
Detect visitor's browser information.
Control cookies, including creation and modification.
Server-side programming based on Node.js technology.
5. Why
JavaScript is one of the three languages that web developers must learn:
(Three Musketeers in Web Development):
HTML defines the content of the web page (framework)
CSS stipulates the layout
of the web page (make-up) JavaScript programs the web page behavior (lives)
2. JavaScript syntax
1. Use of JavaScript
For example:
Note: Old JavaScript examples may use the type attribute:
The type attribute is not required. JavaScript is the default scripting language in HTML.
JavaScript does not provide any built-in printing or display functions.
2. JavaScript output
JavaScript can "display" data in different ways:
Use window.alert () to write an alert box (commonly used).
Use document.write () to write HTML output.
Use innerHTML to write HTML elements.
Use console.log () to write to the browser console. For
example:
3. JavaScript common syntax
JavaScript syntax Is a set of rules that defines the language structure of JavaScript. The following is a brief introduction to commonly used grammar
A simple JavaScript example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
引入JS: JavaScript 代码必须位于 <script> 与 </script> 标签之间。
1. 变量
2. JavaScript 数据类型: 字符串值，数值，布尔值，数组，对象。
3. JavaScript 函数:
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
-->
<script>
var info = "打开成功!";
alert(info);
</script>
</head>
<body>
这是一个Javascript页面
</body>
</html>
Results show:
8. Objects in
JavaScript Objects in JavaScript are similar to objects in Python, so I wo n’t go into too much details here. You can go to the W3c website to view and learn.
9. Conditional statements
In JavaScript, we can use the following conditional statements:
Use if to specify the code block to be executed. If the specified condition is true,
use else to specify the code block to be executed. If the same condition is false,
use else if to specify the new condition to be tested. If the first condition is false,
use switch to specify multiple alternative code blocks to be executed
if (条件 1) {
条件 1 为 true 时执行的代码块
} else if (条件 2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
条件 1 和条件 2 同时为 false 时执行的代码块
}
for loop:
javascript
for(var i=0; i<count; i++){
循环做的事情
}
//方法:
document.getElementsByName() //返回的是一个列表对象
document.getElementById() //返回的是一个元素对象
document.createTextNode() //创建文本节点
document.createElement() //创建元素节点
nodeobj.appendCgild() //添加子节点
//属性:
object.innerHTML //当前标签对象里面嵌套的HTML信息
object.value //用户输入的信息值
object.src //获取图片的路径，通过赋值方式可以实现修改图片路径
object.checked //判断当前多选框是否被选中
4. BOM
Browser Object Model The Browser Object Model (Browser Object Model (BOM)) allows JavaScript to talk to the browser
BOM (Browser Object Model) refers to the browser object model, which is used to describe the hierarchical relationship between such objects and objects. The browser object model provides an object structure that is independent of content and can interact with the browser window . The BOM is composed of multiple objects. The Window object representing the browser window is the top-level object of the BOM, and the other objects are all sub-objects of the object.
The main function:
The ability to pop up a new browser window; the ability to
move, close, and change the size of the browser window;
the navigation object that
can provide detailed information about the WEB browser; the local object that
can provide detailed information about the page loaded by the browser; Screen objects with detailed information;
Cookies are supported;
Internet Explorer extends the BOM to include ActiveX object classes, which can be implemented through JavaScript.
Fifth, JavaScript events
HTML events are "things" that occur on HTML elements.
When JavaScript is used in HTML pages, JavaScript can "cope with" these events.
1) HTML events:
HTML events can be something that browsers or users do.
Here are some examples of HTML events:
HTML page finished loading
HTML input field was modified
HTML button was clicked
1. onsubmit event
onsubmit event: submit event, onsubmit event will occur when the confirm button in the form is clicked.
Implement a user login data verification
Case: Implement simple user login verification:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkForm() {
//获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值
var username = document.getElementsByName('username')[0].value;
// 判断用户名是否为空， 如果为空， 报错
if (username === '') {
// ==： ‘5’== 5 true 只比较值是否相等
// === '5'===5 false 比较值和类型是否相等
alert("用户名为空");
}
// 判断密码长度是否大于6， 如果不大于6， 直接报错;
var password = document.getElementById('pwd').value;
var pwd_length = password.length;
if (pwd_length < 6) {
alert("密码长度小于6位");
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<!--
当提交登录信息的时候， 执行函数checkForm实现用户的校验
第一个事件类型: onsubmit
-->
<form action="#" method="get" οnsubmit="return checkForm()">
<input type="text" name="username" placeholder="用户名"><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
2. Onfocus and onblur events:
onfocus event: focus event, onfocus event occurs when the object gets focus.
onblur event: Defocus event, onblur event will occur when the object loses focus.
In order to make the user experience better, when the mouse clicks on the box of the user name, the right side prompts for the requirement of inputting the user name and password. When leaving the box, it is checked whether the user name and password are correct.
During our usual login process, there are generally requirements and prompts related to the input content behind the username and password fields, and the warning box will not always pop up. How should this requirement be realized? Then you need to use focus and defocus events.
Therefore, the above user login verification codes are improved as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTips() {
var usertipsObj = document.getElementById('usertips');
var info ='<span style="color: gray">用户名长度大于2</span>';
// alert(usertipsObj.innerHTML);
usertipsObj.innerHTML = info;
}
function checkUser() {
//获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值
var username = document.getElementsByName('username')[0].value;
// 判断用户名是否为空， 如果为空， 报错
var usertipsObj = document.getElementById('usertips');
if (username.length <= 2) {
usertipsObj.innerHTML = '<span style="color: red">用户名长度不大于2</span>'
}else{
usertipsObj.innerHTML = '<span style="color: green;">ok</span>'
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<form action="#" method="get">
<!--onfocus聚焦事件， 如果聚焦， 执行函数showUserTips()-->
<input type="text" name="username" placeholder="用户名" id='user' οnfοcus="showUserTips()" οnblur="checkUser()">
<span id="usertips"></span><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
The page display effect is as follows:
When not entered: When the
length of the input user name is less than 2: When the length of the input user name is less than 2: When the 
length of the user name is
correctly entered:
At this time, the login is successful!
