در این بخش قرار است نحوه ساخت یک فایل html بهمراه جاوااسکریپت برای ساخت نمونه فایل qrcode را کد نویسی کنیم.
برای شروع نیاز به یک ویرایشگر کد نویسی داریم که می توانیم از vscode استفاده کنیم.می توانید از یک notepad ساده نیز استفاده کنید.
در کنار این ویرایشگر ما نیاز به یک ابزار داریم تا خروجی کار خود را مشاهده کنیم.به همین منظور می توانیم از مرورگر استفاده کنیم.پیشنهاد ما مرورگر کروم یا فایرفاکس است.
کد نویسی در ویرایشگر
برای شروع برنامه ویرایشگر خود را مثلا vscode را باز کرده و در پوشه جدیدی به نام “qrcode generator” ساخته و درون آن فایل جدیدی به نام index.html با پسوند html ایجاد می کنم.
در این فایل قرار است دستورات html و js خود را بنویسیم.
|
1 2 |
Folder Name: "qrcode generator" File Name: "index.html" |
در این فایل دستوران پایه ای html خود را قرار می دهیم.
در داخل برنامه vscode امکانی وجود دارد که در فایل html با قراردادن واژه ! و زدن enter دستورات اولیه html در فایل ایجاد می شود.
دستورات پایه ای html:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>qrcode generator dejavan.ir</title> </head> <body> </body> </html> |
دو راه برای قرار دادن کدهای اسکریپت در سند html وجود دارد:
- راه اول استفاده از از تگ <script> و نوشتن دستورات اسکریپتی در بین تگ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>qrcode generator dejavan.ir</title> <script type="text/javascript"> </script> </head> <body> </body> </html> |
- راه دوم قرار دادن فایل اسکریپت بصورت external و با پسوند js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>qrcode generator dejavan.ir</title> <script src="./qrcode.js"></script> </head> <body> </body> </html> |
