Home Web Front-end JS Tutorial Organize Javascript basic introductory study notes_javascript skills

Organize Javascript basic introductory study notes_javascript skills

May 16, 2016 pm 03:29 PM
javascript

Understand what a variable is?
Variables are containers used to store information
Variable declaration
Syntax:

var variable name
Variable name = value;
Variables must be declared first and then assigned
Variables can be assigned repeatedly
Naming rules for variables

  • Variables must start with a letter;
  • Variables can also start with $ and _ symbols (but we don’t recommend this);
  • Variable names are case-sensitive (a and A are different variables).

1. Statement
The statement ends with a semicolon; if the semicolon is omitted, the parser determines the end of the statement.
Good coding habits should end with ;

2. Data type
In JavaScript, a piece of information is a value. Values ​​come in different types, the most familiar type being numbers. A string value is one or more words enclosed in quotation marks.
Number Any numeric value. The number can be with or without a decimal point 68.57
String Characters in quotes. You can use single or double quotes "hello, world"
Boolean true or false true
Undefined and Null This value Undefined means that the variable does not contain a value. A variable can be cleared by setting its value to null. 
Object Any value associated with the object
Function Value returned by the function

var a; //a为undefined
var a = 6; //a 为数字
var a = "Jason"; // a 为字符串
Copy after login

3. What is a function?
A function is a set of JavaScript statements that perform a certain task
Basic syntax:

function 函数名(){
 函数代码;
}
Copy after login

Function name();
Description:
function defines the function keyword.
"Function name" is the name you gave the function.
"Function code" is replaced with code that accomplishes a specific function.
"Second function name" is a type of function call

 function add2(){
 var sun = 3 + 2;
 alert(sun);
 }
 add2();//调用函数直接写函数名直接弹出函数代码
 <input type="button" value="点击我" onclick="add2()" />
 <!-- 单击按钮后,调用函数,onclick为点击事件 -->
Copy after login

4. Output content (document.write)
document.write() directly outputs the content in the web page.
First method: The output content is enclosed in "", and the content within the "" sign is output directly.

document.write("I love JavaScript!");
Copy after login

Second type: output content through variables

var mystr = "hello world";
document.write(mysrt);//直接写变量名,输出变量存储的内容
Copy after login

The third type: output multiple contents, and use symbols to connect the contents.

var mystr = "hello";
document.write(mystr + "I love Java Script");//多项内容之间用+号连接
Copy after login

The fourth method: output HTML tags and work. The tags are enclosed in "".

var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
document.write("JavaScript");
Copy after login

5. Warning (alert message dialog box)
When we visit the website, sometimes a small window will suddenly pop up with a prompt message written on it. If you don't click "OK", you can't do any operations on the web page. This small window is implemented using alert.
Syntax: alert (string or variable);

var mynum = 30;
alert("hello!");
alert(mynum);
Copy after login

Result: Pop up message boxes in sequence (alert popup message dialog box contains an OK button)
Note:
1. No other operations can be performed before clicking the "OK" button in the dialog box.
2. Message dialog boxes can often be used to debug programs.
3. alert output content, which can be a string or variable, similar to document.write

6. Confirm selection (confirm message dialog box)
In addition to providing information to users, we also hope to obtain information from users. The confirm message dialog box is used here.
The confirm message dialog box is usually used to allow the user to make a choice, such as: "Are you right?" etc. Pops up a dialog box (including an OK button and a Cancel button).
Syntax: confirm(str);
Parameter description: str: text to be displayed in the message dialog box Return value: Boolean value
Return value:
When the user clicks the "OK" button, returns true
When the user clicks the "Cancel" button, return false
Note: The return value can be used to determine which button the user clicked

<script type="text/javascript">
 var mymessage=confirm("你喜欢JavaScript吗&#63;");
 if(mymessage==true){
   document.write("很好,加油!"); 
  }else{
   document.write("JS功能强大,要学习噢!");
  }
 </script>
Copy after login

7、提问(prompt 消息对话框)
有时候,不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
语法:

prompt(str1,str2);
参数说明:
str1:要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
1、点击确定按钮,文本框中的内容将作为函数返回值
2、点击取消按钮,将返回null

 function rec(){
  var score; //score变量,用来存储用户输入的成绩值。
  score = prompt("请输入你的成绩","90");
  if(score>=90){
   document.write("你很棒!");
  }else if(score>=75){
   document.write("不错吆!");
  }else if(score>=60){
   document.write("要加油!");
  }else{
   document.write("要努力了!");
  };
 } ; 

 <script>
  var myName = prompt("输入您的名字");
   if(myName != null && myName != ""){
    document.write("welcom to" + myName);
   }else{
    document.write("welcom to my friend");
   }
</script>

Copy after login

8、打开新窗口(window.open)
语法:

window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2.窗口名称:可选,该字符串是一个由逗号分隔的特征列表,声明了被打开窗口的名称。可以 是"_top"、"_blank"、"_selft"、"_parent"等。
_blank 在新窗口显示目标网页
_selft 在当前窗口显示目标网页
_parent 框架网页中当前整个窗口位置显示目标网页
_top 框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:
top    Number  窗口顶部离开屏幕顶部的像素数
left    Number  窗口左端离开屏幕左端的像素数
width    Number  窗口的宽度
height    Number  窗口的高度
menubar    yes,no  窗口有没有菜单
toolbar    yes,no  窗口有没有工具条
scrollbars    yes,no   窗口有没有滚动条
status      yes,no   窗口有没有状态栏

 <script type="text/javascript">
  window.open('http://','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
 </script>
Copy after login

9、关闭窗口(window.close)
close()关闭窗口
用法:

window.close();//关闭本窗口
 <窗口对象>.close();//关闭指定的窗口
Copy after login

例如:关闭新建的窗口。

 <script type="text/javascript">
  var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象,存储在变量mywin中
  mywin.close();
 </script>
Copy after login

10、innerHTML属性
innerHTML属性用于获取或替换HTML元素的内容。
语法:

Object.innerHTML
Object是获取的元素对象,如通过document.getElementById("ID")获取元素。

<h2 id="con">javascript</H2>
 <script type="text/javascript">
   var mychar=document.getElementById("con");
   document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
   mychar.innerHTML="hello world"
   document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
 </script>
Copy after login

11、改变HTML样式
语法:

Object.style.property=new style;
注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素

<h2 id="con">I love JavaScript</h2>
 <script type="text/javascript">
 var mychar= document.getElementById("con");
 mychar.style.color="red";
 mychar.style.background="#ccc";
 mychar.style.width="300px";
 </script>
Copy after login

12、显示和隐藏(display属性)
语法:

Object.style.display = value
value值:
none 此元素不会被显示(及隐藏)
block 此元素将显示为块级元素(即显示)

mychar.style.display = "block"

13、控制类名(className属性)
className属性设置或返回元素的class属性。
语法:

object.className = classname
作用:
1、获取元素的class属性
2、为网页内的某个元素指定一个css样式来更改该元素的外观

p2.className = "two";
以上就是整理的javascript的基础知识学习笔记,希望对大家的学习有所帮助。

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1268
29
C# Tutorial
1246
24
How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to use insertBefore in javascript How to use insertBefore in javascript Nov 24, 2023 am 11:56 AM

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

JavaScript and WebSocket: Building an efficient real-time image processing system JavaScript and WebSocket: Building an efficient real-time image processing system Dec 17, 2023 am 08:41 AM

JavaScript is a programming language widely used in web development, while WebSocket is a network protocol used for real-time communication. Combining the powerful functions of the two, we can create an efficient real-time image processing system. This article will introduce how to implement this system using JavaScript and WebSocket, and provide specific code examples. First, we need to clarify the requirements and goals of the real-time image processing system. Suppose we have a camera device that can collect real-time image data

See all articles