JavaScript basics simple version

JavaScript

1. Introduction to JavaScript

1. Introduction to JS

JS, the full name of JavaScript, is a scripting language provided by NetScape that is specially embedded and executed in browsers.

Main function: Used to realize animation effects and form verification in web pages.

JS can run on the server side (Node.js)

2. Characteristics of JS

• JS is a literal translation language (JS is interpreted and executed at the same time, there is no compilation process, what is executed is the source code)

• JS is an object-based language (there is no concept of classes in JS, and there is no compilation process. It can simulate object-oriented through certain mechanisms)

• JS is a weakly typed language (while Java is strongly typed)

  //在java中,变量一旦声明,就属于固定的数据类型,不能被改变
  String str = "abc";
  int number = 100;
  

  // 在JS中,变量是不区分类型的,可以指向任意的数据类型
  var s = 100;//number(数值类型)
  s = "abc";//String(字符串类型)
  s = true;//boolean(布尔类型)
  s = [];//object(对象类型)
  s = function(){
       
        
        }//function(对象类型)
  
  

3. Advantages of JS

1. JS has good interactivity

2. JS has certain security (can only run inside the browser and cannot access resources outside the browser)

3. JS is cross-platform

   The reason why JS is said to be cross-platform is because JS runs on the browser. But what needs to be noted is:

   • The JS language is cross-platform because there are browsers, but browsers are not cross-platform!
   • In the same way, the ava language is cross-platform because of the JVM, but the JVM is not cross-platform.

4. How to write JS in HTML

Method 1: You can write JS code inside the script tag:

You can add a script tag inside the head or body tag, and write JS code directly inside the script tag!

<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type="text/javascript">
	//JS的单行注释
	/* JS的多行注释 */
	alert( "在html中引入JS的第一种方式..." );
</script>

Method 2: Introduce external JS files through script tags

Inside the head or body tag, external JS files can be introduced through the script tag. For example:

<!-- 通过script标签可以引入外部的JS文件 -->
<script src="demo.js"></script>

Note: (1) Do not write JS code inside the script tag that introduces the js file, for example:

<script src="demo.js">
	alert( 111 ); //这里的代码不会执行
</script>

(2) Do not close the script tag that imports the JS file, because it may cause the file to fail to be imported, as follows:

<script src="demo.js" />

Method 3: You can also write JS code directly on the element

<!-- 直接在元素上书写JS代码：
onclick属性用于给当前元素绑定点击事件：点击元素就会触发事件，执行相应函数
-->
<input type="button" value="点我~" onclick="alert('叫你点你还真敢点啊!!!')"/>
<input type="button" value="别点我"  onclick="console.log( new Date() )"/>

onclick、ondblclick事件
1. onclick是点击事件,在被绑定了该事件的元素上点击后,会立即触发事件,执行所指向的函数
2. ondblclick是点击事件,区别是需要双击才可以触发事件,执行所指向的函数

2. JavaScript syntax

1. Comment format

The comment symbols of JS are the same as the comment symbols of Java, as follows:

// 单行注释内容
/* 多行注释内容 */

2. Data type

1. Basic data types

(1) Numeric type (number)

In JS, all values ​​​​are floating point types at the bottom, but they are automatically converted to integers during processing and display.

例如：2.4+3.6=6
特殊值：Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)【No a Number】

(2) String type (string)

In JS, the string type is a basic data type, and string constants can be enclosed in single quotes or double quotes. For example:

var s1 = "Hello JS";
var s2 = 'Hello JS';

In addition, the string type in JS has a corresponding packaging object (String), which will be automatically converted to the packaging object when needed.

var s1 = "Hello JS"; //基本数据类型, string
console.log( typeof s1 ); //string
var s2 = new String("Hello JS"); //复杂数据类型, object
console.log( typeof s2 ); //object
//不管是基本数据类型s1, 还是对象类型s2, 都可以当作对象来用
console.log( s1.valueOf() ); //s1是基本数据类型, 会转成对象, 调用valueOf函数
console.log( s2.valueOf() );

(3)Boolean type (boolean)

There are two values ​​of Boolean type, true and false.

(4)undefined type

There is only one value of type undefined, which is undefined, which means that the variable is undefined (but it does not mean that the variable is not declared).

It means that if a variable is declared but no value is assigned to the variable, the value of the variable is undefined.

/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常

(5)null type

There is only one value of type null, which is null, which represents an empty value.

Can be used as the return value of a function, indicating that the function returns an empty object.

Note: Null and undefined type variables cannot call functions or properties, and an exception will be thrown!

2. Complex data types

Mainly refers to objects (JS built-in objects, custom objects, functions, arrays)

3. Variable declaration

In JS, varvariables are declared through keywords. The declared variables are not type-sensitive and can point to any data. For example:

var x