[javascript learning] js syntax basics-JS Tutorial-php.cn

This article systematically organizes the grammar of JavaScript. The knowledge points are very complete and basic. It can be used as a reference when studying. The review is also very systematic. There is no need to read books. The knowledge points in the books are very scattered. After reading them It's a waste of time. If you don't mind it, you can save it for future reference. Being helpful to everyone is my motivation to continue writing articles. I am also happy to share my knowledge with everyone.

1-1 The starting point for learning JavaScript is to process web pages. We first learn how to use DOM for simple operations.

我是第一段文字

我是第二段文字

document.write("hello"); # 输出文本 document.getElementById("p1").style.color="blue"; # 第一段文字变蓝色了 Copy after login 1-2 Internal reference

1-3 External reference

1-4 is generally placed in the head or body part of the web page:

Put it in the part

The most common way is to place it in the head part of the page Place the element, and the browser will execute this code when parsing the head section, and then parse the rest of the page.

Put it in the part

The JavaScript code will be executed when the web page reads this statement. If the function is executed through an event call, there is no requirement for the location.

1-5 JavaScript statements are commands sent to the browser.

1-6 Comments // or /* */

##1-7 var variable names are case-sensitive

1-8 if statement if(条件) 注意：没有分号哦。 { 条件成立时执行的代码 } else { 条件不成立时执行的代码 } Copy after login

1-9 Function function add2(){ var sum = 3 + 2; alert(sum); } Copy after login

Call: add2()

1-10 String method

2-2 alert

No other operations can be performed before clicking the "OK" button in the dialog box.

Message dialog boxes can often be used to debug programs.

alert output content, which can be a string or variable, similar to document.write.

2-3 confirm

confirm message dialog box is usually used to allow the user to make a choice action , such as: "Are you right?" etc. Pops up a dialog box (including an OK button and a Cancel button). var mymessage=confirm("你喜欢JavaScript吗?"); Copy after login

2-4 promte

Pop-up message dialog box, usually used to ask some information that needs to be interacted with the user . Pops up a message dialog box (including an OK button, a Cancel button and a text input box). prompt(str1, str2); Copy after login

Parameters:

str1: Text to be displayed in the message dialog box, cannot be modified

str2: Text The content in the box can be modified

Click the OK button in the dialog box, and the content in the text box will be used as the function return value; click the Cancel button in the dialog box, and null will be returned

2-5 Open a new window window.open([URL], [窗口名称], [参数字符串]) Copy after login

Parameters:

URL : Optional parameters, in the window The URL or path of the web page to be displayed. If this parameter is omitted, or its value is an empty string, no document will be displayed in the window.

Window name : Optional parameter, the name of the opened window.

The name consists of letters, numbers and underscore characters.

"_top", "_blank", "_self" are names with special meanings.

_blank: Display the target web page in a new window

_self: Display the target web page in the current window

_top: Display the target webpage in the upper window of the frame webpage

Only one window with the same name can be created. If you want to create multiple windows, the names cannot be the same.

name cannot contain spaces.

Parameter string : Optional parameter, set window parameters, each parameter is separated by commas.

window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') Copy after login

2-6 Close window window.close(); //关闭本窗口 或 window.close(); //关闭本窗口 Copy after login

Close New window var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中 mywin.close(); Copy after login

Note: The above code closes the window while opening a new window, and the opened window cannot be seen.

2-7 slightly 3-1

认识DOM文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

元素节点：上图中 、 、 等都是元素节点，即标签。

文本节点:向用户展示的内容，如 ... 中的JavaScript、DOM、CSS等文本。

属性节点:元素属性，如 标签的链接属性href="http://www.imooc.com"

3-2 通过ID获取元素

document.getElementById(“id”) Copy after login 该示例打印并非理想结果，是因为从浏览器读取html文件来说，是从上到下读取的：如果将JavaScript放在head中，HTML文件读取时会先读取并执行JavaScript的内容，然后才会执行body标签内的内容；如果放在body标签内，HTML文件读取时，会先读取在JavaScript前面的内容，再读取JavaScript的内容；

从上面这个原理与课程结合进行分析：

结果为null是因为，JavaScript没有找到id名为“con”的标签，所以返回null。

结果为 [object HTMLParagraphElement] ，则说明JavaScript找到了id名为“con”的标签，以对象的形式返回该标签

但是我们发现在HTML中明明存在id=“con”的标签，这又是怎么回事？这是因为，前面说的浏览器读取HTML文件，是从上到下读取的：

如果将JavaScript放在id=“con”的标签之前，这就导致了浏览器在读取HTML文件时，JavaScript先读取，读取完JavaScript后，才开始读取到id=“con”的标签，这就是说JavaScript读取时是没有读取到id=‘con’的标签，只能返回null，表示没有读取到该标签

如果将JavaScript放在id=“con”的标签之后，在浏览器读取HTML文件时，先读取到了id="con"的标签，才读取JavaScript，这时由于id="con"的标签名存在，JavaScript可以发现，所以以对对象的形式（[object HTMLParagraphElement]）返回该标签

要返回正确的结果应该在前后加双引号或者在mychar变量后加上.innerHTML

3-3 innerHTML属性

获取元素内容

var mychar= document.getElementById("con"); document.write("原标题:"+mychar.innerHTML+" "); //输出原h2标签内容 mychar.innerHTML = 'Hello world!' document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容 Copy after login 3-4 改变 HTML样式

Object.style.property=new style; //Object是获取的元素对象 Copy after login

3-5 显示和隐藏

Object.style.display = value Copy after login

3-6 控制class属性 元素

object.className = classname 注意中间有个大写的N Copy after login 进阶内容 2-2

变量取名 规则：

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:

变量名区分大小写，如:A与a是两个不同变量。

不允许使用JavaScript关键字和保留字做变量名。

2-9 “&&”表示and 操作符

2-10 "||" 或

2-11 "!" 否

2-12 操作符之间的 优先级 （高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

3-1 数组

3-2

var myarray= new Array(8); //创建数组，存储8个数据。 Copy after login 注意：

1.创建的新数组是空数组， 没有值，如输出，则显示undefined 。

2.虽然创建数组时，指定了长度，但实际上 数组都是变长的 ，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

3-3 添加元素

只需 使用下一个未用的索引 ，任何时刻可以不断向数组增加新元素。

myarray[5]=88; //使用一个新索引，为数组增加一个新元素 Copy after login 3-6 length属性

myarray.length; //获得数组myarray的长度 Copy after login 相关推荐：

JavaScript学习笔记之基础语法

整理Javascript基础语法学习笔记

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

[javascript learning] js syntax basics