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:
- Browser
- 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ớ
- Mã JavaScript phải được viết trong thẻ <script>.
- 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.
- 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.
- Thẻ <script> có thể được thêm vào thẻ <head> hoặc <body>.
- 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.
- JavaScript sử dụng bộ ký tự unicode.
- JavaScript phân biệt chữ hoa chữ thường
- Chuỗi JavaScript phải được đặt trong dấu ngoặc kép (") hoặc dấu ngoặc kép đơn (').
- 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.
- Giá trị boolean JavaScript lưu trữ đúng hoặc sai.
- 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.
- JavaScript bỏ qua nhiều khoảng trắng.
- 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 //.
- 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ớ
- 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 ().
- Hàm alert () hiển thị thông báo bật lên với nút 'Ok'.
- 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.
- 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ớ
- Biến lưu trữ một giá trị dữ liệu duy nhất có thể được thay đổi sau này.
- 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.
- Các biến phải được khởi tạo trước khi sử dụng.
- 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";
- 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.
- 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
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ớ
- 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ả.
- 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.
- 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.
- Chuỗi JavaScript phải được đặt trong dấu ngoặc kép hoặc dấu ngoặc đơn ("" hoặc '').
- Chuỗi có thể được gán cho một biến bằng cách sử dụng toán tử =.
- Nhiều chuỗi có thể được nối bằng cách sử dụng toán tử +.
- Một chuỗi có thể được coi là mảng ký tự.
- 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.
- 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 ();
- 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ớ
- 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.
- Đố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);
- 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.
- 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
- Kiểu dữ liệu Boolean của JavaScript có thể lưu trữ một trong hai giá trị, đúng hoặc sai.
- 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);
- 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.
- 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