Hoang Kim

Hoang Kim

1659615568

Học Các Hàm Trong Javascript Với Các Ví Dụ

Xin chào các bạn hôm nay mình sẽ thảo luận về các hàm trong javascript

Bắt đầu nào….

Các hàm JavaScript -

  • Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể.
  • Một hàm JavaScript được thực thi khi “cái gì đó” gọi nó (gọi nó).

Tại sao lại là chức năng?

  • Bạn có thể sử dụng lại mã: Xác định mã một lần và sử dụng nó nhiều lần.
  • Bạn có thể sử dụng cùng một đoạn mã nhiều lần với các đối số khác nhau, để tạo ra các kết quả khác nhau.

Cú pháp hàm JavaScript

  • Một hàm JavaScript được định nghĩa bằng từ khóa function, theo sau là tên, theo sau là dấu ngoặc đơn ().
  • Tên hàm có thể chứa các chữ cái, chữ số, dấu gạch dưới và dấu đô la (quy tắc giống như các biến).
  • Dấu ngoặc đơn có thể bao gồm tên tham số được phân tách bằng dấu phẩy:
    (tham số1, tham số2,…)
  • Mã sẽ được thực thi bởi hàm, được đặt bên trong dấu ngoặc nhọn: {}
  • tên hàm (tham số1, tham số2, tham số3) {
    // mã được thực thi
    }
  • Các tham số của hàm được liệt kê bên trong dấu ngoặc đơn () trong định nghĩa hàm.
  • Các đối số của hàm là các giá trị mà hàm nhận được khi nó được gọi.
  • Bên trong hàm, các đối số (các tham số) hoạt động như các biến cục bộ.

Chức năng bình thường -

function message(){
  let greet = "hello Mysterio"; // greet variable can be used here
  return greet;
}console.log(message());

ĐẦU RA -

Hello Mysterio

Các chức năng được tham số -

  • Tham số là tên được liệt kê trong định nghĩa của hàm. Chúng là cơ chế truyền các giá trị cho các hàm.
  • Giá trị của các tham số được chuyển cho hàm trong khi gọi. Trừ khi nó được chỉ định rõ ràng, số lượng giá trị được truyền vào một hàm phải khớp với số lượng tham số đã xác định.

Cú pháp

Cú pháp để xác định một hàm được tham số hóa là:

function function_name (tham số1, tham số2,… ..parameterN) {

// nội dung của hàm

}

Thí dụ -

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}
console.log(myFunction(10,7));

ĐẦU RA -

70

Tham số chức năng mặc định -

  • Trong ES6, hàm cho phép khởi tạo các tham số với giá trị mặc định nếu tham số không được xác định hoặc không có giá trị nào được chuyển cho nó.
function message(name = "Mysterio"){
  let greet = "hello "+name; // greet variable can be used here
  return greet;
}console.log(message());
console.log(message("Stark));

ĐẦU RA -

hello Mysterio
hello Stark

GIẢI TRÌNH -

  • Như bạn có thể thấy nếu bạn không truyền bất kỳ đối số nào cho lệnh gọi hàm thì nó sẽ sử dụng giá trị tham số mặc định và nếu bạn truyền đối số với một giá trị nào đó thì nó sẽ sử dụng giá trị đó thay vì giá trị tham số mặc định.

Hàm trả về -

  • Khi JavaScript đến một câu lệnh trả về, hàm sẽ ngừng thực thi.
  • Nếu hàm được gọi từ một câu lệnh, JavaScript sẽ “quay lại” để thực thi mã sau câu lệnh gọi.
  • Các hàm thường tính giá trị trả về. Giá trị trả về được "trả lại" trở lại "người gọi":

Thí dụ -

function mySum() {
  let array = [1,2,3,4,5,6,7,8,9,10];
  let sum = 0;
  for(i = 0;i<=array.length;i++){
    sum = sum + i;
  }
  return sum;
}
console.log(mySum())

ĐẦU RA -

55

GIẢI TRÌNH -

  • Chúng tôi đã tạo một mảng và nó có 10 số từ 1–10 bên trong nó
  • Sau đó, chúng tôi tạo một biến có tên là sum và khởi tạo nó với giá trị 0
  • Sau đó, chúng tôi lặp lại mảng bằng vòng lặp for và tính tổng tất cả giá trị của các phần tử bên trong mảng.
  • cuối cùng chúng tôi đã trả về tổng bằng cách sử dụng từ khóa "return"

Các hàm được sử dụng làm giá trị thay đổi -

function message(){
  return "Hello ";
}let x = message();
let greet = x + " Mysterio";
console.log(greet);

ĐẦU RA -

Hello Mysterio

Biến cục bộ

  • Các biến được khai báo trong một hàm JavaScript, trở thành ĐỊA PHƯƠNG đối với hàm.
  • Các biến cục bộ chỉ có thể được truy cập từ bên trong hàm.
//greet variable cant be used here it is local and have scope inside the function onlyfunction message(){
  let greet = "hello Mysterio"; // greet variable can be used here
  return greet;
}// greet variable cant be used here it is local and have scope 
inside the function only
  • Vì các biến cục bộ chỉ được nhận dạng bên trong các hàm của chúng, các biến có cùng tên có thể được sử dụng trong các hàm khác nhau.
  • Các biến cục bộ được tạo khi một hàm khởi động và bị xóa khi hoàn thành hàm.

Tham số phần còn lại - Tham số
phần còn lại không hạn chế bạn truyền số lượng giá trị trong một hàm, nhưng tất cả các giá trị được truyền vào phải cùng loại. Chúng ta cũng có thể nói rằng các tham số phần còn lại hoạt động như trình giữ chỗ cho nhiều đối số cùng loại.

Để khai báo tham số còn lại, tên của tham số phải được đặt trước bằng toán tử spread có ba dấu chấm (không nhiều hơn ba hoặc không ít hơn ba).

Thí dụ -

function heroes(...name){
  for (var i = 0; i < name.length; i++) {
    return name[i];
  }
}
const names = ["Stark","Captain","Thor","Hawkeye","Black Widow","Banner"];
console.log(heroes(names));

ĐẦU RA -

[ 'Stark', 'Captain', 'Thor', 'Hawkeye', 'Black Widow', 'Banner' ]

GIẢI TRÌNH -

  • Chúng tôi đã tạo một hàm có tên là anh hùng và truyền một tên tham số bằng toán tử spread sau đó gọi hàm bằng một mảng chứa tên siêu anh hùng và sau đó hiển thị tên bằng cách sử dụng vòng lặp for.

Liên kết: https://faun.pub/functions-in-javascript-9cadd812cd9c

#javascript 

What is GEEK

Buddha Community

Học Các Hàm Trong Javascript Với Các Ví Dụ
Hoang Kim

Hoang Kim

1659615568

Học Các Hàm Trong Javascript Với Các Ví Dụ

Xin chào các bạn hôm nay mình sẽ thảo luận về các hàm trong javascript

Bắt đầu nào….

Các hàm JavaScript -

  • Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể.
  • Một hàm JavaScript được thực thi khi “cái gì đó” gọi nó (gọi nó).

Tại sao lại là chức năng?

  • Bạn có thể sử dụng lại mã: Xác định mã một lần và sử dụng nó nhiều lần.
  • Bạn có thể sử dụng cùng một đoạn mã nhiều lần với các đối số khác nhau, để tạo ra các kết quả khác nhau.

Cú pháp hàm JavaScript

  • Một hàm JavaScript được định nghĩa bằng từ khóa function, theo sau là tên, theo sau là dấu ngoặc đơn ().
  • Tên hàm có thể chứa các chữ cái, chữ số, dấu gạch dưới và dấu đô la (quy tắc giống như các biến).
  • Dấu ngoặc đơn có thể bao gồm tên tham số được phân tách bằng dấu phẩy:
    (tham số1, tham số2,…)
  • Mã sẽ được thực thi bởi hàm, được đặt bên trong dấu ngoặc nhọn: {}
  • tên hàm (tham số1, tham số2, tham số3) {
    // mã được thực thi
    }
  • Các tham số của hàm được liệt kê bên trong dấu ngoặc đơn () trong định nghĩa hàm.
  • Các đối số của hàm là các giá trị mà hàm nhận được khi nó được gọi.
  • Bên trong hàm, các đối số (các tham số) hoạt động như các biến cục bộ.

Chức năng bình thường -

function message(){
  let greet = "hello Mysterio"; // greet variable can be used here
  return greet;
}console.log(message());

ĐẦU RA -

Hello Mysterio

Các chức năng được tham số -

  • Tham số là tên được liệt kê trong định nghĩa của hàm. Chúng là cơ chế truyền các giá trị cho các hàm.
  • Giá trị của các tham số được chuyển cho hàm trong khi gọi. Trừ khi nó được chỉ định rõ ràng, số lượng giá trị được truyền vào một hàm phải khớp với số lượng tham số đã xác định.

Cú pháp

Cú pháp để xác định một hàm được tham số hóa là:

function function_name (tham số1, tham số2,… ..parameterN) {

// nội dung của hàm

}

Thí dụ -

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}
console.log(myFunction(10,7));

ĐẦU RA -

70

Tham số chức năng mặc định -

  • Trong ES6, hàm cho phép khởi tạo các tham số với giá trị mặc định nếu tham số không được xác định hoặc không có giá trị nào được chuyển cho nó.
function message(name = "Mysterio"){
  let greet = "hello "+name; // greet variable can be used here
  return greet;
}console.log(message());
console.log(message("Stark));

ĐẦU RA -

hello Mysterio
hello Stark

GIẢI TRÌNH -

  • Như bạn có thể thấy nếu bạn không truyền bất kỳ đối số nào cho lệnh gọi hàm thì nó sẽ sử dụng giá trị tham số mặc định và nếu bạn truyền đối số với một giá trị nào đó thì nó sẽ sử dụng giá trị đó thay vì giá trị tham số mặc định.

Hàm trả về -

  • Khi JavaScript đến một câu lệnh trả về, hàm sẽ ngừng thực thi.
  • Nếu hàm được gọi từ một câu lệnh, JavaScript sẽ “quay lại” để thực thi mã sau câu lệnh gọi.
  • Các hàm thường tính giá trị trả về. Giá trị trả về được "trả lại" trở lại "người gọi":

Thí dụ -

function mySum() {
  let array = [1,2,3,4,5,6,7,8,9,10];
  let sum = 0;
  for(i = 0;i<=array.length;i++){
    sum = sum + i;
  }
  return sum;
}
console.log(mySum())

ĐẦU RA -

55

GIẢI TRÌNH -

  • Chúng tôi đã tạo một mảng và nó có 10 số từ 1–10 bên trong nó
  • Sau đó, chúng tôi tạo một biến có tên là sum và khởi tạo nó với giá trị 0
  • Sau đó, chúng tôi lặp lại mảng bằng vòng lặp for và tính tổng tất cả giá trị của các phần tử bên trong mảng.
  • cuối cùng chúng tôi đã trả về tổng bằng cách sử dụng từ khóa "return"

Các hàm được sử dụng làm giá trị thay đổi -

function message(){
  return "Hello ";
}let x = message();
let greet = x + " Mysterio";
console.log(greet);

ĐẦU RA -

Hello Mysterio

Biến cục bộ

  • Các biến được khai báo trong một hàm JavaScript, trở thành ĐỊA PHƯƠNG đối với hàm.
  • Các biến cục bộ chỉ có thể được truy cập từ bên trong hàm.
//greet variable cant be used here it is local and have scope inside the function onlyfunction message(){
  let greet = "hello Mysterio"; // greet variable can be used here
  return greet;
}// greet variable cant be used here it is local and have scope 
inside the function only
  • Vì các biến cục bộ chỉ được nhận dạng bên trong các hàm của chúng, các biến có cùng tên có thể được sử dụng trong các hàm khác nhau.
  • Các biến cục bộ được tạo khi một hàm khởi động và bị xóa khi hoàn thành hàm.

Tham số phần còn lại - Tham số
phần còn lại không hạn chế bạn truyền số lượng giá trị trong một hàm, nhưng tất cả các giá trị được truyền vào phải cùng loại. Chúng ta cũng có thể nói rằng các tham số phần còn lại hoạt động như trình giữ chỗ cho nhiều đối số cùng loại.

Để khai báo tham số còn lại, tên của tham số phải được đặt trước bằng toán tử spread có ba dấu chấm (không nhiều hơn ba hoặc không ít hơn ba).

Thí dụ -

function heroes(...name){
  for (var i = 0; i < name.length; i++) {
    return name[i];
  }
}
const names = ["Stark","Captain","Thor","Hawkeye","Black Widow","Banner"];
console.log(heroes(names));

ĐẦU RA -

[ 'Stark', 'Captain', 'Thor', 'Hawkeye', 'Black Widow', 'Banner' ]

GIẢI TRÌNH -

  • Chúng tôi đã tạo một hàm có tên là anh hùng và truyền một tên tham số bằng toán tử spread sau đó gọi hàm bằng một mảng chứa tên siêu anh hùng và sau đó hiển thị tên bằng cách sử dụng vòng lặp for.

Liên kết: https://faun.pub/functions-in-javascript-9cadd812cd9c

#javascript 

Jonathan Lambert

Jonathan Lambert

1663743405

Responsive Navigation Bar with HTML, CSS & JavaScript

In this tutorial, you'll learn how to create a responsive navigation bar with HTML, CSS and Javascript. Create a quick and easy responsive navbar using HTML, CSS and Javascript.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navigation Bar</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <nav>
        <a href="#home" id="logo">Site Logo</a>
        <i class="fas fa-bars" id="ham-menu"></i>
        <ul id="nav-bar">
          <li>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#about">About</a>
          </li>
          <li>
            <a href="#services">Services</a>
          </li>
          <li>
            <a href="#team">Team</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
    <section id="home">
      <h1>Home Section</h1>
    </section>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
*:not(i) {
  font-family: "Poppins", sans-serif;
}
header {
  position: fixed;
  width: 100%;
  background-color: #2c8eec;
  padding: 3rem 5rem;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}
nav a {
  font-size: 1.8rem;
  text-decoration: none;
}
nav a#logo {
  color: #000000;
  font-weight: 700;
}
nav ul a {
  color: #ffffff;
  font-weight: 600;
}
nav ul a:hover {
  border-bottom: 2px solid #ffffff;
}
section#home {
  height: 100vh;
  display: grid;
  place-items: center;
}
h1 {
  font-size: 4rem;
}
#ham-menu {
  display: none;
}
nav ul.active {
  left: 0;
}
@media only screen and (max-width: 991px) {
  html {
    font-size: 56.25%;
  }
  header {
    padding: 2.2rem 5rem;
  }
}
@media only screen and (max-width: 767px) {
  html {
    font-size: 50%;
  }
  #ham-menu {
    display: block;
    color: #ffffff;
  }
  nav a#logo,
  #ham-menu {
    font-size: 3.2rem;
  }
  nav ul {
    background-color: black;
    position: fixed;
    left: -100vw;
    top: 73.6px;
    width: 100vw;
    height: calc(100vh - 73.6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transition: 1s;
    gap: 0;
  }
}
@media only screen and (max-width: 575px) {
  html {
    font-size: 46.87%;
  }
  header {
    padding: 2rem 3rem;
  }
  nav ul {
    top: 65.18px;
    height: calc(100vh - 65.18px);
  }
}

Javascript:

let hamMenuIcon = document.getElementById("ham-menu");
let navBar = document.getElementById("nav-bar");
let navLinks = navBar.querySelectorAll("li");

hamMenuIcon.addEventListener("click", () => {
  navBar.classList.toggle("active");
  hamMenuIcon.classList.toggle("fa-times");
});
navLinks.forEach((navLinks) => {
  navLinks.addEventListener("click", () => {
    navBar.classList.remove("active");
    hamMenuIcon.classList.toggle("fa-times");
  });
});

Related Videos

Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT

Responsive Navbar Tutorial

Responsive navbar tutorial using HTML CSS & JS

 

#html #css #javascript #webdev 

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

WebClues Infotech

WebClues Infotech

1616670795

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips