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

Home

Web Front-end

Front-end Q&A

c How to use javascript

May 17, 2023 pm 04:25 PM

JavaScript is a commonly used programming language used to add dynamic content and interactivity to web pages. Along with HTML and CSS, it forms the basic building block of modern websites. If you want to add dynamic elements to your website, JavaScript is indispensable. In this article, we will introduce how to use JavaScript.

Embed JavaScript

There are two ways to embed JavaScript code in HTML. First, you can place script tags in your HTML between the <head> or <body>. This means that the code will be executed once when the page loads. For example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script&gt;
    function displayMessage() {
      alert(&quot;Hello, World!&quot;);
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;button onclick=&quot;displayMessage()&quot;&gt;Click me!&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

The above code defines a function named displayMessage(), which will display a simple warning box. The function will be called when the user clicks the button.

The second method is to create a JavaScript file outside of the HTML document. This makes the code more organized and easier to manage. To use an external script, set the src attribute in the <script> tag to the path to the JavaScript file. For example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src=&quot;myscript.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;button onclick=&quot;displayMessage()&quot;&gt;Click me!&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

In this example, the JavaScript code is in a file called myscript.js.

Variables and Data Types

JavaScript supports a variety of data types, including strings, numeric values, Boolean values, objects, arrays, null values, and undefined values. To declare a variable, use the var keyword.

var name = &quot;John&quot;;
var age = 30;
var isMale = true;

Copy after login

In the above example, we defined three variables to store strings, numeric values and Boolean values respectively. You can use the typeof operator to determine the data type of a variable.

alert(typeof name);  // &quot;string&quot;
alert(typeof age);   // &quot;number&quot;
alert(typeof isMale);  // &quot;boolean&quot;

Copy after login

Operators and logical expressions

JavaScript supports a variety of operators, including arithmetic operators, comparison operators, and logical operators. In the following example, we define two variables x and y and demonstrate some commonly used operators.

var x = 10;
var y = 5;
var z = x + y;  // 加法运算
var w = x - y;  // 减法运算
var q = x * y;  // 乘法运算
var r = x / y;  // 除法运算
var s = x % y;  // 取模运算
var t = x == y;  // 等于运算符（返回false）
var u = x &gt; y;   // 大于运算符（返回true）
var v = (x &gt; y) &amp;&amp; (x &lt; 20);  // 逻辑AND运算符（返回true）

Copy after login

In the above code, we also demonstrated how to use logical expressions. The AND operator links two expressions together and returns true when both expressions are true.

Functions

Functions are one of the basic building blocks in JavaScript. Functions are reusable pieces of code that can be used with other code. To define a function, use the function keyword.

function addNumbers(x, y) {
  return x + y;
}

Copy after login

In this example, we define a function called addNumbers that accepts two numeric parameters and returns their sum. To call a function, use the function name followed by parentheses and pass any arguments required.

1	`var` `sum = addNumbers(5, 10);` `// sum等于15`

Copy after login

Events

Events are another important concept in JavaScript. Events are actions that can be triggered, such as clicking a button or submitting a form. To handle an event, set an event handler, which is a function that will be called when the event occurs.

1	`<button onclick="displayMessage()">Click me!</button>`

Copy after login

In the above example, we defined a button and called a function named displayMessage when the button is clicked.

DOM operations

Finally, let’s take a look at DOM operations in JavaScript. DOM (Document Object Model) is the programming interface of web pages, which allows JavaScript to access and modify elements and attributes in web pages. For example, to access an element, use the document object and specify the element's ID.

1	`<p id="myParagraph">This is a paragraph.</p>`

Copy after login

In the above example, we defined a paragraph element with the ID "myParagraph". Here's an example of how to modify its content using JavaScript.

1 2	`var` `paragraph = document.getElementById("myParagraph");` `paragraph.innerHTML = "This is a` `new` `paragraph.";`

Copy after login

In the above code, we use the getElementById method to get the element and use the innerHTML attribute to set its content.

Summary

JavaScript is a powerful and flexible programming language that can be used to create interactive and dynamic web pages. This article introduces the basic concepts of JavaScript, including variables, data types, operators, functions, events, and DOM operations. Now you're ready to start writing your own JavaScript code!

The above is the detailed content of c How to use javascript. For more information, please follow other related articles on the PHP Chinese website!

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