How to use javascript code-Front-end Q&A-php.cn

Javascript is a widely used programming language that can be used in many fields such as web development, desktop software, and mobile application development. This article will introduce how to use Javascript code to help beginners get started quickly.

1. Create Javascript code

Introducing Javascript code into HTML files is the most common way. In the HTML code, Javascript code is introduced through the tag, for example:

// 在这里写JavaScript代码 Copy after login You can also save the Javascript code as a separate .js file and then introduce it in the HTML file. For example, we can create a file named "script.js" and reference it in the HTML file:

Copy after login 2. Variables

Variables are used to store data in Javascript. You need to use the keyword var when creating a variable, for example:

var name = "John"; Copy after login The above code creates a variable name and assigns the string "John" to this variable. In Javascript, variables are dynamically typed, that is, the type of the variable can change dynamically. For example, we can change the value of the variable name above to a numeric type:

var name = 10; Copy after login The name of the variable can be composed of letters, numbers, underscores, and dollar signs, but it cannot start with a number. Variable names are case-sensitive.

3. Data types

Javascript has a variety of data types, including strings, numbers, arrays, objects, etc.

String String is a data type used to represent text and can be enclosed in single quotes or double quotes. For example:

var name = "John"; var greeting = 'Hello'; Copy after login Numbers Numbers in Javascript are divided into integer and floating point types. For example:

var age = 18; var price = 9.99; Copy after login Array Array is a data type used to store a set of data. Each element of the array can be of any data type. When declaring an array, you need to use square brackets [] and separate each element with a comma. For example:

var fruits = ["apple", "orange", "banana"]; Copy after login You can access array elements by index, and array index starts from 0. For example, access "apple" in the above array:

var fruit = fruits[0]; Copy after login Object Object is a data type used to describe things in reality. Objects consist of properties and methods. Properties are the characteristics of an object, and methods are the behavior of the object. For example:

var person = { name: "John", age: 18, sayHello: function() { alert("Hello!"); } }; Copy after login The above code creates a person object, including name, age and a sayHello method. You can access the properties and methods of an object through dots or square brackets. For example, to access the name in the person object:

var name = person.name; Copy after login 4. Control flow

Control flow is a mechanism to control the order of program execution. Javascript provides a variety of control flow statements.

if statement The if statement is used to execute different blocks of code based on conditions. For example:

if (age > 18) { alert("You are an adult."); } else { alert("You are a child."); } Copy after login The above code determines whether the age is greater than 18 years old based on the value of the variable age, and executes different code blocks.

for loop The for loop is used to repeatedly execute the same block of code. For example, to output numbers from 1 to 10:

for (var i = 1; i Copy after login The above code uses the variable i to loop from 1 to 10, each time outputting the current i value.

while loop The while loop is used to repeatedly execute the same block of code while a condition is true. For example, output numbers from 1 to 10:

var i = 1; while (i Copy after login The above code uses the variable i to start a loop from 1, output the current i value each time, and increase i by 1, until the loop ends when i is greater than 10.

5. Function

A function is a block of code that completes a specific task and can be called repeatedly for execution. Functions can be defined in Javascript through the keyword function. For example, define a function that calculates the sum of two numbers:

function add(a, b) { return a + b; } Copy after login The above code defines a function named add, which receives two parameters a and b and returns their sum.

6. DOM operation

Javascript can operate the DOM (Document Object Model) tree to achieve the effect of dynamically updating HTML pages. The DOM tree is a structured representation of an HTML page, and each HTML element is a node in the DOM tree. Javascript can operate these nodes through the DOM API, such as modifying the content, attributes, styles, etc. of the elements.

Get elements You can use the getElementById, getElementsByClassName, getElementsByTagName and other methods of the document object to obtain HTML elements. For example, get the element with id "myDiv":

var myDiv = document.getElementById("myDiv"); Copy after login Modify element content and attributes You can use the innerHTML, innerText and nodeValue attributes of the node to modify the content of the node . For example, to modify the content of the element with the id "myDiv":

var myDiv = document.getElementById("myDiv"); myDiv.innerHTML = "Hello World!"; Copy after login You can use the getAttribute and setAttribute attributes of the node to modify the attributes of the node. For example, modify the href attribute of the element with the id "myLink":

var myLink = document.getElementById("myLink"); myLink.setAttribute("href", "http://www.example.com"); Copy after login Modify the element style You can use the style attribute of the node to modify the style of the node. For example, modify the background color of the element with the id "myDiv":

var myDiv = document.getElementById("myDiv"); myDiv.style.backgroundColor = "red"; Copy after login The above are the basic operations of Javascript code. After mastering these contents, the application scope of Javascript will be further expanded.