• 0366 997 840
  • namdong92@gmail.com

Javascript Căn Bản


Thiết lập môi trường phát triển cho JavaScript

Để làm việc với JavaScript, bạn cần cài đặt các công cụ sau:

  1. Browser
  2. Editor

Browser

Bạn có thể cài đặt bất kỳ trình duyệt nào theo sở thích của mình, ví dụ: Internet Explorer, Chrome, FireFox, Safari, Opera, v.v. JavaScript hoạt động trên mọi trình duyệt web trên mọi hệ điều hành.

 

Editor

Bạn có thể viết mã JavaScript bằng trình soạn thảo đơn giản như Notepad. Tuy nhiên, bạn cũng có thể cài đặt bất kỳ mã nguồn mở hoặc IDE được cấp phép nào để nhận được hỗ trợ IntelliSense cho JavaScript và lỗi cú pháp / cảnh báo tô sáng, ví dụ: Visual Studio, Aptana, Eclipse, v.v.

 


Thẻ script

Bất kỳ loại tập lệnh phía máy khách nào cũng có thể được viết bên trong thẻ <script> bằng html. Thẻ script xác định một khối mã script trong trang html. Nó cũng tải một tập tin script với thuộc tính src.
Html 4.x yêu cầu thuộc tính loại trong thẻ script. Thuộc tính type được sử dụng để xác định ngôn ngữ của mã script được nhúng trong thẻ script. Điều này được chỉ định là loại MIME, ví dụ: text / javascript, text / ecmascript, text / vbscript, v.v. Vì vậy, đối với mã JavaScript, chỉ định type = "text / javascript" trong thẻ script trong trang html 4.x.

Trang Html 5 không yêu cầu thuộc tính loại trong thẻ <script>, vì trong HTML 5, ngôn ngữ tập lệnh mặc định là JavaScript.

 

Nếu bạn không muốn viết JavaScript giữa thẻ script trong một trang web thì bạn cũng có thể viết mã JavaScript trong một tệp riêng có phần mở rộng .js và đưa nó vào một trang web bằng cách sử dụng thẻ <script> và tham chiếu tệp qua thuộc tính src .

<script src="/nguyenvando.js"></script>

Ví dụ

 

<!DOCTYPE html>
<html>
<head> <meta name="viewport" content="width=device-width" />
<title>JavaScript Demo</title>
<script src="/nguyenvando.js"></script> 
</head>
<body> <h1> JavaScript Tutorials</h1> <p>This is JavaScript sample.</p>
</body>
</html>

 

cũng có thể được thêm vào cuối thẻ body. Bằng cách này, bạn có thể chắc chắn rằng tất cả các tài nguyên trang web đã được tải và an toàn khi tương tác với DOM.

<!DOCTYPE html>
<html>
<head> <meta name="viewport" content="width=device-width" /> <title>JavaScript Demo</title>
</head>
<body> <h1> Hướng dẫn Javascript căn Bản</h1> <p>Ví Dụ Cơ Bản.</p> <script src="/nguyenvando.js"></<script>
</body>
</html>

 

Bạn có thể viết JavaScript trong thẻ script tại các vị trí thích hợp trong trang web.

Bạn có thể viết JavaScript trong thẻ script tại các vị trí thích hợp trong trang web.


Những điểm cần nhớ

  1. Mã JavaScript phải được viết trong thẻ <script>.
  2. Tệp JavaScript bên ngoài (.js) có thể được tham chiếu bằng <script src = "/nguyenvando.js"> </ script> trong đó thuộc tính src được sử dụng để chỉ định đường dẫn đầy đủ của tệp .js.
  3. Tiêu chuẩn Html5 không yêu cầu thuộc tính type = "text / javascript", trong khi các tiêu chuẩn html trước yêu cầu thuộc tính type.
  4. Thẻ <script> có thể được thêm vào thẻ <head> hoặc <body>.
  5. Tập lệnh được bao gồm trong thẻ <head> có thể không truy cập được các phần tử DOM vì <head> tải trước <body>. Viết tập lệnh trước khi kết thúc thẻ </ body> nếu mã tập lệnh cần truy cập các phần tử DOM.
  6. JavaScript sử dụng bộ ký tự unicode.
  7. JavaScript phân biệt chữ hoa chữ thường
  8. Chuỗi JavaScript phải được đặt trong dấu ngoặc kép (") hoặc dấu ngoặc kép đơn (').
  9. Số JavaScript có thể lưu trữ số nguyên, dấu phẩy, giá trị thập lục phân mà không đặt nó trong dấu ngoặc kép.
  10. Giá trị boolean JavaScript lưu trữ đúng hoặc sai.
  11. Mọi câu lệnh trong JavaScript có thể được phân tách bằng dấu chấm phẩy (;). Không bắt buộc nhưng nên sử dụng dấu chấm phẩy ở cuối mỗi câu.
  12. JavaScript bỏ qua nhiều khoảng trắng.
  13. Một nhận xét nhiều dòng có thể được gói giữa / * và * /. Nhận xét dòng đơn có thể bắt đầu bằng //.
  14. Từ khóa JavaScript là những từ dành riêng. Không sử dụng chúng làm tên biến hoặc hàm.

Hiển thị hộp thông báo Popup

 
Hộp thông báo(alert)

Sử dụng chức năng alert () để hiển thị thông báo bật lên cho người dùng. Cửa sổ bật lên này sẽ có nút OK để đóng cửa sổ bật lên.

Ví Dụ

alert("This is alert box!"); // display string message
alert(100); // display number 
alert(true); // display boolean

Chức năng cảnh báo có thể hiển thị các thông điệp của bất kỳ loại dữ liệu nào, ví dụ: chuỗi, số, boolean, v.v. Không cần phải chuyển đổi tin nhắn thành các loại chuỗi.

Confirm Box


Đôi khi bạn cần lấy xác nhận của người dùng để tiếp tục. Ví dụ: bạn muốn lấy xác nhận của người dùng trước khi lưu dữ liệu cập nhật hoặc xóa dữ liệu hiện có. Trong trường hợp này, sử dụng hàm tích hợp JavaScript xác nhận (). Hàm Confirm () hiển thị thông báo bật lên cho người dùng bằng hai nút, OK và Hủy. Bạn có thể kiểm tra nút nào mà người dùng đã nhấp và tiến hành tương ứng.

Prompt Box

Đôi khi bạn có thể cần lấy dữ liệu đầu vào của người dùng để thực hiện các hành động tiếp theo trong một trang web. Ví dụ: bạn muốn tính toán EMI dựa trên thời hạn cho vay ưa thích của người dùng. Đối với loại kịch bản này, hãy sử dụng dấu nhắc hàm tích hợp JavaScript ().

Những điểm cần nhớ

  1. Thông báo Popup có thể được hiển thị bằng các hàm toàn cục - alert (), Confirm () và prompt ().
  2. Hàm alert () hiển thị thông báo bật lên với nút 'Ok'.
  3. xác nhận () chức năng hiển thị thông báo bật lên với các nút 'Ok' và 'Hủy'. Sử dụng hàm Confirm () để lấy xác nhận của người dùng để tiếp tục.
  4. Hàm prompt () cho phép bạn lấy đầu vào của người dùng bằng các nút 'Ok' và 'Hủy'. Hàm prompt () trả về giá trị được nhập bởi người dùng. Nó trả về null nếu người dùng không cung cấp bất kỳ giá trị đầu vào nào.

Biến Trong JavaScript

Biến có nghĩa là bất cứ điều gì có thể thay đổi. JavaScript bao gồm các biến chứa giá trị dữ liệu và nó có thể được thay đổi bất cứ lúc nào.

JavaScript sử dụng  từ khóa var để khai báo một biến. Một biến phải có một tên duy nhất. Bạn có thể gán giá trị cho một biến bằng cách sử dụng toán tử bằng (=) khi bạn khai báo hoặc trước khi sử dụng nó.

Cú Pháp:

var <variable-name>;
var <variable-name> = <value>;
var one = 1; // variable stores numeric value
var two = 'two';  // variable stores string value
var three;  // declared a variable without assigning a value

khai báo nhiều biến trong một dòng

var one = 1, two = 'two', three;


Khai báo một biến không có từ khóa var:

JavaScript cho phép khai báo biến mà không cần từ khóa var. Bạn phải gán một giá trị khi bạn khai báo một biến không có từ khóa var.

Ví Dụ
one = 1;
two = 'two';


Biến lỏng lẻo


C # hoặc Java rành mạnh với các biến. Nó có nghĩa là biến phải được khai báo với một kiểu dữ liệu cụ thể, cho biết loại dữ liệu mà biến sẽ giữ.

Các biến JavaScript được gõ lỏng lẻo có nghĩa là nó không yêu cầu khai báo kiểu dữ liệu. Bạn có thể chỉ định bất kỳ loại giá trị bằng chữ nào cho một biến, ví dụ: chuỗi, số nguyên, float, boolean vv ..

Ví Dụ

var one =1; // numeric value
one = 'one'; // string value
one= 1.1; // decimal value
one = true; // Boolean value
one = null; // null value

Những điểm cần nhớ

  1. Biến lưu trữ một giá trị dữ liệu duy nhất có thể được thay đổi sau này.
  2. Các biến có thể được xác định bằng cách sử dụng từ khóa var. Các biến được định nghĩa mà không có từ khóa var trở thành biến toàn cục.
  3. Các biến phải được khởi tạo trước khi sử dụng.
  4. Nhiều biến có thể được định nghĩa trong một dòng duy nhất. ví dụ. var one = 1, hai = 2, ba = "ba";
  5. Các biến trong JavaScript là các biến được gõ lỏng lẻo. Nó có thể lưu trữ giá trị của bất kỳ loại dữ liệu nào trong suốt thời gian sử dụng.

 

Toán tử Javascript

JavaScript bao gồm các toán tử như trong các ngôn ngữ khác. Một toán tử thực hiện một số thao tác trên một hoặc nhiều toán hạng (giá trị dữ liệu) và tạo ra một kết quả. Ví dụ 1 + 2, trong đó dấu + là toán tử và 1 là toán hạng bên trái và 2 là toán hạng bên phải. + toán tử thêm hai giá trị số và tạo ra kết quả là 3 trong trường hợp này.

JavaScript bao gồm các loại toán tử sau.

  1. Toán tử số học
  2. Toán tử so sánh
  3. Toán tử logic
  4. Toán tử Gán
  5. Toán Tử điều kiện

Arithmetic Operators

Toán tử số học được sử dụng để thực hiện các phép toán giữa các toán hạng số.

Operator Description
+ Adds two numeric operands.
- Subtract right operand from left operand
* Multiply two numeric operands.
/ Divide left operand by right operand.
% Modulus operator. Returns remainder of two operands.
++ Increment operator. Increase operand value by one.
-- Decrement operator. Decrease value by one.

Comparison Operators

Ngôn ngữ JavaScript bao gồm các toán tử so sánh hai toán hạng và trả về giá trị Boolean đúng hoặc sai.

Operators Description
== Compares the equality of two operands without considering type.
=== Compares equality of two operands with type.
!= Compares inequality of two operands.
> Checks whether left side value is greater than right side value. If yes then returns true otherwise false.
< Checks whether left operand is less than right operand. If yes then returns true otherwise false.
>= Checks whether left operand is greater than or equal to right operand. If yes then returns true otherwise false.
<= Checks whether left operand is less than or equal to right operand. If yes then returns true otherwise false.

Logical Operators

Toán tử logic được sử dụng để kết hợp hai hoặc nhiều điều kiện. JavaScript bao gồm các toán tử logic sau.

Operator Description
&& && is known as AND operator. It checks whether two operands are non-zero (0, false, undefined, null or "" are considered as zero), if yes then returns 1 otherwise 0.
|| || is known as OR operator. It checks whether any one of the two operands is non-zero (0, false, undefined, null or "" is considered as zero).
! ! is known as NOT operator. It reverses the boolean result of the operand (or condition)

Assignment Operators


JavaScript bao gồm các toán tử gán để gán giá trị cho các biến có ít nét chính hơn.

Assignment operators Description
= Assigns right operand value to left operand.
+= Sums up left and right operand values and assign the result to the left operand.
-= Subtract right operand value from left operand value and assign the result to the left operand.
*= Multiply left and right operand values and assign the result to the left operand.
/= Divide left operand value by right operand value and assign the result to the left operand.
%= Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.

Ternary Operator

JavaScript bao gồm toán tử đặc biệt gọi là toán tử ternary :? gán giá trị cho một biến dựa trên một số điều kiện. Đây giống như dạng ngắn của điều kiện if

 


Những điểm cần nhớ

  1. JavaScript bao gồm các toán tử thực hiện một số thao tác trên một hoặc nhiều toán hạng (giá trị dữ liệu) và tạo ra kết quả.
  2. JavaScript bao gồm nhiều loại toán tử khác nhau: Toán tử số học, Toán tử so sánh, Toán tử logic, Toán tử gán, Toán tử điều kiện.
  3. Toán tử ternary ?: Là toán tử có điều kiện.

Các kiểu dữ liệu trong JavaScript

String

Chuỗi là một kiểu dữ liệu nguyên thủy trong JavaScript. Một chuỗi là nội dung văn bản. Nó phải được đặt trong dấu ngoặc kép đơn hoặc kép.

  1. Chuỗi JavaScript phải được đặt trong dấu ngoặc kép hoặc dấu ngoặc đơn ("" hoặc '').
  2. Chuỗi có thể được gán cho một biến bằng cách sử dụng toán tử =.
  3. Nhiều chuỗi có thể được nối bằng cách sử dụng toán tử +.
  4. Một chuỗi có thể được coi là mảng ký tự.
  5. Sử dụng dấu gạch chéo ngược () để bao gồm dấu ngoặc kép bên trong chuỗi.
  6. Các đối tượng chuỗi có thể được tạo bằng từ khóa mới. ví dụ. var str = new String ();
  7. Các phương thức chuỗi được sử dụng để thực hiện các tác vụ khác nhau trên các chuỗi.

String Properties

Property Description
length Returns the length of the string.

String Methods

Method Description
charAt(position) Returns the character at the specified position (in Number).
charCodeAt(position) Returns a number indicating the Unicode value of the character at the given position (in Number).
concat([string,,]) Joins specified string literal values (specify multiple strings separated by comma) and returns a new string.
indexOf(SearchString, Position) Returns the index of first occurrence of specified String starting from specified number index. Returns -1 if not found.
lastIndexOf(SearchString, Position) Returns the last occurrence index of specified SearchString, starting from specified position. Returns -1 if not found.
localeCompare(string,position) Compares two strings in the current locale.
match(RegExp) Search a string for a match using specified regular expression. Returns a matching array.
replace(searchValue, replaceValue) Search specified string value and replace with specified replace Value string and return new string. Regular expression can also be used as searchValue.
search(RegExp) Search for a match based on specified regular expression.
slice(startNumber, endNumber) Extracts a section of a string based on specified starting and ending index and returns a new string.
split(separatorString, limitNumber) Splits a String into an array of strings by separating the string into substrings based on specified separator. Regular expression can also be used as separator.
substr(start, length) Returns the characters in a string from specified starting position through the specified number of characters (length).
substring(start, end) Returns the characters in a string between start and end indexes.
toLocaleLowerCase() Converts a string to lower case according to current locale.
toLocaleUpperCase() Converts a sting to upper case according to current locale.
toLowerCase() Returns lower case string value.
toString() Returns the value of String object.
toUpperCase() Returns upper case string value.
valueOf() Returns the primitive value of the specified string object.

 

Number

Số là một kiểu dữ liệu nguyên thủy trong JavaScript. Loại số đại diện cho số nguyên, float, thập lục phân, bát phân hoặc giá trị mũ. Ký tự đầu tiên trong một loại Số phải là một giá trị số nguyên và nó không được đặt trong dấu ngoặc kép.

var int = 100;
var float = 100.5;
var hex = 0xfff;
var exponential = 2.56e3;
var octal = 030;

properties

Property Description
MAX_VALUE Returns the maximum number value supported in JavaScript
MIN_VALUE Returns the smallest number value supported in JavaScript
NEGATIVE_INFINITY Returns negative infinity (-Infinity)
NaN Represents a value that is not a number.
POSITIVE_INFINITY Represents positive infinity (Infinity).

 

Methods

Method Description
toExponential(fractionDigits) Returns exponential value as a string.

Example: 
var num = 100; Num.toExponential(2); // returns '1.00e+2'
toFixed(fractionDigits) Returns string of decimal value of a number based on specified fractionDigits. 

Example: 
var num = 100; Num.toFixed(2); // returns '100.00'
toLocaleString() Returns a number as a string value according to a browser's locale settings.

Example: 
var num = 100; Num.toLocaleString(); // returns '100'
toPrecision(precisionNumber) Returns number as a string with specified total digits.

Example:
var num = 100; Num.toPrecision(4); // returns '100.0'
toString() Returns the string representation of the number value.

Example: 
var num = 100; Num.toString(); // returns '100'
valueOf() Returns the value of Number object.

Example: var num = new Number(100); Num.valueOf(); // returns '100'

Điểm Cần Nhớ

  1. Số JavaScript có thể lưu trữ các giá trị số khác nhau như giá trị số nguyên, số thực, số thập lục phân, số thập phân, số mũ và số bát phân.
  2. Đối tượng số có thể được tạo bằng cách sử dụng từ khóa mới. ví dụ. var num = Số mới (100);
  3. Loại số bao gồm các thuộc tính mặc định - MAX_VALUE, MIN_VALUE, NEGECT_INFINITY, NaN và POSITIVE_INFINITY.
  4. Phương pháp số được sử dụng để thực hiện các nhiệm vụ khác nhau trên các số.


Boolean

  1. Kiểu dữ liệu Boolean của JavaScript có thể lưu trữ một trong hai giá trị, đúng hoặc sai.
  2. Các đối tượng Boolean có thể được tạo bằng từ khóa mới. ví dụ. var Yes = new Boolean(True);
  3. JavaScript xử lý một chuỗi rỗng (""), 0, không xác định và null là false. Mọi thứ khác đều đúng.
  4. Các phương thức Boolean được sử dụng để thực hiện các tác vụ khác nhau trên các giá trị Boolean.

Object

 

 


Bài Liên Quan


Giới Thiệu JavaScript

Giới Thiệu JavaScript

JavaScript là ngôn ngữ kịch bản phía máy khách được gõ lỏng lẻo thực thi trong trình duyệt của người dùng. JavaScript tương tác với các phần tử html (phần tử DOM) để tạo giao diện người dùng web tương tác.

Object

Object

Object is a non-primitive data type in JavaScript. It is like any other variable, the only difference is that an object holds multiple values in terms of properties and methods. Properties can hold values of primitive data types and methods are functions.

Ajax trong lập trình web

Ajax trong lập trình web

Ajax (Asynchronous JavaScript and XML) - là một khái niệm được giới thiệu và sử dụng đầu tiền vào tháng 2 năm 2005. Ajax là thứ thâm ảo với các lập trình viên mới, với những nhà tuyển dụng nó là thứ gì đó cao siêu đánh giá khả năng của lập trình viên, với maketing cho các khóa hoc nó được đưa lên một tầm cao mới là "võ công thượng thừa"  mà một lập trình viên phải đạt được, không ít người nhầm lẫn AJAX là ngôn ngữ lập trình, hầu như khi nhắc đến ajax là lại nghĩ ngay đến jquery.

Vô hiệu hóa chuột phải và không cho người dùng chọn văn bản

Vô hiệu hóa chuột phải và không cho người dùng chọn văn bản

Trong một số trường hợp bạn không muốn cho người dùng trang web sử dụng chuột phải, và không cho chọn thành phần trang bạn có thể làm....

Danh Mục

Bài Viết Mới Nhất