search
HomeWeb Front-endJS TutorialExplanation of JavaScript related content

1. JavaScript Introduction:

JavaScript is the most popular scripting language on the Internet, and all modern HTML uses JavaScript. Since it is a scripting language, it has three characteristics:

(1) Weak type;

(2) Interpreted type Language (no compilation required);

(3) Line by line execution, if one line of code is wrong, subsequent code blocks will not continue to execute;

(4) The <script> tag can be directly embedded into the HTML file. The position is arbitrary. <span style="background-color:rgb(255,255,255);">It is usually placed below the modified content or in the head tag, but writing it as a separate js file is conducive to the separation of structure and behavior</script>

2.JavaScript content (with pictures):

##​


## Where ECMAScript is the core of JavaScript;

DOM It is the document object model (using js to operate the web page);


BOM is the browser object model (using js to operate the browser)


3. JavaScript information output:

(1) alert() method: in the form of a prompt box on the page Output, for example;


<script>
    alert("hello,javascript")
</script>
(2) console.log() method: output information on the console, for example:

console.log("hello,javascript")

(3) document.write() : Write the content directly in the HTML page, for example:

document.write("hello,javascript")

4. JavaScript variable: ## Unlike Java, ECMAScript The variables in have no specific type. When defining a variable, only use the var operator. It can be initialized to any value. The initialization format of the variable: var variable name = variable value; example:

var a = "hello";
var b = 123;

If you want to define multiple variables, you can write multiple variables on one line and separate them with commas; example:

var a = "你好",
    b = 123,
    c = "hello";
Variable rules for variable names:

(1)

consists of letters, numbers, underscores, and $ symbols

(2) It cannot start with a number, and it is not recommended to start with an underscore;

(3 ) Strictly case-sensitive;

(4) Cannot be keywords and reserved words

5. JavaScript data type:

JavaScript can be divided into two types: primitive data types and reference data types:

(1) Primitive data types: Number, String, Boolean, undefined, null

Number

: Numeric type, is a number, including positive numbers, negative numbers, integers, decimals, 0, NaN, Infinity (positive infinity), -Infinity (negative infinity); Note:

NaN: abbreviation of not a number, indicating that the value is not a numerical value (also belongs to Number)

    String字符串:用双引号""或单引号''包起来的0个或多个字符,如果引号中什么也没有,那么这个字符串被称为空字符串

    Boolean布尔型:包含true:表示真(成立)和false:表示假(不成立)两个值

    undefined表示变量未定义,或变量被定义出来,但是没有被赋值

    null表示一个变量没有指向任何一片存储空间,即变量存在,但是里面是空的,类似于Undefined

    (小提示:在Chrome浏览器控制台输出时,会发现Number类型为深蓝色,String为黑色,Boolean为浅蓝色,undefined和null都为浅灰色)

    (2)引用数据类型:

    Object(对象),Array(数组),Date(日期),RegExp(正则)。。等等

    (3)如何查看一个变量的数据类型(typeof 运算符):        

             数值型数据:返回值为number   

console.log(typeof 123)   //输出number

             字符串型数据:返回值为string

console.log(typeof "你好")  //输出string

             布尔型数据:返回值为boolean

console.log(typeof true/false)    //输出boolean

             Undefined:返回值为undefined

console.log(typeof undefined)   //输出undefined

             Null:返回值为Object(历史遗留问题,说明null也是一个对象)

console.log(typeof null)     //输出object

             NaN:返回值为number

console.log(typeof NaN)    //输出number

6.JavaScript 数据类型的转换:

    (1)在使用加法(+)运算符时,任何数据与字符串类型数据相加都为字符串类型数据;

console.log("你好" + 123)    //输出"你好123"

        注(简单理解): 在JavaScript 中空字符串""转换为false,非空字符串转换为true(除“0”,“1”外);

                false转换为 0 或“0”,true转换为 1 或“1”;

                做逻辑判断的时候,null,undefined,""(空字符串),0,NaN都默认为false;

                ==在比较的时候可以转换数据类型,===是严格比较,只要类型不匹配就返回false;

                    其实 == 的比较确实是转换成字符串来比较但,但是在布尔型转换为字符串之前,要先转换成 Number

console.log("123" == true)    //输出false
console.log("1" == true)     //输出true
console.log("" == true)     //输出false
console.log(1 == true)     //输出true

console.log("" == false)    //输出true
console.log(&#39;123&#39; == false)   //输出fasle
console.log(&#39;0&#39; == false)    //输出true
console.log(0 == false)    //输出true

console.log(&#39;1&#39; == 1)     //输出true
console.log(&#39;0&#39; == 0)	  //输出true
console.log(-true)     //输出-1

(2)parseInt:将字符串转换成整数(只识别字符串中的数值):

        注:会忽略字符串中的前后空格(当数值后的空格后面还有数值时,将不会再识别);

               能够正确识别正负号,即保留正负号;

               在转换时,遇到非数值型的字符就会停止转换;

               如果字符串的第一个字符是非数值型的,那么转换的结果为NaN;

console.log(parseInt("123"))    //输出123
console.log(parseInt(" 1 2"))    //只会输出1
console.log(parseInt(-123))     //输出-123
console.log(parseInt("hello"))    //输出NaN
console.log(parseInt(true))       //输出NaN
console.log(parseInt("123hello"))    //输出123,后面非数值型不会识别
console.log(parseInt(" 1 "))     //输出1,忽略空格

(3)parseFloat:将字符串转换成小数(识别小数点,注意事项同上)

console.log(parseFloat("123.55"))    //输出123.55
console.log(parseFloat(".1hello"))    //输出0.1

(4)Number:将其它类型的数据转换成数值型,注意被转换的数据必须是纯数值构成,否则无法转换,其它注意事项同上

console.log(Number(true))	//1
console.log(Number(false))    //0
console.log(Number(null))    //0
console.log(Number("123hello"))    //NaN
console.log(Number("12.22"))    //12.22
console.log(Number(undefined))    //NaN

(5)页面中的信息框:

        alert(),弹出个提示框,只有确定;

window.alert("今天天气很好")


        confirm(),弹出个确认框,有确定和取消;

window.confirm("今天心情也很好")


        prompt(),弹出个输入框,可以输入内容;

window.prompt("password","请输入密码")



JavaScript的基础暂时先写到这里,后续都会补上。。。

本文讲解了JavaScript相关的内容讲解,更多相关之请关注php中文网。

相关推荐:

关于HTML基础的讲解

$.ajax+php实战教程之下拉时自动加载更多文章原理讲解

关于zx-image-view图片预览插件,支持旋转、缩放、移动的相关操作

The above is the detailed content of Explanation of JavaScript related content. For more information, please follow other related articles on the PHP Chinese website!

Statement
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
How JavaScript Engines Work: A V8 Deep DiveHow JavaScript Engines Work: A V8 Deep DiveAug 18, 2025 am 12:16 AM

V8parsesJavaScriptintoanASTusingapre-parserandfullparsertooptimizeloading.2.Ignitiongeneratesbytecodeandcollectstypefeedbackduringexecution.3.TurboFancompilesfrequentlycalledfunctionsintooptimizedmachinecodeusingtypespecialization,inlining,anddeadcod

Common reasons and solutions for redirection failure after login of React applicationCommon reasons and solutions for redirection failure after login of React applicationAug 17, 2025 pm 01:54 PM

This article aims to explore common problems in React apps where users cannot correctly redirect to the homepage after logging in. The core reason is the timing problem in state management and component life cycle, that is, loggedIn status is not updated in time before navigation. By updating the loggedIn status immediately after successful login and combining the correct use of useEffect, this problem can be effectively solved to ensure the smoothness of the user experience.

Resolve the MERN Stack User Registration Form 404 Error: Detailed Tutorials and SolutionsResolve the MERN Stack User Registration Form 404 Error: Detailed Tutorials and SolutionsAug 17, 2025 pm 01:51 PM

This article aims to help developers solve 404 errors encountered when submitting user registration form in MERN (MongoDB, Express.js, React.js, Node.js) stack application. We will analyze the causes of errors in depth, provide detailed solutions, and provide sample code and considerations to ensure you successfully implement user registration. At the same time, CORS configuration will also be involved to ensure that the front-end and back-end can communicate normally.

Debugging Guide to Solving the Online Playback Problem of Web Media Files: Taking Cache and Path Issues as ExamplesDebugging Guide to Solving the Online Playback Problem of Web Media Files: Taking Cache and Path Issues as ExamplesAug 17, 2025 pm 01:39 PM

This article aims to explore in-depth common problems in web applications where media files (such as MP3 and MP4) run locally but fail after deployment online. We will analyze potential technical reasons, especially browser cache, file path and server configuration, and provide a system debugging method, emphasizing the use of browser developer tools for troubleshooting to help developers solve such deployment problems efficiently and ensure stable playback of media content in production environments.

Exploration of the principle of JavaScript DOM update: Interaction between JS engine and native DOMExploration of the principle of JavaScript DOM update: Interaction between JS engine and native DOMAug 17, 2025 pm 01:36 PM

This article deeply analyzes the underlying mechanism of DOM update in JavaScript. The JS engine does not directly perform DOM operations and property updates, but communicates with the browser's native DOM engine through a standardized set of APIs. DOM element attributes such as previousElementSibling are manifested as dynamic getters in JS. They query the status of the native DOM in real time during access to ensure that the data is always synchronized. This separation of responsibilities design allows browsers to efficiently manage DOM and provide consistent behavior.

Use URL hash to implement Bootstrap tab page state persistence and direct linkingUse URL hash to implement Bootstrap tab page state persistence and direct linkingAug 17, 2025 pm 01:21 PM

This tutorial details how to use URL hash (the part after the # symbol) to solve the problem of the Bootstrap tab's status loss after the page is refreshed. By reading the URL hash when the page is loaded and activate the corresponding tag and updating the URL hash when the tag is clicked, users can achieve persistence of the tag page status and can directly access specific tag pages through the hashed URL, improving user experience and page shareability. The article provides complete JavaScript implementation code and detailed explanation.

Bootstrap 5 and E-junkie cart integration problem and solutionBootstrap 5 and E-junkie cart integration problem and solutionAug 17, 2025 pm 01:03 PM

This document is intended to address compatibility issues encountered when integrating Bootstrap 5 with E-junkie carts. Since E-junkie introduces a simplified jQuery version by itself when detecting that the page is not loaded, Bootstrap 5 misjudgment and attempts to use the simplified version, which raises an error. This article will provide two solutions: one is to manually introduce the complete jQuery library and jQuery Migrate, and the other is to inform Bootstrap 5 to disable jQuery integration.

Implementing Stripe custom payment process with Angular 14Implementing Stripe custom payment process with Angular 14Aug 17, 2025 pm 12:45 PM

This article will introduce how to integrate Stripe payments in Angular 14 projects and implement custom payment processes to avoid using the stripe-ngx library and its default pop-up styles. We will focus on how to catch payment success events in Angular components, avoid page jumps, and resolve clientSecret errors that you may encounter when using Stripe JS checkout.

See all articles

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

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.

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

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Hot Topics