OBin's Blog: web va lap trinh

New

I AngularJS là gì?

AngularJS là một JS Framework miễn phí rất mạnh do Google xây dựng được hàng ngàn các lập trình viên trên thế giới ưa chuộng và sử dụng. Nó thường được sử dụng để xây dựng các dự án Single Page Application (SPA) và hoạt động dựa trên các thuộc tính mở rộng HTML (các atributes theo quy tắc của Angular).

II Những website học AngularJS miễn phí hay nhất

Bạn có thể tự học AngularJS thông qua những website sau:

1 www.w3schools.com/angular

Với phương pháp dạy dễ hiểu từ cơ bản đến nâng cao qua từng ví dụ cụ thể. Bạn có thể dễ dàng thực hành AngularJS ngay trên website này.

2 www.learn-angular.org

Tương tự w3schools, trang này cũng có phương pháp dậy khá dễ hiểu thông qua những ví dụ cụ thể và thực hành ngay trên site.

3 www.codecademy.com/learn/learn-angularjs

Phương pháp dạy thực hành là chính khiến bạn tiến bộ khá nhanh nhưng bạn phải học và ghi nhớ kiến thức kĩ khóa trước nếu muốn học khóa tiếp theo. Ở website này có 2 loại tài khoản học, loại tài khoản miễn phí ( chỉ học được các khóa đầu ) và loại tài khoản Pro (được học toàn bộ các khóa học, nhưng phải đóng phí)

4 docs.angularjs.org/tutorial

Thực ra đây là trang hướng dẫn của AngularJS, bạn có thể học được hầu hết kiến thức và AngularJS ở đây nhưng phương pháp học khá cỗ điển :) Hoặc bạn có thể học tốt hơn thông qua kênh video của trang này => www.youtube.com/user/angularjs

Trên đây là những website mình đã tìm hiểu, sẽ còn rất nhiều website với nhiều phương pháp dạy hiệu quả khác bạn có thể tự tìm hiểu thêm.

Chúc các bạn học tốt!

Xem thêm:
- Cách chạy lệnh Javascript sau khi load trang hoàn tất
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Tự động chuyển trang ( Auto Redirect ) bằng Timeout trong Javascript khá là dễ dàng, bạn còn có thể tạo ra bộ đếm ngược giúp người dùng có cảm giác dễ chịu hơn khi chờ chuyển trang.

Các bạn làm như sau: Đặt đoạn code này trước thẻ </head>

<script type="text/javascript">
var time = 15; // Thời gian đếm ngược
var page = "http://www.redirect-url.com/"; // Trang bạn muốn chuyển đến
function countDown(){
time--;
gett("timecount").innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('timecount')){
setInterval(countDown, 1000);
gett("timecount").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();
</SCRIPT>

Bạn đặt đoạn code show thời gian đếm ngược này trong body trang :

<h3>Trang sẽ tự chuyển sau <span id="timecount"></span> giây!</h3>

Bạn có thể tùy chỉnh giao diện đếm ngược đẹp hơn.

Các bạn có thể tham khảo thêm những cách tự động chuyển trang ( Auto Redirect ) khác:
- Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302
- Cách tự động chuyển trang ( Auto Redirect ) bằng thẻ Meta HTML

Xem thêm:
- Cách chạy lệnh Javascript sau khi load trang hoàn tất
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Trong bài hướng dẫn Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302 trước chắc bạn đã rõ cách chuyển trang bằng HTTP Status Code 301 hoặc 302. Trong bài này các bạn sử dụng cách đơn giản hơn để Auto Redirect một trang bằng thẻ Meta của HTML.

Đối với cách làm này, bạn có thể cho phép trang A hiển thị trong một thời gian nhất định rồi mới tự động chuyển sang trang B.

Cách làm: Thêm thẻ Meta trước thẻ đóng </head> trong trang HTML như sau:

<html>
<head>
<meta http-equiv="refresh" content="30;url=http://www.redirect-url.com/">
</head>
<body>
...
</body>
</html>

Trong ví dụ trên chúng ta set thời gian hiển thị trước khi redirech sang trang www.redirect-url.com là 30 giây. Bạn set tùy ý bạn khi sử dụng nhé.

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn tự động chuyển trang ( Auto Redirect ) bằng Timeout trong Javascript
- Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Sau đây blog xin giới thiệu đến các blogger Top 20 template blogger cực đẹp, download miễn phí.
Với nhiều phong cách thiết kế khác nhau phù hợp với mọi loại hình website từ thời trang đến giải trí hoặc blog cá nhân.

1Elegant

Demo | Download

2Vanice

Demo | Download

3 Square Modern Magazine

Demo | Download

4 Gamer

Demo | Download

5 Inspiro

Demo | Download

6BlogStar

Demo | Download

7 Mini Magazine

Demo | Download

8Gridz

Demo | Download

9 Timeline

Demo | Download

10Sora Craft

Demo | Download

11 BlogMag

Demo | Download

12Perk Misty

Demo | Download

13Gagism

Demo | Download

14 Sorbet

Demo | Download

15Loveria

Demo | Download

16Addiction

Demo | Download

17 Sora Article

Demo | Download

18ShotMag

Demo | Download

19Magazine Easy News

Demo | Download

20 Flat Mag

Demo | Download

Xem thêm:
- Hướng dẫn gắn nút like facebook cho blogger

- Các mẫu theme miễn phí tuyệt đẹp cho Blogger

- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Thông thường thì bạn chỉ sử dụng 1 code thống kê Google Analytics duy nhất cho website của mình, tuy nhiên trong một số trường hợp bạn phải sử dụng nhiều code Google Analytics khác nhau để thống kê cho từng thuộc tính khác nhau trên website, hoặc bạn muốn thống kê theo từng danh mục chẳng hạn.

Vậy giải pháp là gì? Bạn chỉ cần đặt một thống kê chung cho toàn website, sau đó đặt thống kê cho từng danh mục.

Đầu tiên bạn phải tạo ra nhiều id thuộc tính riêng và lấy id thuộc tính đó để add lên website, id thuộc tính có dạng: UA-123456-1

Sau đó gắng code vào website theo 2 cách sau:

Cách 1:

<script type="text/javascript">
_gaq.push(
  ['_setAccount', 'UA-XXXXX-1'],
  ['_trackPageview'],
  ['a._setAccount', 'UA-XXXXX-2'],
  ['a._trackPageview']
  ['b._setAccount', 'UA-YYYYYY-1'],
  ['b._trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Trong ví dụ trên đã gắn 3 code Analytics khác nhau với 3 id thuộc tính khác nhau là UA-XXXXX-1, UA-XXXXX-2 và UA-YYYYYY-1

Cách 2:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['a._setAccount', 'UA-XXXXX-2']);
_gaq.push(['a._trackPageview']);
_gaq.push(['b._setAccount', 'UA-YYYYY-1']);
_gaq.push(['b._trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Cả 2 cách trên đều sử dụng code dạng mảng để để chứa id thuộc tính.

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn gắn code Google Analytics vào forum Xenforo
- Cách tạo và gắn biểu tượng favicon và favicon động ( dạng gif favicon ) cho website
- Hướng dẫn sử dụng Lazy Load cho website hoặc blog
- Hướng dẫn cách gắn Google Analytics vào Opencart

Tự động chuyển trang bằng HTTP Status Code 301 hoặc 302 là cách tự động chuyển trang (Auto Redirect) đang xem đến một trang khác dựa trên cơ chế của HTTP, nếu trình duyệt nhận được 1 HTTP Response mà HTTP Header có Status code là 301 hoặc 302.

Các cách làm như sau, tùy thuộc vào ngôn ngữ hoặc mã nguồn bạn đang sử dụng:

1 PHP Redirect

<?
 Header( "HTTP/1.1 301 Moved Permanently" );
 Header( "Location: http://www.redirect-url.com" );
 ?>

2 ASP Redirect

<%@ Language=VBScript %>

 <%

 Response.Status="301 Moved Permanently"

 Response.AddHeader "Location","http://www.redirect-url.com/"

 %>

3 ASP .NET Redirect

<script runat="server">

 private void Page_Load(object sender, System.EventArgs e)

 {

 Response.Status = "301 Moved Permanently";

 Response.AddHeader("Location","http://www.redirect-url.com");

 }

 </script>

4 JSP (Java) Redirect

<%

 response.setStatus(301);

 response.setHeader( "Location", "http://www.redirect-url.com/" );

 response.setHeader( "Connection", "close" );

 %>

5 ColdFusion Redirect

<.cfheader statuscode="301" statustext="Moved permanently">

<.cfheader name="Location" value="http://www.redirect-url.com">

6 Ruby on Rails Redirect

def old_action
 headers["Status"] = "301 Moved Permanently"
 redirect_to "http://www.redirect-url.com/"
end

7 CGI PERL Redirect

$q = new CGI;

print $q->redirect("http://www.redirect-url.com/");

Lưu ý: Trong trường hợp bạn muốn xuất một nội dung gì đó ra rồi mới chuyển trang thì cách này sẽ không thành công, vì do cơ chế của HTTP, sau khi trình duyệt nhận được Header status code 301 hoặc 302 với location kèm theo thì nó sẽ tự động chuyển và bỏ qua các nội dung mà bạn muốn xuất. Riêng trong PHP, trước hàm header() mà bạn xuất dù chỉ 1 ký tự thì script sẽ báo lỗi và hàm header() sẽ không được thực hiện, do đó sẽ không xảy ra quá trình tự động chuyển trang.

Chúc các bạn thành công!

Xem thêm:
- Cách tự động chuyển trang ( Auto Redirect ) bằng thẻ Meta HTML
- Hướng dẫn tự động chuyển trang ( Auto Redirect ) bằng Timeout trong Javascript
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Hướng dẫn nhanh sau sẽ giúp bạn làm hiệu ứng tuyết rơi bằng Action Script 3 trong Flash mà không cần phải biết nhiều về Action Script 3.

Bạn làm theo các bước đơn giản sau:

1Tạo file flash với tên bất kì như trong ví dụ này Snow.fla, tạo 1 layer đặt hình background

2 Tạo một layer nằm trên layer background dùng để chứa đoạn code AS 3 sau:

import flash.events.KeyboardEvent;
import Snowflake;

function randRange(low:Number, high:Number):Number {
 var randNum:Number = (Math.random() * (high - low)) + low;
 return randNum;
} 

var snowflakeVect:Vector.<Snowflake> = new Vector.<Snowflake>;

var numberOfSnowflakes:uint = 200;
var toggleAnimation = false;

var showMsg:Boolean = true;

function addSnowflakes():void
{
 var flakeXSpeed:Number;
 var flakeYSpeed:Number;
 
 for (var loop:uint = 0; loop < numberOfSnowflakes; loop++) {
 
  flakeXSpeed = randRange(-1, 1);
     flakeYSpeed = randRange(3, 7);
   
  snowflakeVect.push(new Snowflake(flakeXSpeed, flakeYSpeed));
  
  snowflakeVect[loop].x = Math.random() * stage.stageWidth;
  snowflakeVect[loop].y = Math.random() * stage.stageHeight;

  snowflakeVect[loop].alpha = randRange(0.3, 1);
 
  var flakeScale:Number = randRange(0.3, 0.9); 
  snowflakeVect[loop].scaleX = flakeScale;
  snowflakeVect[loop].scaleY = flakeScale; 
  
  addChild(snowflakeVect[loop]);
  
 }
 
}

function removeSnowflakes():void
{
 for (var loop:uint = 0; loop < numberOfSnowflakes; loop++) {
  
  snowflakeVect[loop].SnowflakeDestructor();
  
  removeChild(snowflakeVect[loop]);  
  
 }
 while(snowflakeVect.length > 0) {
  snowflakeVect.pop();
 }
 
}

addSnowflakes();
toggleAnimation = true;

3 Tạo một file code AS 3 với tên Snowflake.as cho Taget là file Snow.flv chứa đoạn code sau:

package
{
 import flash.display.MovieClip;
 import flash.events.Event;
 
 public class Snowflake extends MovieClip
 {
  var ySpeed:Number;
  var xSpeed:Number;
  
  function Snowflake(theXSpeed:Number, theYSpeed:Number):void
  {
   this.addEventListener(Event.ENTER_FRAME, updateSnowflake);
   
   this.xSpeed = theXSpeed;
   this.ySpeed = theYSpeed;
  
  }
  
  public function SnowflakeDestructor():void
  {
   this.removeEventListener(Event.ENTER_FRAME, updateSnowflake);
  } 
  
  function updateSnowflake(e:Event):void
  {
   this.x += this.xSpeed;
   this.y += this.ySpeed;
   
   if (this.y > (stage.stageHeight + this.height))
   {    

    this.y = 0 - (this.height / 2);
    
    this.xSpeed = (Math.random() * 2) - 1; // Range: -1 to +1
    this.ySpeed = (Math.random() * 4) + 3; // Range: +3 to +7
    
   }
  
  }
  
 }
 
}

Lưu lại và xuất file swf để xem kết quả nhé.

Download file thực tập tại đây

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC
- Tổng hợp hiệu ứng pháo hoa Flash download miễn phí ( Kèm file gốc FLA )
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Một số hiệu ứng ánh sáng chói trong Flash để làm banner, intro...
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Load hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2

Bạn đang sử dụng Blogger và không muốn hiển thị một số nội dung của giao diện PC trên mobile hoặc ngược lại? Hướng dẫn sau sẽ giúp bạn biết cách detect giao diện mobile trên blogger để chỉnh giao diện hoặc đặt banner hay nội dung bất kì.

1 Sử dụng thuộc tính của widget:

Ví dụ ta có một widget BlogArchive như sau:

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

Để nó có thể hiển thị trên mobile ta đặt thêm thuộc tính: mobile='yes':

<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

Ngược lại để không hiển thị trên mobile ta đặt thuộc tính mobile='no' :

<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>

Hoặc bạn cũng có thể đặt thuộc tính mobile='only' để widget chỉ hiển thị trên mobile:

<b:widget id='BlogArchive1' mobile='only' title='Blog Archive' type='BlogArchive'>

2 Sử dụng biến điều kiện boolean: data:blog.isMobile

Ví dụ:

  <b:if cond="data:blog.isMobile">
    <!-- Hiển thị text trên mobile -->
    <a href="http://www.obinb.com">
      Copyright www.obinb.com
    </a>
  <b:else/>
    <!-- Hiển thị hình ảnh trên desktop pc -->
    <a href="http://www.obinb.com">
      <img expr:src="data:fullButton" alt="Copyright www.obinb.com"/>
    </a>
  </b:if>

Lưu ý: Nếu bạn tắt giao diện mobile để sử dụng giao diện custom hoặc responsive thì bạn dùng code sau:

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- Đặt nội dung muốn hiển thị trên mobile tại đây -->
<b:else/>
<!-- Đặt nội dung muốn hiển thị trên Pc tại đây -->
</b:if>

3 Sử dụng Class Css mobile mặc định:

Ví dụ ta đặt trong thẻ body như sau:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Sau đó ta sử dụng css để ẩn hoặc hiển thị một nội dung bất kì với từng giao diện:

/* Cho desktop pc */
.date-posts {
  display:none;
}

/* Cho mobile*/
.mobile .date-posts {
  display:block;
}

Vậy là bạn đã tham khảo xong 3 cách làm, chúc các bạn thành công!

Xem thêm:
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Trong mã nguồn diễn đàn Xenforo luôn tích hợp sẵn bộ soạn thảo mặc định là WYSIWYG. Vì một lí do nào đó bạn muốn tắt nó đi, chỉ sử dụng form nhập nhiệu "sạch sẽ" như ô comment Facebook vậy, hướng dẫn sau sẽ giúp bạn làm điều đó.

Bạn thực hiện như sau:

Đăng nhập tài khoản admin => Admin CP -> Appearance -> Templates -> editor

Thêm AND false vào WYSIWYG tại những vị trí code trong template editor như sau:

<xen:if is="{$showWysiwyg} AND false">
    <textarea name="{$formCtrlNameHtml}" id="{$editorId}_html"  style="display:none" class="textCtrl  MessageEditor">{$messageHtml}</textarea>
    <noscript><textarea name="{$formCtrlName}"  id="{$editorId}" class="textCtrl  MessageEditor">{$message}</textarea></noscript>
<xen:else />
    <textarea name="{$formCtrlName}" id="{$editorId}" class="textCtrl MessageEditor">{$message}</textarea>
</xen:if>
<input type="hidden" name="_xfRelativeResolver" value="{$requestPaths.fullUri}" />

<xen:if is="{$showWysiwyg} AND false">
    <xen:include template="editor_js_setup" />
</xen:if>

Sau đó bạn lưu lại. Ra tạo bài viết hoặc comment xem khung nhập liệu có gì khác không nhé :D

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn tạo biến dùng chung toàn bộ template Xenforo ( Global Template Variable )
- XenTag 2.1 plugin hữu ích cho thành viên & SEO diễn đàn Xenforo
- [8wayRun.Com] XenPorta 1.6.0 - Plugin CMS miễn phí mạnh mẽ cho Xenforo
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Video hướng dẫn chi tiết cách viết Addon cho diễn đàn XenForo

Favicon là biểu tượng (icon) của trang web nằm bên cạnh địa chỉ trang web (URL) trên thanh địa chỉ (Address) trên trình duyệt của người dùng. Nó dùng để nhận diện nhanh website trong danh sách ưa thích của người dùng (favorites)

Sau đây là cách tạo và gắn biểu tượng favicon và favicon động ( dạng gif favicon ) cho website:

1 Tạo và gắn favicon lên website

Định dạng mặc định của favicon là .ico nên sau khi bạn đã thiết kế file hình icon định dạng .png hoặc .gif xong bạn upload lên một trong các website sau: www.favicon.cc , www.favicon.co.uk hoặc www.favicon-generator.org để convert chúng sang định dạng .ico

Sau đó bạn download xuống, upload lên hosting trong mục root của website của bạn (Ngang hành với file index ) và gắn trước thẻ </head> đoạn code sau:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

2 Tạo và gắn favicon động ( dạng gif favicon) cho website

Hiện nay trình duyệt đã hỗ trợ dạng favicon động, favicon định dạng .gif, bạn thực hiện như sau:
Bạn tạo một file hình động animated_favicon.gif hoặc vào website www.animatedfavicon.com để tạo nếu bạn chỉ có thể làm một favicon dạng .png.

Sau đó bạn upload lên folder root của website trên hosting và chèn đoạn code sau vào trước thẻ </head> :

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Vậy là xong, hãy xóa cache trình duyệt trước khi xem kết quả nhé.

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn cách làm banner quảng cáo responsive
- Code popup quảng cáo nằm dưới trình duyệt (popup under)
- Cách chạy lệnh Javascript sau khi load trang hoàn tất
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Hướng dẫn sử dụng Lazy Load cho website hoặc blog
- Cách ẩn số lượng sản phẩm trong danh mục OpenCart

Chúng ta đã biết cách gọi một function Javascript từ file Flash bằng AS3 ở bài viết Cách gọi hàm Javascript từ trong file Flash bằng Action Script 3. Hôm nay chúng ta sẻ tìm hiểu cách gọi một hàm Javascript từ bên trong một file Flash sử dụng Action Script 2.

1Tạo một movie hoặc button để thực hiện hành động gọi hàm Javascript

Đưa button này vào một layer trong stage, nhấn F9 để đặt code Action script như sau vào:

on(rollOver)
{
    getURL("javascript:ActionJS()");
}

Đoạn code trên gắn một hành động rollOver của chuột lên button, khi roll chuột lên button, hàm Javascript ActionJS bên ngoài sẻ được gọi và thực hiện.

2Tạo một file html chứa file flash và hàm Javascript mà file flash đó sẽ gọi

Ví dụ ta sẻ tạo một hàm Javascript như sau:

<script>
   function ActionJS(){ alert('hello world!'); }
</script>

Lưu ý: Chỉ khi chạy file html chứa file flash và JS trên trình duyệt thì hành động mới được thực hiện

Tải file thực hiện ví dụ trong bài viết: Download

Sử dụng Action Script 2 có vẻ đơn giản hơn Action Script 3 phải không nào. Chúc các bạn thành công!

Xem thêm:
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Load hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2
- Load file hình hoặc movie từ bên ngoài vào một file Flash với Action Script 3
- Hướng dẫn gắn link (url) trong Flash Action Script 3
- Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC

Hướng dẫn ngắn sau sẽ giúp bạn tìm hiểu cách gọi một hàm Javascript từ bên trong một file Flash sử dụng Action Script 3.

1Tạo một movie hoặc button để thực hiện hành động gọi hàm Javascript

Đặt Instance name của movie hoặc button đó với tên bắt kì trong ví dụ này là ButtonMC
Đưa button này vào một layer trong stage
Trên time line tạo một layer nằm trên layer của button với keyframe đặt code Action Script như sau:

import flash.external.ExternalInterface;

ButtonMC.addEventListener(MouseEvent.ROLL_OVER, ActionSC);

function ActionSC(e:MouseEvent):void
{
 ExternalInterface.call("ActionJS()");
}

Đoạn code trên dùng ButtonMC để gắn một hành động ROLL_OVER của chuột lên, khi roll chuột lên button, hàm ActionSC sẽ được gọi với một hành động gọi một hàm của Javascript bên ngoài
tên là ActionJS.

2Tạo một file html chứa file flash và hàm Javascript mà file flash đó sẻ gọi

Ví dụ ta sẻ tạo một hàm Javascript như sau:

<script>
   function ActionJS(){ alert('hello world!'); }
</script>

Lưu ý: Chỉ khi chạy file html chứa file flash và JS trên trình duyệt thì hành động mới được thực hiện

Tải file thực hiện ví dụ trong bài viết: Download

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn gọi hàm Javascript từ trong file Flash bằng Action Script 2
- Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Load hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2
- Load file hình hoặc movie từ bên ngoài vào một file Flash với Action Script 3
- Hướng dẫn gắn link (url) trong Flash Action Script 3

Hiện nay website hỗ trợ responsive đã trở nên phổ biến vì vậy việc đặt banner trên những website này cũng gặp khó khăn, đặc biệt với những website có nhiều vị trí banner quảng cáo.
Sau đây là hướng dẫn nhanh những cách làm banner responsive đơn giản để khắc phục vấn đề hiển thị banner quảng cáo trên nhiều giao diện khác nhau.

1Co giảng banner theo tỉ lệ trình duyệt:

Bạn tạo một vị trí banner có kích thước là 600x200px như sau:

<div class="banner">
    <a href="http://www.obinb.com" title="banner">
     <img src="http://www.obinb.com/src/image-banner.gif" alt="banner" />
    </a>
</div>

Đặt code css cho banner: Đây chỉ là ví dụ, tùy vào vị trí mà bạn sẽ code css khác nhau

/* kích thước trình duyệt thông thường */
.banner, .banner img {
 width:600px;
 height:200px; 
}
/* kích thước trình duyệt từ 1024px trở xuống */
@media ( max-width:1024px ){
 .banner, .banner img {
 width:800px;
 height:267px; 
 }
}
/* kích thước trình duyệt từ 460px trở xuống */
@media ( max-width:460px ){
 .banner, .banner img {
 width:100%;
 height:auto; 
 }
}

Cách làm này sẽ giúp banner co giản theo từng kích thước trình duyệt khác nhau, ưu điểm là chỉ cần 1 banner có thể đáp ứng được nhiều màn hình khác nhau, nhược điểm là chỉ sử dụng banner dạng image ( jpg, gif... ), thiết kế banner phải có kích thước lớn nhất có thể để đáp ứng cho màn hình khi vị trí này được phóng lớn ( Để không bị vỡ, xấu khi phóng lớn banner )

2Thay đổi nhiều banner khác nhau để đáp ứng từng kích thước trình duyệt

Bạn tạo một vị trí banner có kích thước là 600x200px như sau:

<div class="banner">
       <a href="http://www.obinb.com" title="banner">
           <img class="banner-size1" src="http://www.obinb.com/src/image-banner1.gif" alt="banner" />
           <img class="banner-size2" src="http://www.obinb.com/src/image-banner2.gif" alt="banner" />
           <img class="banner-size3" src="http://www.obinb.com/src/image-banner2.gif" alt="banner" />
       </a>
</div>

Code css cho banner:

/* kích thước trình duyệt thông thường */
 .banner, .banner img {
  width:600px;
  height:200px; 
 }
 .banner-size1 { 
  display:block;
 }
 .banner-size2, .banner-size3 { 
  display:none;
 }
/* kích thước trình duyệt từ 1024px trở xuống */
@media ( max-width:1024px ){
 .banner, .banner img {
 width:800px;
 height:267px; 
 }
 .banner-size2 { 
 display:block;
 }
 .banner-size1, .banner-size3 { 
  display:none;
 }
}
/* kích thước trình duyệt từ 460px trở xuống */
@media ( max-width:460px ){
 .banner, .banner img {
 width:320px;
 height:300px; 
 }
 .banner-size3 { 
 display:block;
 }
 .banner-size1, .banner-size2 { 
  display:none;
 }
}

Cách làm trên là sử dụng nhiều banner có kích thước khác nhau, tắt và hiển thị chúng theo từng kích thước màn hình. Ưu điểm là có thể dùng nhiều loại banner như images, flash,html... nhượt điểm là tốn công làm nhiều banner khác nhau :D

Trên đây chỉ là 2 cách đơn giản để làm banner responsive, còn rất nhiều cách khác nhau để làm.

Chúc các bạn thành công!

Xem thêm:
- Code popup quảng cáo nằm dưới trình duyệt (popup under)
- Code chèn banner xuất hiện tự động random đơn giản bằng Javascript
- Code popup quảng cáo xuất hiện khi click chuột lần đầu tiên
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Hướng dẫn tạo quảng cáo sau bài viết đầu tiên cho diễn đàn Xenforo

Bạn là webmaster và muốn treo quảng cáo popup nhưng bạn không muốn làm phiền người dùng bởi những quảng cáo đó, vậy làm sao để tạo quảng cáo pop up mà không gây khó chiu cho người truy cập. Sau đây là một dạng quảng cáo pop up không làm phiền người truy cập hay nói đúng hơn là ít làm phiền người truy cập đó là "Pop up under".

Thực hiện:

- Đặt 2 đoạn Script sau trước thẻ </head>:

Script 1 :

 <script>

        //Pop-under window- By JavaScript Kit//Credit notice must stay intact for use//Visit http://javascriptkit.com for this script//specify page to pop-under

        var popunder="http://link-web.com/"

        //specify popunder window features//set 1 to enable a particular feature, 0 to disable

        var winfeatures="width=800,height=510,scrollbars=1,resizable=1,toolbar=1,location=1,menubar=1,status=1,directories=0"

        //Pop-under only once per browser session? (0=no, 1=yes)//Specifying 0 will cause popunder to load every time page is loaded

        var once_per_session=0

        ///No editing beyond here required/////

        function get_cookie(Name) {

        var search = Name + "="

        var returnvalue = "";

        if (document.cookie.length > 0) {

        offset = document.cookie.indexOf(search)

        if (offset != -1) { // if cookie exists

        offset += search.length

        // set index of beginning of value

        end = document.cookie.indexOf(";", offset);

        // set index of end of cookie value

        if (end == -1)

        end = document.cookie.length;

        returnvalue=unescape(document.cookie.substring(offset, end))

        }

        }

        return returnvalue;

        }

        function loadornot(){

        if (get_cookie('popunder')==''){

        loadpopunder()

        document.cookie="popunder=yes"

        }

        }

        function loadpopunder(){

        win2=window.open(popunder,"",winfeatures)

        win2.blur()

        window.focus()

        }

        if (once_per_session==0)

        loadpopunder()

        else

        loadornot()

   </script>

Script 2 :

<script>

    function popup() {

    var url = "http://link-web.com/";

    window.open(url);

    popWin = window.open(page,'popWin');

    popWin.blur();

    window.focus();

    }

    popup();

 </script>

http://link-web.com/ là địa chỉ web bạn muốn quảng cáo pop up
Những nội dung có đánh màu đỏ là phần xét thông số cho cửa sổ pop up ví dụ như chiều cao, chiều rộng, toolbar... bạn có thể thay đổi tùy ý bạn.

Lưu ý: Popup sẽ không xuất hiện trên các trình duyệt sử dụng các add on hay chương trình chặn popup.

Chúc bạn thành công!

Xem thêm:
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Code chèn banner xuất hiện tự động random đơn giản bằng Javascript
- Code popup quảng cáo xuất hiện khi click chuột lần đầu tiên
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Hướng dẫn cách làm banner quảng cáo responsive
- Hướng dẫn tạo quảng cáo sau bài viết đầu tiên cho diễn đàn Xenforo

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp