Xóm Javascript - Học Javascript Cơ Bản

  • Home
  • Business
    • Internet
    • Market
    • Stock
  • Parent Category
    • Child Category 1
      • Sub Child Category 1
      • Sub Child Category 2
      • Sub Child Category 3
    • Child Category 2
    • Child Category 3
    • Child Category 4
  • Featured
  • Health
    • Childcare
    • Doctors
  • Home
  • Business
    • Internet
    • Market
    • Stock
  • Downloads
    • Dvd
    • Games
    • Software
      • Office
  • Parent Category
    • Child Category 1
      • Sub Child Category 1
      • Sub Child Category 2
      • Sub Child Category 3
    • Child Category 2
    • Child Category 3
    • Child Category 4
  • Featured
  • Health
    • Childcare
    • Doctors
  • Uncategorized

Thứ Sáu, 11 tháng 9, 2015

JavaScript Application Architecture với Backbone.js

 Unknown     01:47     javascript, thiết kế website     No comments   

Khi ta làm 1 website nhỏ không sử dụng js đủ thứ thì việc tạo lên 1 mô hình MVC cho js là không cần thiết Mặc dù vậy khi làm 1 website lớn đòi hỏi sử dụng js đủ thứ thì việc dùng jquery và các thư viện js khác sẽ làm js trong ứng dụng của chúng ta càng ngày càng nhìu và việc quản lý nó trở nên khó khăn hơn như việc viết các sự kiện DOM , Ajax và các hàm callbacks của Jquery … vào cùng 1 file thì file đó sẽ ngày càng to ra và sẽ gây khó khăn trong việc nâng cấp và sửa lỗi lúc nầy ta phải tạo ra cấu trúc js rõ ràng hơn cho ứng dụng của mình.



Trong bài hướng dẫn này mình sẽ dùng các thư viện sau :

Jquery :
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.

Backbone js :
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.

Underscorejs :
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.

Requirejs :
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.


Tại sao cần dùng Backbone.js?

Việc tạo ra các web apps single-page và các user interfaces phức tạp sẽ khó hơn khi chỉ dùng jquery .
vấn đề là khi dùng jquery để  tạo lên 1 web apps sẽ viết các code js lồng vào nhau của các jquery callbacks và không có 1 structure cụ thể , Backbone.js hỗ trợ chúng ta tạo ra 1 cấu trúc application rõ ràng hơn theo MVC (Models – Collections- Views) .
Backbone.js tạo structure cho web applications bằng cách cung cấp models với các ràng buộc key-value và custom events, collections với đủ thứ API, views với khai báo xử lý các sự kiện và kết nối nó với mọi các API qua RESTful JSON interface.

Tại sao cần dùng Underscorejs?

Underscore là một utility-belt library cho JavaScript cung cấp rất đủ thứ function hỗ trợ lập trình như map, select, invoke,forEach, map, reduce, filter, every, some,indexOf và còn là 1 template engine js mạnh mẽ giúp bạn làm việc với data json và html dễ dàng và nhanh hơn .

Tại sao cần dùng Requirejs?

Khi viết theo MVC thì  tôi cần 1 cái loader dùng để load các lib , collections, models , views và Requirejs giúp chúng ta làm việc này . Requirejs giúp chúng ta chỉ load các file js cần dùng nên giúp cải thiện tốc độ load của ứng dụng .


Để kết hợp các lib trên thành 1 javascript Application Architecture thì chúng ta phải hiểu các công dụng và cách dùng từng lib nên tớ sẽ giới thiệu chi tiết nhất không phải là không về từng lib trước khi chúng ta gộp nó lại thành một web apps cụ thể .

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Thứ Ba, 25 tháng 8, 2015

Hướng dẫn Upload File bằng AJAX kết hợp với Progress Bar

 Unknown     01:34     Các phép toán trong Javascript cơ bản, sb admin 2     No comments   

Chào các bạn! thân mến hôm nay mính sẽ quẩy với các tình yêu một bài giảng khá đơn giản

Khi nghe đến tiêu đề thì chắc hẳn các bạn không lạ lẫm gì với kỹ thuật AJAX trong Javascript rồi. Nếu như trước đây, các bạn từng biết cách làm sao đập phá cái AJAX trong việc gửi comment, load trang, thêm giỏ hàng..v...v...Và bây giờ các bạn sẽ được làm quen với Kỹ thuật AJAX với Upload và cách các bạn có thể Upload một lúc nhiều File cũng bằng chính kỹ thuật này.
Trong đó, các cấu trúc mà tôi đã tạo sẵn đã bao gồm thư viện Bootstrap vào trong đó. Bạn có thể tải Bootstrap tại
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.
và chép file bootstrap.min.css vào thư mục như cấu trúc của tôi bên trên.



Trong tệp tin tôi gửi đến mọi người này, tôi cũng đã customize CSS một số thứ và đã demo ngay khi các bạn mở file này lên.

Các thánh các bạn nên lưu ý những thứ sau trong file của tôi:
1. File Input sẽ có id là "myfile"
2. Để Upload nhiều file cùng lúc các bạn không quên đến thuộc tính Multiple trong File Input nhé.
3. Form có sự kiện onsubmit gửi tới hàm doUpload()
4. Button Cancle sẽ có sự kiện onclick gửi tới hàm cancleUpload()
5. Source JS tôi trỏ đến file function.js
6. Vùng div#progress-group do tôi tạo ra để khi chúng ta tải lên sẽ tạo ra thêm các vùng chứa các thanh tiến trình tại đây.
7. Cuối cùng là thẻ image tôi chèn ở đầu body, giúp cho việc chúng ta sử dụng AJAX được trơn tru hơn, bằng cách load file hình này vào trước để trình duyệt cache.

Rồi trong những tệp function.js của tôi sẽ sẽ biểu thị trên màn hình bằng các bước sau:
Các bạn nên lưu ý các vấn đề như sau:
1. Javascript phân biệt hoa thường (lỗi này gặp rất nhiều)
2. Biết cách sử dụng JSON và cách bẫy lỗi JSON
3. Sử dụng sự kiện event trả về trong addEventListener, các bạn cũng nên lưu ý đối số cuối cùng trong addEventListener nhé, bạn có thể tham khảo tại đây :
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.

4. Cuối cùng, tôi nghĩ là khi đến với bài viết này, các bạn cũng đã hiểu qua về Javascript và AJAX cũng ít nhiều rồi. Nếu chưa nắm rõ bạn có thể tham khảo lại 2 Video của thầy Kenny Huy tại đây:
1.
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.

2.
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.



Tiếp tục, chúng ta sẽ đến với phần Server-side và ở đây chính là PHP. Các bạn hãy tạo ra file upload.php :


Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Thứ Sáu, 21 tháng 8, 2015

Javascript là gì ? liệu tự học dễ không

 Unknown     02:19     Câu lệnh điều kiện if, thiết kế website     No comments   

Mặc dù rất chán,  Thế nhưng bài đầu tiên cũng phải giới thiệu Javascript là gì? Dẫu Javascipt có là cái chi chi thì  mình cũng phải “chi chi với nó” một chút vẫn nên theo đuổi tìm tòi môn này.



Ban đầu Javascript có tên là Live Script được phát triển bởi tên tuổi lẫy lừng Nestcape và trong giới IT. Sau khi ra mắt vào năm 1995 nó được Apple, Borland, Informix, Oracle, Sybase, HP và IBM hỗ trợ. Hiểu được tầm quan trọng của lập trình trên nền web Microsoft cũng nhảy vào hỗ trợ và vận động để ECMA (hiệp hội các nhà sản xuất máy tính) công nhận Javascript là ngôn ngữ code tiêu chuẩn của tổ chức quốc tế này.  Microsoft sau đó dựa trên Javascript để tạo ra ngôn ngữ lập trình VBScript Nhưng Javascript vẫn mãi là ngôn ngữ tiêu chuẩn của thế giới web

JavaScript được tích hợp vào trong tập tin HTML nó có khả năng sử dụng các CGI (chuẩn kết nối chương trình ứng dụng với web server) xử lý các thông tin và biểu mẫu giúp trang web thêm sinh động.

Rất dễ dàng tạo ra các trang web từ ngôn ngữ HTML, nhưng đó là các trang web tĩnh. Các tài liệu HTML chắc chắn không tương tác với mọi người ngoài việc cung cấp các đường link đến các tài nguyên khác trên internet. Tuy nhiên việc tạo ra các CGI (Common Graphics Interface) đã m ở ra cơ hội mới để làm các trang HTML tĩnh tại sinh động hơn.

Javascript ra đời dựa trên một nhu cầu hợp lý là giảm tải cho các server. Thay vì  toàn bộ các các thông tin dữ liệu phải được trao đổi trực tiếp giữa trình duyệt và web server thì nó được Javascript tiền xử lý ngay trên trình duyệt trước khi gởi đến các web server. Javascript đã làm giảm lưu lượng truy cập giữa server và client hay nói cách khác nó đã biến máy tính của chúng ta thành một server tạm thời xử lý một số tác vụ đơn giản. Ví dụ, một trang thu thập dữ liệu từ người dùng không phải là không sử dụng các đoạn code JavaScript để xác nhận tính hợp lý của thông tin trước khi gởi các dữ liệu này về server để xử lý.

Javascript có một rất nhiều tính năng và lệnh để thực hiện các phép tính toán học, xử lý chuỗi, âm thanh, hình ảnh, các cửa sổ trình duyệt, kiểm tra các đường dẫn URL, và thông tin được nhập vào các biểu mẫu online. Các đoạn code xử lý này được chèn trực tiếp vào trang web và được trình duyệt xử lý ngay trên máy tính của bạn.

Javascript có mười đặc điểm cơ bản mà bất cứ một coder nào cũng phải biết.

1. Javascript không phải là không xử lý các mã HTML. Javascript nó được đính kèm và thực thi trong các tài tài liệu HTML. Hầu hết các đối tượng Javascript đều liên quan đến các thẻ HTML (HTML tags). Javascript dựa vào HTML để giúp các ứng dụng web hoạt động

2. Javascript phụ thuộc môi trường hoạt động. Javascript là một ngôn ngữ kịch bản, một chương trình chạy trực tiếp trên trình duyệt web (Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc..). Việc quan tâm đến môi trường hoạt động của Javascript rất quan trọng vì các ứng dụng Javascript sẽ hoạt động khác nhau trên các trình duyệt khác nhau.

3. Javascript hoàn toàn là một ngôn ngữ biên dịch – nó được trình duyệt biên dịch và thực thi. Nó không cần một trình biên dịch tiền xử lý.

4. Javascrip là một ngôn ngữ linh hoạt. Trong Javascript ta không phải là không khai báo đủ thứ kiểu biến, thực thi các chương trình với các biến không xác định.

5. Javascript dựa trên các đối tượng – Javascript là một ngôn ngữ lập trình hướng đối tượng giống như Java. Thực ra phải nói chính xác là “dựa trên các đối tượng” vì các đối tượng của Javascript đáp ứng tức thời và không có tính kế thừa.

6. Javascript được điều khiển bởi các sự kiện – Hầu hết các đoạn code Javascript đáp ứng các sự kiện do mọi người hoặc hệ thống gây nên. Các đối tượng HTML thường dùng để tăng cường hỗ trợ các sự kiện.

7. JavaScript không phải là Java - hai ngôn ngữ được tạo ra bởi các công sở khác nhau. Mặc dù sự trùng tên không phải ngẫu nhiên mà vì lý do tiếp thị.

8. Javascript là một ngôn ngữ đa dụng. Ngôn ngữ lập trình này được dùng trong các trường hợp để giải quyết đủ thứ  rắc rối khác nhau như: toán học, đồ họa…

9. Javascript đang được phát triển không ngừng. Đây là một điều tốt Thế nhưng nó cũng gây ra vấn đề đối với các lập trình viên, họ phải luôn luôn cập nhật kiến thức để tạo ra các ứng dụng phù hợp cho người sử dung trên các trình duyệt khác nhau.

10. Javascript bao hàm rất rất nhiều lĩnh vực. Mặc dù Javascript được tạo ra chủ yếu dành cho máy khách (client)  Nhưng nó cũng được sử dụng tại các server nữa. Javascript ngôn ngữ tự nhiên của các công cụ phát triển web như Macromedia Dreamweaver hay IntraBuilder Borland
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Tự học Javascript cùng Blog Thiết Kế

 Unknown     02:16     Các phép toán trong Javascript cơ bản, Câu lệnh điều kiện if     No comments   

Những người từng trao đổi với chúng tôi đều biết rằng HHV đối với IT là dân ngoại đạo không phải là dân lập trình. Với việc thiết kế website lại càng chưa từng kinh qua bất cứ trường lớp nào. HHV đến với việc làm Blog và Website là vì có mong ước như một trang web của Phật giáo . Tuy nhiên khi ước nguyện ấy thành sự thật thì HHV lại khám phá ra tôi có một mối quan tâm khác đó là nét đẹp trong thiết kế đặc biệt là thiết kế web. Đối với HHV thì được thưởng thức các thiết kế đẹp là một niềm vui.

Thiết kế website trên nền Bloger Blogspot tương đối đơn giản chúng ta chỉ cần nắm vững cấu trúc Blogger (XML), CSS và JavaScript có thể nắm thêm việc cắt HTML cũng không thành vấn đề. Với JavaScript HHV từng đọc qua quyển JavaScript for Dummies trong khoảng 1 tuần vào năm 2008. Mớ kiến thức ít ỏi đó không giúp được gì  rất nhiều cho HHV trong hiện tại. Chính kết luận là HHV quyết định sẽ tự học lại Javascript.



Mặc dù có  đủ thứ phương tiện thuận lợi Nhưng thách thức kinh khủng nhất chính là việc kiên trì theo đuổi. Hy vọng việc viết ra những cột mốc trong việc tự học này không chỉ giúp chúng tôi complete khóa học mà còn giúp những chúng ta nào có ý định tìm hiểu về JavaScript.
Nếu bạn không thể học thì hãy đến với chúng tôi : Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Chủ Nhật, 16 tháng 8, 2015

SB Admin 2 - Giao diện trang quản trị miễn phí và chuyên nghiệp

 Unknown     23:54     sb admin 2, thiết kế web, thiết kế website     No comments   



SB Amin v2.0 là giao diện được thiết kế bằng Bootstrap, với sự hỗ trợ của Javascript, jquery.

Được thiết kế theo phong cách thân thiện với người dùng, nhưng SB Admin vẫn giữ được phong cách thiết kế chuyên nghiệp, các widget được bố trí rất phù hợp, bố cục của giao diện không bị loạn, dư thừa.

Với sự hỗ trợ của Html5, SB Admin đã thể hiện sự chuyên nghiệp của mình trong việc hỗ trợ cho quản trị viên nắm rõ được thông số bằng các biểu đồ Html5.

_______________________________________________

Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Thứ Sáu, 14 tháng 8, 2015

Grayscale giao diện được thiết kế chuyên nghiệp trên nền Bootstrap 3, HTML5, jQuery

 Unknown     02:16     javascript, thiết kế web, thiết kế website     No comments   


Sự chuyên nghiệp trong thiết kế của Grayscale được thể hiện rõ nét ở ngay phần slide toàn màn hình. Với thiết kế màu tối và hình nền phù hợp, Grayscale tạo ra một cảm giác dịu nhẹ mang tính chuyên nghiệp.

Slide được thiết kế đi kèm với màu chữ #fff và font phù hợp với thiết kế giao diện, điều này càng làm nổi bật sự sang trọng và chuyên nghiệp của giao diện

Bên dưới footer, nhân viên thiết kế cũng sử dụng gam màu tối cho phần bản đồ Google map. Tạo nên một khung cảnh tối màu nhưng sang trọng cho toàn bộ giao diện.

____________________________________________

Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Thứ Năm, 13 tháng 8, 2015

Sử dụng javascript trong việc thiết kế giao diện website

 Unknown     01:06     thiết kế web, thiết kế website     No comments   



Lens là giao diện tiêu biểu được thiết kế dựa trên javascript.

Lens có slideshow được lập trình bằng javascript, với sự hỗ trợ của DOM, bạn có thể dễ dàng thiết kế một slide như trên với javascript và DOM cơ bản.

Với sự hỗ trợ của javascript, Lens có thể tùy biến hiển thị bố cục trên nhiều thiết bị truy cập khác nhau như: tablet,mobile, pc. Việc tạo một slide có thểm 2 nút Tiến và Lui không hề khó với javascript, tất cả hoàn toàn là lập trình javascript cơ bản.

Các list ảnh ở cột bên phải cũng được thiết kế bởi javascript, để hiện ra danh sách ảnh bạn chỉ cầ gọi đến ID của danh sách ảnh sau đó dùng một vòng lặp mà append ảnh tới đối tượng div chứa danh sách ảnh.

_____________________________________________________

Dịch vụ thiết kế website chuẩn SEO Onpage: iGuru.vn



Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Bài đăng cũ hơn Trang chủ

Recent Posts

Categories

  • Các phép toán trong Javascript cơ bản
  • Câu lệnh điều kiện if
  • else
  • javascript
  • jquery
  • sb admin 2
  • switch
  • thiết kế web
  • thiết kế website

Text Widget

Blog Archive

  • ▼  2015 (34)
    • ▼  tháng 9 (1)
      • JavaScript Application Architecture với Backbone.js
    • ►  tháng 8 (12)
    • ►  tháng 7 (8)
    • ►  tháng 6 (13)

Advertisement

Được tạo bởi Blogger.

Labels

  • Các phép toán trong Javascript cơ bản
  • Câu lệnh điều kiện if
  • else
  • javascript
  • jquery
  • sb admin 2
  • switch
  • thiết kế web
  • thiết kế website

Labels

  • Các phép toán trong Javascript cơ bản
  • Câu lệnh điều kiện if
  • else
  • javascript
  • jquery
  • sb admin 2
  • switch
  • thiết kế web
  • thiết kế website

Copyright © Xóm Javascript - Học Javascript Cơ Bản