Javascript

1. Variables (Biến), Operators (Toán tử)

1
2
3
4
5
6
7
var x = 5;
var y = 6;
var z = x + y;
var person = "John Doe",
carName = "Volvo",
price = 200;

x lưu giá trị 5, y lưu trữ giá trị 6 và z lưu giá trị 11.

Operators (Toán tử)

+
-
*
/
%
++
--
Cộng
Trừ
Nhân
Chia
Chia dư
Tăng
Giảm

Assignment Operators (Toán tử Gán)

=
+=
-=
*=
/=
%=
x = y
x += y
x -= y
x *= y
x /= y
x %= y
x = y
x = x + y
x = x - y
x = x * y
x = x / y
x = x % y

Comparison Operators (Toán tử So sánh)

Sử dụng "typeof a" để trả về type của 1 biến a.

==
===
!=
!==
>
<
>=
<=
Bằng
Giá trị bằng và loại (type) cũng bằng
Không bằng
Không bằng giá trị và cũng không bằng loại (type)
Lớn hơn
Nhỏ hơn
Lớn hơn hoặc bằng
Nhỏ hơn hoặc bằng

Logical Operators (Toán tử Lý luận)

&&
||
!
Hoặc
Phủ định

2. String (Chuỗi)

1
2
"I'm a String in JavaScript!"
'So am I!'

Quoting (Trích dẫn)

Một chuỗi có thể được xác định bằng cách sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép. Bạn có thể lồng các dấu ngoặc đơn bên trong dấu ngoặc kép và ngược lại. Chèn dấu gạch chéo ngược trước những dấu ngoặc này.

1
2
3
"You make 'me' sad."
'That\'s "cranking" good fun!'
"<a href=\"home\">Home</a>"

Built-in Methods (Phương thức tích hợp sẵn)

Một chuỗi trong JavaScript có một số phương thức dựng sẵn để thao tác chuỗi, mặc dù kết quả luôn là một chuỗi mới - hoặc một cái gì đó khác, ví dụ:
Phương thức split() trả lại một mảng (array).
Phương thức indexOf() trả về vị trí xuất hiện đầu tiên.

1
2
3
4
5
6
"hello".charAt( 0 ) // "h"
"hello".toUpperCase() // "HELLO"
"Hello".toLowerCase() // "hello"
"hello".replace( /e|o/g, "x" ) // "hxllx"
"1,2,3".split( "," ) // [ "1", "2", "3" ]
"You make 'me' sad.".indexOf( "m" ) // 4

Length Property (Thuộc tính length)

Tất cả các chuỗi đều có một thuộc tính length.

1
2
"Hello".length // 5
"".length // 0

Boolean Default (Lý luận mặc định)

Một chuỗi rỗng mặc định là false:

1
2
3
4
!"" // true
!!"" // false
!"hello" // false
!"true" // false

3. htmlString (Chuỗi HTML)

1
2
3
4
5
6
7
8
9
10
11
// Appends <b>hello</b>:
$( "<b>hello</b>" ).appendTo( "body" );
// Appends <b>hello</b>:
$( "<b>hello</b>bye" ).appendTo( "body" );
// Syntax error, unrecognized expression: bye<b>hello</b>
$( "bye<b>hello</b>" ).appendTo( "body" );
// Appends <b>hello</b>wait<b>bye</b>:
$( "<b>hello</b>wait<b>bye</b>" ).appendTo( "body" );

4. Number (Số)

Số là những giá trị nguyên thủy bất biến, giống như các chuỗi. Toán tử phổ biến (+, -, *, /,%, =, + =, - =, * =, / =, ++, -).

1
2
12
3.543

Boolean Default (Lý luận mặc định)

Nếu một số bằng 0, nó mặc định là false:

1
2
3
4
!0 // true
!!0 // false
!1 // false
!-1 // false

Math (Toán học)

JavaScript cung cấp các tiện ích (utilities) để làm việc với số trong đối tượng Math:

1
2
Math.PI // 3.141592653589793
Math.cos( Math.PI ) // -1

Parsing Numbers (Phân tích Số)

parseInt và parseFloat giúp phân tích chuỗi thành số:

1
2
parseInt( "123" ) = 123
parseFloat( "10.10" ) = 10.1

Numbers to Strings (Số thành Chuỗi)

Khi nối các số vào chuỗi, kết quả luôn là một chuỗi.

1
2
"" + 1 + 2; // "12"
"" + ( 1 + 2 ); // "3"

Hoặc bạn sử dụng phương thức String được cung cấp bởi javascript, chúng cố phân tích một giá trị dưới dạng chuỗi:

1
2
String( 1 ) + String( 2 ); // "12"
String( 1 + 2 ); // "3"

NaN and Infinity

Phân tích cú pháp thứ gì đó không phải là số dẫn đến NaN. isNaN giúp phát hiện những trường hợp đó:

1
2
parseInt( "hello", 10 ) // NaN
isNaN( parseInt("hello", 10) ) // true

Chia cho số 0 kết quả trong Infinity:

1
1 / 0 // Infinity

Integer (Số nguyên)

Integers là số nguyên, ví dụ 10, 400, or -5.

Float (Số thực)

Floating point numbers có dấu chấm thập phân, ví dụ 12.5 và 56.7786543

5. Boolean (Lý luận)

Boolean trong JavaScript có thể là true or false:

1
2
if ( true ) console.log( "always!" );
if ( false ) console.log( "never!" );

6. Object

1
2
3
4
5
var x = {};
var y = {
name: "Pete",
age: 15
};

Dot Notation (Ký hiệu chấm)

Bạn có thể viết và đọc các thuộc tính của một Object bằng cách sử dụng ký hiệu dấu chấm:

1
2
3
4
y.name // "Pete"
y.age // 15
x.name = y.name + " Pan" // "Pete Pan"
x.age = y.age + 1 // 16

Iteration (Lặp)

Duyệt qua Object dễ dàng với vòng lặp for:

1
2
3
4
5
6
7
var obj = {
name: "Pete",
age: 15
};
for( key in obj ) {
alert( "key is " + [ key ] + ", value is " + obj[ key ] );
}

jQuery cung cấp hàm each để lặp lại các thuộc tính của các Object, cũng như các phần tử của Array:

1
2
3
jQuery.each( obj, function( key, value ) {
console.log( "key", key, "value", value );
});

Boolean default (Lý luận mặc định)

Một Object, bất kể nó có thuộc tính hay không, không bao giờ mặc định là false:

1
2
!{} // false
!!{} // true

7. Array (Mảng)

Mảng trong JavaScript là danh sách có thể thay đổi với một vài phương thức xây dựng sẵn (Built-in Methods):

1
2
var x = [];
var y = [ 1, 2, 3 ];

Đọc và ghi các phần tử vào một mảng:

1
2
x[ 0 ] = 1;
y[ 2 ] // 3

Iteration (Lặp)

Một mảng có thuộc tính length rất hữu ích cho việc lặp:

1
2
3
for ( var i = 0; i < a.length; i++ ) {
// Do something with a[i]
}

jQuery cung cấp hàm each để lặp qua phần tử của mảng, cũng như các thuộc tính của các đối tượng:

1
2
3
4
var x = [ 1, 2, 3 ];
jQuery.each( x, function( index, value ) {
console.log( "index", index, "value", value );
});

Thuộc tính length cũng có thể được sử dụng để thêm các phần tử vào cuối của một mảng. Tương đương với việc sử dụng push-method:

1
2
3
4
var x = [];
x.push( 1 );
x[ x.length ] = 2;
x // [ 1, 2 ]

Những built-in methods sử dụng trong array: reverse, join, shift, unshift, pop, slice, splice and sort.

1
2
3
4
5
6
7
8
var x = [ 0, 3, 1, 2 ];
x.reverse() // [ 2, 1, 3, 0 ]
x.join(" – ") // "2 - 1 - 3 - 0"
x.pop() // [ 2, 1, 3 ]
x.unshift( -1 ) // [ -1, 2, 1, 3 ]
x.shift() // [ 2, 1, 3 ]
x.sort() // [ 1, 2, 3 ]
x.splice( 1, 2 ) // [ 2, 3 ]

8. Date (Ngày tháng)

1
new Date();

Bên dưới sẽ tạo một Date object đại diện cho ngày 1 tháng 1 năm 2030, lúc 8:15..

1
new Date( 2030, 0, 1, 8, 15 );

9. Function (Hàm)

Một hàm trong JavaScript có thể được đặt tên hoặc anonymous. Bất kỳ hàm nào cũng có thể được gán cho một biến hoặc được truyền cho một method.

1
2
function named() {}
var handler = function() {}

Bên dưới là ví dụ những hàm anonymous:

1
2
3
4
5
6
$( document ).ready(function() {});
$( "a" ).click(function() {});
$.ajax({
url: "someurl.php",
success: function() {}
});

10. Scope (Phạm vi)

Trong JavaScript, tất cả các biến được xác định bên trong một hàm, chỉ hiển thị bên trong phạm vi hàm đó.

1
2
3
4
5
6
7
8
// global
var x = 0;
(function() {
// private
var x = 1;
console.log( x ); // 1
})();
console.log( x ); // 0

Nếu định nghĩa một biến x trong phạm vi toàn cục. Bên trong hàm, một biến x (cục bộ) khác được định nghĩa với một giá trị khác. Nó chỉ hiển thị trong hàm đó và không ghi đè lên biến toàn cục.

11. Callback

Callback là JavaScript function đơn giản được truyền cho một số phương thức dưới dạng đối số hoặc tùy chọn:

1
2
3
$( "body" ).click(function( event ) {
console.log( "clicked: " + event.target );
});

Vài callbacks được yêu cầu để trả lại một cái gì đó:

1
2
3
$( "#myform" ).submit(function() {
return false;
});

12. Event

Những sự kiện tiêu chuẩn trong DOM (Document Object Model) là: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, and keyup.

13. Text & Node

Text là một node của DOM (Document Object Model):

1
2
<p>First Paragraph</p>
<p id="target"><b>Hello</b> world</p>

Vị dụ nếu bạn lấy con của đoạn văn (p) bên trên:

1
2
3
4
5
var children = document.getElementById("target").childNodes;
Biến children nhận được là 2 đứa con. Một là phần tử đại diện cho thẻ b. Hai là một nút văn bản chứa chuỗi "world".
document.getElementsByTagName("p")[0].innerHTML = "New Text";
First paragraph sẽ được thay thế bằng New Text.

14. Conditional Statements (Câu lệnh có điều kiện)

if Statement (Câu lệnh if)

1
2
3
if ( condition ) {
// block of code to be executed if the condition is true
}

Thực hiện lời chào "Chúc một ngày tốt lành" nếu giờ ít hơn 18:00

1
2
3
if ( hour < 18 ) {
greeting = "Good day";
}

The else Statementt (Câu lệnh else)

1
2
3
4
5
if ( condition ) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

Nếu giờ dưới 18, hãy tạo một lời chào "Chúc một ngày tốt lành", nếu không thì "Chào buổi tối":

1
2
3
4
5
if ( hour < 18 ) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

The else if Statement (Câu lệnh else if)

1
2
3
4
5
6
7
if ( condition1 ) {
// block of code to be executed if condition1 is true
} else if ( condition2 ) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}

Nếu thời gian ít hơn 10:00, hãy tạo một lời chào "Chào buổi sáng", nếu không, nhưng thời gian ít hơn 20:00, hãy tạo một lời chào "Chúc một ngày tốt lành", nếu không thì là "Chào buổi tối":

1
2
3
4
5
6
7
if ( time < 10 ) {
greeting = "Good morning";
} else if ( time < 20 ) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

15. For Loop (Vòng lặp For)

1
2
3
for ( statement 1; statement 2; statement 3 ) {
// code block to be executed
}

Statement 1 (Câu lệnh 1) được thực thi (một lần) trước khi thực thi khối mã (code block).
Statement 2 (Câu lệnh 2) định nghĩa điều kiện để thực thi khối mã (code block).
Statement 3 (Câu lệnh 3) được thực thi (mỗi lần) sau khi khối mã (code block) được thực thi.

1
2
3
for ( i = 0; i < 5; i++ ) {
text += "The number is " + i + "<br>";
}

16. While Loop (Vòng lặp While)

1
2
3
while ( condition ) {
// code block to be executed if condition is true
}

Kết quả tương tự như vòng lặp for:

1
2
3
4
while ( i < 5 ) {
text += "The number is " + i + "<br>";
i++;
}

jQuery

Một jQuery object chứa một tập hợp các phần tử của (DOM) đã được tạo từ một chuỗi HTML hoặc được selected từ document. Do các phương thức jQuery thường sử dụng các bộ chọn CSS để match (khớp) các phần tử từ một document, nên tập hợp các phần tử trong jQuery object thường được gọi là một tập hợp các "matched elements" hoặc "selected elements".

1
$( ".post-wrap > .hentry" ).css( "background-color", "yellow" ).find( ".post-title" ).children().css( "color", "red" );

Built-in Methods (Phương thức tích hợp sẵn)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$( ".hentry" ).hide();
$( ".hentry" ).show();
$( ".hentry" ).addClass( "style-2" );
$( ".hentry" ).removeClass( "clearfix" );
$( ".hentry" ).width();
$( ".hentry" ).height();
$( ".hentry" ).css( "background-color", "red" );
$( ".hentry" ).children();
$( ".hentry" ).find( ".post-title" );
$( ".hentry" ).parent();
$( ".hentry" ).closest( ".post-wrap" );
$( ".hentry" ).text();
$( ".hentry" ).html();
$( ".hentry" ).append(button);
$( ".hentry" ).appendTo( "body" );

1. Syntax (Cú pháp)

1
2
3
$( document ).ready( function() {
// jQuery methods go here...
});
1
2
3
$( function() {
// jQuery methods go here...
});

2. Selectors (Bộ chọn)

Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id="lastname"
.class $(".intro") All elements with class="intro"
.class,.class $(".intro,.demo") All elements with the class "intro" or "demo"
element $("p") All <p> elements
el1,el2,el3 $("h1,div,p") All <h1>, <div> and <p> elements
     
:first $("p:first") The first <p> element
:last $("p:last") The last <p> element
:even $("tr:even") All even <tr> elements
:odd $("tr:odd") All odd <tr> elements
     
:first-child $("p:first-child") All <p> elements that are the first child of their parent
:last-child $("p:last-child") All <p> elements that are the last child of their parent
:nth-child(n) $("p:nth-child(2)") All <p> elements that are the 2nd child of their parent
     
parent > child $("div > p") All <p> elements that are a direct child of a <div> element
parent descendant $("div p") All <p> elements that are descendants of a <div> element
element + next $("div + p") The <p> element that are next to each <div> elements
element ~ siblings $("div ~ p") All <p> elements that are siblings of a <div> element
     
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All input elements that are not empty
     
:focus $(":focus") The element that currently has focus
:contains(text) $(":contains('Hello')") All elements which contains the text "Hello"
:has(selector) $("div:has(p)") All <div> elements that have a <p> element
:empty $(":empty") All elements that are empty
:parent $(":parent") All elements that are a parent of another element
:hidden $("p:hidden") All hidden <p> elements
:visible $("table:visible") All visible tables
     
[attribute] $("[href]") All elements with a href attribute
[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to "default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not equal to "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with ".jpg"
[attribute|=value] $("[title|='Tomorrow']") All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with "Tom"
[attribute~=value] $("[title~='hello']") All elements with a title attribute value containing the specific word "hello"
[attribute*=value] $("[title*='hello']") All elements with a title attribute value containing the word "hello"
     
:input $(":input") All input elements
:text $(":text") All input elements with type="text"
:password $(":password") All input elements with type="password"
:radio $(":radio") All input elements with type="radio"
:checkbox $(":checkbox") All input elements with type="checkbox"
:submit $(":submit") All input elements with type="submit"
:reset $(":reset") All input elements with type="reset"
:button $(":button") All input elements with type="button"
:image $(":image") All input elements with type="image"
:file $(":file") All input elements with type="file"
:enabled $(":enabled") All enabled input elements
:disabled $(":disabled") All disabled input elements
:selected $(":selected") All selected input elements
:checked $(":checked") All checked input elements

3. Methods and Functions

$(".title").on('click', function(){
   alert("The Title was clicked.");
});
		
$(window).on('scroll', function(){
   console.log( $(window).scrollTop() );
});
		
$(window).on('load resize', function(){
   alert( $(window).width() );
   alert( $(window).height() );
})
		
var logoOffset = $('#site-logo').offset();
console.log(logoOffset);
console.log(logoOffset.left);
console.log(logoOffset.top);


$('#menu-primary-menu > li').each(function(i, e) {
   $(this).addClass('list-' + i);
});

		
$(document).ready(function() {
   // executes when HTML-Document is loaded and DOM is ready
   console.log("document is ready");
});


$(window).load(function() {
   // executes when page is fully loaded, including all objects and images
   console.log("window is loaded");
});
		

Hide/Show:
hide()
show()
toggle()

Fade:
fadeIn()
fadeOut()
fadeToggle()

Slide:
slideDown()
slideUp()
slideToggle()

Animate & Stop:
animate()
stop()

Get Content, Attributes and Index:
text()
html()
val()
attr()
index()

Add Elements/Content:
append()
appendTo()
prepend()
prependTo()
after()
before()
Get and Set CSS Classes:
addClass()
removeClass()
toggleClass()

Get and Set CSS:
css()

Dimensions:
width() and height()
innerWidth() and innerHeight()
outerWidth() and outerHeight()

Traversing Ancestors:
parent()
parents()
closest()

Traversing Descendants:
childen()
find()

Traversing Siblings:
siblings()
next()

Traversing Filtering:
first()
last()
eq()
filter()
not()
		
var headerFixed = function() {
    if ( $('body').hasClass('header-fixed') ) {
        var nav = $('#site-header');

        if ( nav.length ) {
            var offsetTop = nav.offset().top,
                headerHeight = nav.height(),
                injectSpace = $('<div />', {
                    height: headerHeight
                }).insertAfter(nav);

            $(window).on('load scroll', function(){
                if ( $(window).scrollTop() > offsetTop ) {
                    nav.addClass('is-fixed');
                    injectSpace.show();
                } else {
                    nav.removeClass('is-fixed');
                    injectSpace.hide();
                }

                if ( $(window).scrollTop() > 300 ) { 
                    nav.addClass('is-small');
                } else {
                    nav.removeClass('is-small');
                }
            })
        }
    }     
};
		
var retinaLogo = function() {
    var
    retina = window.devicePixelRatio > 1 ? true : false,
    $logo = $('#site-logo img'),
    $logo_retina = $logo.data('retina');

    if ( retina && $logo_retina ) {
        $logo.attr({
            src: $logo.data('retina'),
            width: $logo.data('width'),
            height: $logo.data('height')
        });
    }
};
		
var mobiNav = function() {
    var menuType = 'desktop';

    $(window).on('load resize', function() {
        var
        mode = 'desktop',
        wrapMenu = $('#site-header .header-inner');

        if ( matchMedia( 'only screen and (max-width: 991px)' ).matches )  // $(window).width() < 992
            mode = 'mobile';

        if ( mode != menuType ) {
            menuType = mode;

            if ( mode == 'mobile' ) {
                $('#main-nav').attr('id', 'main-nav-mobi')
                    .appendTo('#site-header')
                    .hide().children('.menu')
                        .find('li:has(ul)')
                        .children('ul')
                            .removeAttr('style')
                            .hide()
                            .before('');
            } else {
                $('#main-nav-mobi').attr('id', 'main-nav')
                    .removeAttr('style')
                    .appendTo(wrapMenu)
                    .find('.sub-menu')
                        .removeAttr('style')
                    .prev().remove();
                        
                $('.mobile-button').removeClass('active');
            }
        }
    });

    $(document).on('click', '.mobile-button', function() {
        $(this).toggleClass('active');
        $('#main-nav-mobi').stop().slideToggle();
    })

    $(document).on('click', '#main-nav-mobi .arrow', function() {
        $(this).toggleClass('active').next().stop().slideToggle();
    })
};
		
var carouselBoxOwl = function() {
    if ( $().owlCarousel ) {
        $('.dlr-carousel-box').each(function(){
            var
            $this = $(this),
            auto = $this.data("auto"),
            loop = $this.data("loop"),
            item = $this.data("column"),
            item2 = $this.data("column2"),
            item3 = $this.data("column3"),
            gap = Number($this.data("gap"));

            $this.find('.owl-carousel').owlCarousel({
                loop: loop,
                margin: gap,
                nav: true,
                navigation : true,
                pagination: true,
                autoplay: auto,
                autoplayTimeout: 5000,
                responsive: {
                    0:{
                        items:item3
                    },
                    600:{
                        items:item2
                    },
                    1000:{
                        items:item
                    }
                }
            });
        });
    }
};