Manual de inicio rápido de JavaScript

Primero, familiarícese con JavaScript

1. Introducción

JavaScript es un lenguaje de secuencias de comandos que se ejecuta en el navegador, abreviado como js. No necesita compilarse manualmente y se guarda en forma de documento ordinario. El sufijo es ".js". Al emitir comandos al navegador, puede lograr funciones dinámicas de página e interacción con el usuario

2. Composición

El programa JavaScript está compuesto de declaraciones, bloques de instrucciones (las instrucciones de varias líneas están encerradas en "{}", la función es hacer que la secuencia de instrucciones se ejecute juntas), funciones, objetos, métodos, atributos, etc., que están controlados por tres programas básicos: secuencia, selección y bucle. Estructura.

3, puntos a tener en cuenta

";" Al final de cada declaración puede agregarse o no agregarse
. Las variables pueden asignarse o no asignarse al declarar variables. Las
cadenas pueden usar comillas simples o dobles

En segundo lugar, cómo introducir archivos JavaScript.

1. Escriba directamente donde sea necesario

El evento se implementa vinculando directamente el identificador del evento (el identificador del evento es agregar directamente "on" antes del evento, como "hacer clic", el identificador del evento es "onclick"). En este caso, el evento de clic del mouse se activa mediante el identificador de evento "onclick".

 <input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码">

2. Método de bloqueo de secuencia de comandos (igual que la hoja de estilo en línea CSS)

Expuesto en el bloque de script, ejecutado cuando la página se abre y se ejecuta en
orden de arriba hacia abajo (este código se ejecuta sin eventos).

 <script type="text/javascript">
        document.write("第一个JavaScript实例")
        alert("第一个JavaScript实例")
    </script>

3. Introducir independiente (misma hoja de estilo externa CSS)

Asigne el archivo de script js en la ubicación requerida.
Cuando se introduce un archivo js externo independiente, el código en el archivo js se ejecutará línea por línea en orden de arriba a abajo.

<script type="text/javascript" src="../JavaScript文件/demo.js">
        document.write("src是可选属性,如果加上src属性,则script中的代码会被忽视——这行代码不会执行")
    </script>

Tres, sintaxis básica de JavaScript

1. Variables en js

Declaración variable

  • Java es un lenguaje fuertemente tipado.
    Java existe en la etapa de compilación, suponiendo que haya un código int: i; luego hay una característica en Java: el tipo de datos de la variable i se ha determinado en la etapa de compilación del programa Java, y el tipo de datos de la variable i se está compilando La etapa es de tipo int, luego esta variable siempre es de tipo int hasta la versión final de la memoria, y no se puede cambiar a otros tipos
  • JavaScript es un lenguaje de tipo débil.
    JavaScript no existe en la etapa de compilación. Se puede asignar una variable a voluntad, y se puede asignar cualquier tipo de valor. El tipo de variable se determina por el tipo del valor asignado, por lo que la declaración de variable usa "var" uniformemente
  • Por ejemplo (cómo declarar una variable en JavaScript):
 var i=1;(此时变量类型是整型)
 var i=3.14;(此时的变量名是浮点型)
 var i`=‘abc’;(此时变量的类型是字符串)
  • En JS, cuando una variable no se asigna manualmente, el sistema se establece de manera predeterminada como indefinido (aquí, un valor específico es indefinido en lugar de una cadena. Al acceder a una variable sin definición / declaración se informará un error de sintaxis: "variable "No está definido.

Tipos de variables.

  • indefinido
  • el número
    incluye enteros, decimales, números positivos, números negativos, no números, infinito
  • En ambos lados de la cadena
    "+", siempre que uno de ellos sea cadena, "+" realizará la operación de concatenación de cadenas
    . El resultado de 10/3 = 3.333333 (lenguaje débilmente escrito)
  • booleano
    tiene solo dos valores, verdadero y falso
  • objeto
  • subclase de objeto
  • NaN
    es un valor específico, lo que significa que no es un número "No es un número", el número singular es de tipo número
  • Variables globales Las variables
    declaradas fuera del cuerpo de la función pertenecen a variables globales. El período de declaración de las variables globales es:
    declarado cuando se abre el navegador y destruido cuando se cierra el navegador. Intente usarlas lo menos posible, porque las variables globales siempre estarán en la memoria del navegador y consumirán Espacio de memoria. Puede usar variables locales tanto como sea posible
  • Variables locales
    variables declaradas en el cuerpo de la función comprende una función de parámetros pertenece a una variable local
    ciclo de vida de las variables locales son: el espacio de memoria, de las variables locales se abren cuando la función se inicia la ejecución, después de que se ejecute la función, un espacio de memoria de variables locales en libertad
    parcial El ciclo de vida de la variable es relativamente corto.
    En una función, si la variable local y la variable global tienen el mismo nombre, la variable local se llama utilizando el "principio de proximidad"; la variable global se llama fuera del cuerpo de la función (porque la variable local se ha destruido en este momento )
    Cuando se declara una variable sin la palabra clave var, no importa dónde se declare la variable, es una variable global
//举个例子
function myfun(){
	name = "wangwu"
}
//访问函数
myfun();
alert("name="+name);//name=wangwu

2. Identificadores y palabras clave en js

  • Las reglas y especificaciones de nombres de identificadores se implementan de acuerdo con Java
  • Las palabras clave no necesitan ser memorizadas

3. Comentarios en js

  • Comentario de una sola línea:
//单行注释

/*
多行注释1
多行注释2
*/

4. Funciones en JavaScript

1. Cómo se define la función

  • Equivalente al método en el lenguaje Java, la función también es un fragmento de código que se reutiliza deliberadamente. Las funciones generalmente completan deliberadamente una función específica
  • Debido a que es un lenguaje de tipo débil, no es necesario especificar el tipo de valor de retorno, independientemente de la clase que se devuelva
  • Hay dos formas de definir funciones
第一种方式:
	function 函数名(形式参数列表){
				函数体;
		}
第二种方式:
	函数名 = function (形式参数列表){
				函数体;
		}
//其中,形式参数可以由也可以没有
//可以传指定的参数个数,也可以不传指定的参数个数
  • Se debe llamar a la función para ejecutar el
    método de llamada:
函数名(实际参数);
  • No hay un mecanismo de sobrecarga para las funciones en js
  • En java, la
    sobrecarga depende de la diferencia en el tipo y número de parámetro para lograr la sobrecarga
  • En js,
    js es un lenguaje de tipo débil. El tipo del parámetro de función no está definido artificialmente, sino que está determinado por el tipo del parámetro en sí mismo, por lo que no puede distinguir las diferentes funciones por el número y tipo de parámetros como java. Implementar sobrecarga
    Si dos funciones tienen el mismo nombre, la función detrás sobrescribirá la función anterior

2. Operadores y funciones especiales.

Caja de advertencia

  • Uso
  • alerta (masaje), utilizada para ingresar información de advertencia

Caja de aviso

  • Uso
  • confirmar (masaje), se utiliza para permitir al usuario confirmar la operación

Cuadro de confirmación

  • prompt ("información de solicitud", "predeterminado"), utilizado para mostrar información de confirmación
//示例
<!--三种消息对话框-->
    <script type="text/javascript">
        //alter(massage)
        alert("这是警告框,用于输出警告信息")

        function show_confirm(){
            //confirm(massage)
            var tf=confirm("请选择确认按钮!")
            if(tf==true){
                alert("您按了确认按钮")
            }else{
                alert("您按了取消按钮!")
            }
        }

        function disp_confirm(){
           //prompt("提示信息","默认值");
             var name=prompt("请输入您的姓名","李大为");
            if(name!=null && name!=""){
                document.write("您好",+"name")
            }
        }
       
    </script>

    <form action="" method="POST">
        <input type="button" onclick="show_confirm()" value="显示确认框"/>
        <input type="button" onclick="disp_confirm()" value="显示提示框"/>
    </form>

operador typoof

  • Uso
  • alerta (tipo de nombre de variable), puede obtener dinámicamente el tipo de datos de la variable durante la fase de ejecución del programa
- 运算结果是以下6个字符串之一
 “undefined”
 “number”
 “string”
 “boolean”
 “object”
 “function”
//例子
var v1 = 1;
alert(typeof v)//"number"

var v2 = "abc";
alert(typeof v)//"string"

Operador equivalente "=="

  • Uso
  • (Variable 1 == variable 2), solo juzgue si los valores son iguales

Operador congruente "==="

  • Uso
  • (Variable 1 === Variable 2), para juzgar si los valores son iguales y si los tipos de datos son los mismos

función isNaN

  • Uso
  • isNaN (datos), el resultado es verdadero significa un número, el resultado es falso significa que no es un número

función parsenInt ()

  • Uso
  • parseInt (datos), puede convertir automáticamente la cadena a un número y tomar bits enteros

función parseFloat ()

  • Uso
  • parseFloat ("cadena"), puede convertir cadenas automáticamente en números

Función Math.ceil ()

  • Uso
  • Math.ceil (número), puede redondearse

Función booleana ()

  • Uso
  • Booleano (datos), puede convertir el tipo no booleano en booleano, también puede omitir no escribir, como
if(3) 相当于 if(Boolean(3))

Cadena de funciones de uso común

  • longitud
    obtiene la longitud de la cadena
  • indexOf
    obtiene el índice de la primera aparición de la cadena especificada en la cadena actual
  • lastIndexOf
    Obtiene el índice de la última aparición de la cadena especificada en la cadena actual
  • reemplazar
    reemplazar
  • substr
    interceptar subcadena
  • subcadena
    intercepción subcadena
  • toLowerCase
    convierte minúsculas
  • toUpperCase
    convierte mayúsculas

  • cadena dividida

* Tenga en cuenta la diferencia entre substr y substring
var str = "avghsdkl"
substr (2,4) -intercept ghsd, incluyendo str [4]
substring (2,4) -intercept ghs, excluyendo str [4]
*

V. Definición de clases y objetos.

1. Definición de clase

Hay dos formas de definir

第一种方式:
	function 类名(形式参数列表){
		
		}
第二种方式:
	类名 = function (形式参数列表){
				
		}

2. Clase de objeto

  • Es una superclase de todos los tipos, cualquier tipo personalizado, hereda Object por defecto.
  • Incluyendo el atributo prototipo (comúnmente usado), puede extender dinámicamente el atributo de clase y el
    atributo constructor de funciones
  • Incluyendo la función toString ()
    valueOf () function
    toLocaleString () function
  • La clase definida en js hereda Object por defecto e integra todos los atributos y funciones en la clase Object

3. Creación de objetos.

new 构造方法名(实参);//构造方法名和类名一致
//定义一个学生信息函数
function Student(number,name,score){
	this.number = number;
	this.name = name;
	this.score = score;
}

//函数调用
Student(222,"Jack" ,54);

//创建对象(传几个参数都可以)
var stu1 = new Student();
var stu2 = new Student2(544);
var stu3 = new Student(32,"Helen");

var stu = new Student(111,"Rose",65);
//访问对象属性
alter(stu.number);
alter(stu.name);
alter(stu.score);

//访问对象的另一种方法
alert(stu["number"]);
alert(stu["name"]);
alert(stu["score"]);


4. objetos de cadena

Dos formas de crear

  • El primer tipo: crea directamente
    var s = "abc";
  • El segundo tipo: use la clase de soporte interno
    var s2 = new String ("abc");
    Cabe señalar que String es una clase incorporada que se puede usar directamente, y la clase padre de String es Object
//小String(属于原始类型String)
var x = "king";
alter(typeof x);//"string"

//大String(属于Object类型)
var y = new String("abc");
alter(typeof y);//"object"

6. Eventos y registro de eventos en JavaScript

1. Evento

  • el desenfoque
    pierde el foco

  • enfoque
    obtiene el foco

  • clic
    + clic


  • doble clic del mouse dblclick

  • pulsación del
    teclado

  • keyup
    rebote teclado

  • mouseDown
    el ratón hacia abajo

  • pasar el ratón
    encima del ratón

  • mousemove
    movimiento del ratón

  • mouseout
    hojas de ratones

  • mouseup
    ratón hacia arriba

  • restablecer restablecer
    formulario

  • enviar
    formulario

  • Cambiar las
    opciones en la lista desplegable

  • seleccionar
    texto está seleccionado

  • La
    página de carga se carga (ocurre después de que se cargan todos los elementos en toda la página HTML)

2. Registro de eventos

Regístrese directamente a través del controlador de eventos

  • Cualquier evento corresponderá a un identificador de evento
  • El atributo de identificador de evento existe

Registrarse con código js

Los siguientes son ejemplos específicos de los dos métodos.


function hello(){
	alter("事件的注册例子”);
}
//第一种方法
<input type="button" value="第一种方法" onclick="hello()"/>
/*
将hello函数注册到按钮上,等待onclick事件发生之后,该函数被浏览器调用,我们称这个为回调函数
回调函数的特点:自己把这个代码写出来了,但是这个函数不是自己负责调用的,由其他程序员负责调用该函数
*/

//第二种方法
<input type="button" value="第二种方法" id="mybtn"/>
<input type="button1" value="第二种方法1" id="mybtn1"/>
//第一步、先获取这个按钮对象
var btn = document.getElementById("mybtn");
//第二步、给按钮对象的onclick属性赋值
btn.onclick = hello;//注意:千万不要加小括号
   						 //这行代码的含义是:将回调函数hello注册到click事件上

//使用匿名事件注册
var btn1 = document.getElementById("mybtn1");
btn1.onclick = function(){
   aleter("使用匿名函数注册事件");
}

Siete, expresiones regulares

Publicado 2 artículos originales · ganó 0 · 99 visitas

Supongo que te gusta

Origin blog.csdn.net/Chen_Sir____/article/details/105483779
Recomendado
Clasificación