From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/th/learn/accessibility/index.html | 62 +++++++ files/th/learn/css/index.html | 45 +++++ files/th/learn/front-end_web_developer/index.html | 193 +++++++++++++++++++++ files/th/learn/html/index.html | 58 +++++++ files/th/learn/index.html | 139 +++++++++++++++ files/th/learn/javascript/index.html | 66 +++++++ .../index.html" | 50 ++++++ .../index.html" | 55 ++++++ 8 files changed, 668 insertions(+) create mode 100644 files/th/learn/accessibility/index.html create mode 100644 files/th/learn/css/index.html create mode 100644 files/th/learn/front-end_web_developer/index.html create mode 100644 files/th/learn/html/index.html create mode 100644 files/th/learn/index.html create mode 100644 files/th/learn/javascript/index.html create mode 100644 "files/th/learn/\340\270\235\340\270\261\340\271\210\340\270\207\340\271\200\340\270\213\340\270\264\340\270\243\340\271\214\340\270\237\340\271\200\340\270\247\340\270\255\340\270\243\340\271\214/index.html" create mode 100644 "files/th/learn/\340\271\200\340\270\243\340\270\264\340\271\210\340\270\241\340\270\225\340\271\211\340\270\231\340\271\203\340\270\212\340\271\211\340\270\207\340\270\262\340\270\231\340\271\200\340\270\247\340\271\207\340\270\232/index.html" (limited to 'files/th/learn') diff --git a/files/th/learn/accessibility/index.html b/files/th/learn/accessibility/index.html new file mode 100644 index 0000000000..66e2bc7961 --- /dev/null +++ b/files/th/learn/accessibility/index.html @@ -0,0 +1,62 @@ +--- +title: Accessibility +slug: Learn/Accessibility +tags: + - ARIA + - Accessibility + - Articles + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - NeedsTranslation + - TopicStub +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer, but your knowledge needs to go further than just using the technologies — you need to use them responsibly so that you maximize the audience for your websites and don't lock anyone out of using them. To achieve this, you need to adhere to general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), do cross browser testing, and consider accessibility from the start. In this module, we'll cover the latter in detail.

+ +

Prerequisites

+ +

To get the most out of this module, it would be a good idea to either work through at least the first two modules of the HTML, CSS, and JavaScript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as JSBin or Thimble.

+
+ +

Guides

+ +
+
What is accessibility?
+
This article starts the module off with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
+
HTML: A good basis for accessibility
+
A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.
+
CSS and JavaScript accessibility best practices
+
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.
+
WAI-ARIA basics
+
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
+
Accessible multimedia
+
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.
+
Mobile accessibility
+
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
+
+ +

Assessments

+ +
+
Accessibility troubleshooting
+
In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
+
+ +

See also

+ + diff --git a/files/th/learn/css/index.html b/files/th/learn/css/index.html new file mode 100644 index 0000000000..03b2f56611 --- /dev/null +++ b/files/th/learn/css/index.html @@ -0,0 +1,45 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +

Whereas {{glossary("HTML")}} only specifies content structure, another major Web technology called {{Glossary('CSS')}} specifies how the content should look.

+ +

CSS stands for Cascading style sheet. You can write CSS code inside {{HTMLElement("style")}} tags, but you normally write separate .css files so you can reuse styling information. CSS uses selectors to apply styles to HTML elements. We suggest you start with the following pages to pick up some skills and learn how to use CSS properly. Pick a page that looks interesting to you. If you don't know where to start, move from the first basic skill to the last advanced skill.

+ +
+
+

The basics

+ +

Start here if you aren't familiar with CSS:

+ +
+
What CSS properties are & how to use them
+
This article explains how to use selectors apply CSS properties to HTML elements.
+
Basic text styling in CSS
+
Styling text is one easy application of CSS. Learn how in this article.
+
Using CSS in a webpage
+
Knowing CSS is one thing, but you also need to make it play well with {{Glossary("HTML")}}. The article explains how.
+
+
+ +
+

In depth

+ +

Once you get used to working with CSS, here are some details to explore:

+ +
+
CSS Reference
+
An exhaustive reference for seasoned Web developers describing every CSS property and concept.
+
+
+
+ +

 

diff --git a/files/th/learn/front-end_web_developer/index.html b/files/th/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..0f845fc458 --- /dev/null +++ b/files/th/learn/front-end_web_developer/index.html @@ -0,0 +1,193 @@ +--- +title: Front-end web developer +slug: Learn/Front-end_web_developer +tags: + - CSS + - HTML + - JavaScript +translation_of: Learn/Front-end_web_developer +--- +

{{learnsidebar}}

+ +

ยินดีต้อนรับสู่เส้นทางการเรียนรู้สำหรับนักพัฒนาเว็บส่วนหน้าของเรา!

+ +

ที่นี่เรามีหลักสูตรโครงสร้างที่จะสอนทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อเป็นนักพัฒนาเว็บส่วนหน้า เพียงทำงานผ่านแต่ละส่วนเรียนรู้ทักษะใหม่ ๆ (หรือปรับปรุงทักษะที่มีอยู่) ตามที่คุณไป แต่ละส่วนมีแบบฝึกหัดและการประเมินผลเพื่อทดสอบความเข้าใจของคุณก่อนที่จะก้าวไปข้างหน้า

+ +

วิชาที่ครอบคลุม

+ +

วิชาที่ครอบคลุมคือ:

+ + + +

You can work through sections in order, but each one is also self-contained. For example, if you already know HTML, you can skip ahead to the CSS section.

+ +

ข้อกำหนดเบื้องต้น

+ +

คุณไม่จำเป็นที่ต้องมีความรู้มาก่อนที่จะเรียนหลักสูตรนี้ เพียงแค่คุณมี ความตั้งใจที่จะเรียนรู้ คอมพิวเตอร์ที่สามารถใช้งานเบราว์เซอร์และสามารถเชื่อมต่ออินเทอร์เน็ตได้

+ +

หากคุณไม่แน่ใจว่าการพัฒนาเว็บไซต์นี้หเฝฝเหมาะกับคุณหรือไม่ และหากคุณต้องการคำแนะนำอย่างละเอียดก่อนเรียนหลักสูตรนี้, ให้เริ่มทดลองใช้งาน Getting started with the web 

+ +

Getting help

+ +

We have tried to make learning front-end web development as comfortable as possible, but you will probably still get stuck because you don't understand something, or some code is just not working.

+ +

Don't panic. We all get stuck, whether we are beginner or professional web developers. The Learning and getting help article provides you with a series of tips for looking up information and helping yourself. If you are still stuck, feel free to post a question on our Discourse forum.

+ +

Let's get started. Good luck!

+ +

The learning pathway

+ +

Getting started

+ +

Time to complete: 1.5–2 hours

+ +

Prerequisites

+ +

Nothing except basic computer literacy.

+ +

How will I know I'm ready to move on?

+ +

There are no assessments in this part of the course. But make sure you don't skip. It is important to get you set up and ready to do work for exercises later on in the course.

+ +

Guides

+ + + +

Semantics and structure with HTML

+ +

Time to complete: 35–50 hours

+ +

Prerequisites

+ +

Nothing except basic computer literacy, and a basic web development environment.

+ +

How will I know I'm ready to move on?

+ +

The assessments in each module are designed to test your knowledge of the subject matter.  Completing the assessments confirms that you are ready to move on to the next module.

+ +

Modules

+ + + +

Styling and layout with CSS

+ +

Time to complete: 90–120 hours

+ +

Prerequisites

+ +

It is recommended that you have basic HTML knowledge before starting to learn CSS. You should at least study Introduction to HTML first.

+ +

How will I know I'm ready to move on?

+ +

The assessments in each module are designed to test your knowledge of the subject matter.  Completing the assessments confirms that you are ready to move on to the next module.

+ +

Modules

+ + + +

Additional resources

+ + + +

Interactivity with JavaScript

+ +

Time to complete: 135–185 hours

+ +

Prerequisites

+ +

It is recommended that you have basic HTML knowledge before starting to learn JavaScript. You should at least study Introduction to HTML first.

+ +

How will I know I'm ready to move on?

+ +

The assessments in each module are designed to test your knowledge of the subject matter.  Completing the assessments confirms that you are ready to move on to the next module.

+ +

Modules

+ + + +

Web forms — Working with user data

+ +

Time to complete: 40–50 hours

+ +

Prerequisites

+ +

Forms require HTML, CSS, and JavaScript knowledge. Given the complexity of working with forms, it is a dedicated topic.

+ +

How will I know I'm ready to move on?

+ +

The assessments in each module are designed to test your knowledge of the subject matter.  Completing the assessments confirms that you are ready to move on to the next module.

+ +

Modules

+ + + +

Making the web work for everyone

+ +

Time to complete: 60–75 hours

+ +

Prerequisites

+ +

เป็นความคิดที่ดีที่จะรู้จัก HTML, CSS และ JavaScript ก่อนที่จะทำงานในส่วนนี้ เทคนิคและแนวปฏิบัติที่ดีที่สุดหลายเรื่องมีหลายเทคโนโลยี

+ +

ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป?

+ +

การประเมินผลในแต่ละโมดูลถูกออกแบบมาเพื่อทดสอบความรู้ของคุณในเรื่อง การดำเนินการประเมินให้เสร็จสมบูรณ์เป็นการยืนยันว่าคุณพร้อมที่จะไปยังโมดูลถัดไป

+ +

โมดูล

+ + + +

เครื่องมือที่ทันสมัย

+ +

ระยะเวลาดำเนินการ: 55–90 ชั่วโมง

+ +

ข้อกำหนดเบื้องต้น

+ +

เป็นความคิดที่ดีที่จะรู้ HTML, CSS และ JavaScript ก่อนที่จะทำงานในส่วนนี้เนื่องจากเครื่องมือที่กล่าวถึงทำงานร่วมกับเทคโนโลยีเหล่านี้มากมาย

+ +

ฉันจะรู้ได้อย่างไรว่าฉันพร้อมจะเดินหน้าต่อไป?

+ +

ไม่มีบทความการประเมินเฉพาะในชุดของโมดูลนี้ แบบฝึกหัดกรณีศึกษาในตอนท้ายของโมดูลที่สองและสามเตรียมความพร้อมสำหรับการเข้าใจความจำเป็นของเครื่องมือที่ทันสมัย

+ +

โมดูล

+ + diff --git a/files/th/learn/html/index.html b/files/th/learn/html/index.html new file mode 100644 index 0000000000..e2aad092ab --- /dev/null +++ b/files/th/learn/html/index.html @@ -0,0 +1,58 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.

+ +

Learning pathway

+ +

Ideally you should start your learning journey by learning HTML. Start by reading Introduction to HTML. You may then move on to learning about more advanced topics such as:

+ + + +

Before starting this topic, you should have at least basic familiarity with using computers, and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both are parts of our Getting started with the web complete beginner's module.

+ +

It is recommended that you work through Getting started with the web before attempting this topic, however it isn't absolutely necessary; much of what is covered in the HTML basics article is also covered in our Introduction to HTML module, albeit in a lot more detail.

+ +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

+ +
+
Introduction to HTML
+
This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.
+
Multimedia and embedding
+
This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
+
HTML Tables
+
Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.
+
HTML Forms
+
Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.
+
+ +

Solving common HTML problems

+ +

Use HTML to solve common problems provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

+ +

See also

+ +
+
+
HTML (HyperText Markup Language) on MDN
+
The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.
+
+
diff --git a/files/th/learn/index.html b/files/th/learn/index.html new file mode 100644 index 0000000000..bbc331db41 --- /dev/null +++ b/files/th/learn/index.html @@ -0,0 +1,139 @@ +--- +title: เรียนรู้การพัฒนาเว็บ +slug: Learn +tags: + - Beginner + - CSS + - HTML + - Intro + - Landing + - NeedsTranslation + - Web + - สารบัญ + - เรียนรู้ +translation_of: Learn +--- +

{{LearnSidebar}}

+ +
+

ยินดีต้อนรับสู่พื้นที่เรียนรู้ MDN จุดมุ่งหมายของบทความชุดนี้ คือการสร้างพื้นฐานที่จะทำให้ผู้เริ่มต้นสามารถเริ่มพัฒนาเว็บไซต์แบบง่ายได้

+ +

จุดมุ่งหมายของพื้นที่นี้ไม่ใช่การนำคุณจากการเป็น "ผู้เริ่มต้น" ไปสู่การเป็น"ผู้เชี่ยวชาญ" แต่จะเป็นการทำให้คุณสามารถเรียนรู้ ด้วยวิธีของคุณเองได้อย่างผ่อนคลายไม่ว่าจะเป็นการเรียนรู้จาก ส่วนที่เหลือของ MDNหรือจากแหล่งข้อมูลระดับกลางถึงสูงอื่นๆที่จำเป็นต้องใช้ความรู้พื้นฐาน

+ +

ถ้าคุณเป็นผู้เริ่มต้นจริงๆ การพัฒนาเว็บอาจเป็นเรื่องที่ท้าทายพวกเรา จะนำพาคุณและมอบรายละเอียดที่เพียงพอที่จะทำให้คุณรู้สึกผ่อนคลาย และสามารถเรียนรู้ในหัวข้อต่างๆได้อย่างถูกต้อง คุณจะรู้สึกสบายไม่ว่าคุณ จะเป็นนักเรียนที่กำลังเรียนรู้เกี่ยวกับการพัฒนาเว็บ หรือจะเป็นอาจารณ์ ที่กำลังมองหาเนื้อหาสำหรับชั้นเรียน, ผู้ที่ทำเป็นงานอดิเรก, หรือผู้ที่เพียงต้องการที่จะเรียนรู้ถึงการทำงานของเทคโนโลยีเว็บ

+
+ +
+

สำคัญ : เนื้อหาในพื้นที่การเรียนรู้จะถูกเพิ่มอยู่สม่ำเสมอ ถ้าคุณมีคำถามเกี่ยวกับหัวข้อ ที่ต้องการให้ครอบคุม หรือรู้สึกว่าขาดหาย กรุณาติดต่อพวกเราส่วน {{anch("ติดต่อเรา")}} ด้านล่าง

+
+ +

จะเริ่มต้นที่ไหนดี

+ + + +
+

หมายเหตุ: อภิธานศัพท์ ของเราจะช่วยให้คำจำกัดความของคำศัพท์ต่างๆ

+
+ +

{{LearnBox({"title":"Quick learning: Vocabulary"})}}

+ +

เนื้อหาที่ครอบคลุม

+ +

นี่คือเนื้อหาที่เราครอบคลุมในพื้นที่เรียนรู้ MDN

+ +
+
เริ่มต้นกับเว็บ
+
Provides a practical introduction to web development for complete beginners.
+
HTML — โครงสร้างของเว็บ
+
HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is. This topic teaches HTML in detail.
+
CSS — ตกแต่งเว็บ
+
CSS is the language that we can use to style and lay out our web content, as well as adding behavior like animation. This topic provides comprehensive coverage of CSS.
+
JavaScript — การเขียนสคริปต์แบบไดนามิกด้านไคลเอนต์
+
JavaScript is the scripting language used to add dynamic functionality to web pages. This topic teaches all the essentials needed to become comfortable with writing and understanding JavaScript.
+
การเข้าถึง — ทำให้ทุกคนสามารถใช้เว็บไซต์ได้
+
Accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. This topic gives you all you need to know.
+
ประสิทธิภาพ — การทำให้เว็บไซต์เร็วและมีการตอบสนอง
+
Web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a users bandwidth, screen size, network, or device capabilities.
+
เครื่องมือและการทดสอบ
+
This topic covers the tools developers use to facilitate their work, such as cross browser testing tools.
+
การเขียนโปรแกรมเว็บไซต์ฝั่งเซอร์เวอร์
+
Even if you are concentrating on client-side web development, it is still useful to know how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials showing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js). 
+
+ +

รับโค้ดตัวอย่างของเรา

+ +

โค้ดตัวอย่างที่คุณจะเจอในพื้นที่เรียนรู้นั้นมีอยู่บน GitHub ทั้งหมด หากคุณต้องการที่จะ คัดลอกมันลงบนคอมพิวเตอร์ของคุณ วิธีที่ง่ายที่สุดคือการดาวน์โหลดไฟล์ ZIP จากมาสเตอร์ branch ล่าสุด

+ +

หากคุณต้องการที่จะคัดลอกจากรีพอซิทรีในรูปแบบที่ยืดหยุ่นกว่า ซึ่งจะทำให้คุณสามารถอัปเดต ได้อย่างอัตโนมัติ คุณจะต้องทำตามขั้นตอนที่ซับซ้อนกว่าเดิมดังต่อไปนี้:

+ +
    +
  1. ติดตั้ง Git บนเครื่องของคุณ นี่คือซอฟต์แวร์สำหรับควบคุมการปรับปรุงแก้ไขที่ GitHub ใช้เป็นฐานในการทำงาน
    2. +
  2. สร้างบัญชี GitHub
    3. +
  3. เมื่อสร้างบัญชีเสร็จแล้ว ลงชื่อเข้าใช้ที่ github.com ด้วยชื่อผู้ใช้และรหัสผ่านของคุณ
    4. +
  4. เปิดคอมมานด์พรอมต์ (วินโดวส์) หรือเทอร์มินัล (ลีนุกซ์, แมคโอเอส) บนคอมพิวเตอร์ของคุณ
    5. +
  5. การคัดลอกรีพอซิทรีของพื้นที่เรียนรู้นี้สู่โฟลเดอร์ชื่อ learning-area ณ ตำแหน่งปัจจุบันที่คอมมานด์พรอมต์หรือเทอร์มินัลกำลังชี้อยู่ สามารถทำได้ด้วยคำสั่งต่อไปนี้: + 
    git clone https://github.com/mdn/learning-area
    +
    6. +
  6. ตอนนี้คุณสามารถเข้าสู่ไดเรกทอรี และหาไฟล์ที่คุณต้องการ (สามารถทำได้โดยการใช้ Finder/File Explorer หรือ คำสั่ง cd)
    7. +
+ +

คุณสามารถอัปเดต learning-area รีพอซิทรีที่มีการเปลี่ยนแปลงในมาสเตอร์บน GitHub ด้วยขั้นตอนต่อไปนี้:

+ +
    +
  1. ในคอมมานด์พรอมต์หรือเทอร์มินัลของคุณ ให้เข้าไปข้างในไดเรกทอรี learning-area  โดยใช้ cd ยกตัวอย่างเช่น หากคุณกำลังอยู่ในไดเรกทอรีแม่ ให้ใช้คำสั่ง: + + 
    cd learning-area
    +
    2. +
  2. อัปเดตรีพอซิทรีด้วยคำสั่งต่อไปนี้: + 
    git pull
    +
    3. +
+ +

ติดต่อเรา

+ +

 ถ้าคุณต้องการติดต่อพวกเราเกี่ยวกับบางสิ่ง ทางเลือกที่ดีที่สุดคือ ทิ้งข้อความที่ learning area discourse thread หรือ IRC channels ของพวกเรา เราต้องการทราบข้อมูลจากคุณเกี่ยวกับสิ่งที่ คุณคิดว่าผิดพลาดหรือขาดหายไปในเว็บไซต์ ขอหัวข้อการเรียนรู้ใหม่ ขอความช่วยเหลือใน รายการที่คุณไม่เข้าใจ หรือคำถามหรือข้อสงสัยอื่น ๆ

+ +

ถ้าคุณสนใจช่วยพัฒนาปรับปรุงเนื้อหา ดูที่ how you can help และรับการติดต่อ พวกเราดีใจมากที่จะได้ติดต่อกับคุณ ไม่ว่าคุณจะเป็นผู้เรียน คุณครู ผู้มีประสบการณ์ด้านการพัฒนาเว็บไซต์ หรือใครสักคนที่สนใจช่วยปรับปรุง ประสบการณ์การเรียนรู้นี้

+ +
+
+

ดูเพิ่ม

+ +
+
Mozilla developer newsletter
+
Our newsletter for web developers, which is a great resource for all levels of experience.
+
Web demystified
+
A great series of videos explaining web fundamentals, aimed at complete beginners to web development. Created by Jérémie Patonnier.
+
Codecademy
+
A great interactive site for learning programming languages from scratch.
+
BitDegree
+
Basic coding theory with a gamified learning process. Mainly focused on beginners.
+
Code.org
+
Basic coding theory and practice, mainly aimed at children/complete beginners.
+
EXLskills 
+
Free and open courses for learning tech skills, with mentorship and project-based learning
+
freeCodeCamp.org
+
Interactive site with tutorials and projects to learn web development.
+
Web literacy map
+
A framework for entry-level web literacy & 21st Century skills, which also provides access to teaching activities sorted by category.
+
Teaching activities
+
A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.
+
Edabit
+
Hundreds of free interactive coding challenges in various languages.
+
+
+
diff --git a/files/th/learn/javascript/index.html b/files/th/learn/javascript/index.html new file mode 100644 index 0000000000..f01ce72c27 --- /dev/null +++ b/files/th/learn/javascript/index.html @@ -0,0 +1,66 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - NeedsTranslation + - Topic + - TopicStub + - 'l10n:priority' +translation_of: Learn/JavaScript +--- +
{{LearnSidebar}}
+ +

{{Glossary("JavaScript")}} is a programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.

+ +

Learning pathway

+ +

JavaScript is arguably more difficult to learn than related technologies such as HTML and CSS. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:

+ + + +

Having previous experience with other programming languages might also help.

+ +

After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:

+ + + +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them.

+ +
+
JavaScript first steps
+
In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.
+
JavaScript building blocks
+
In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.
+
Introducing JavaScript objects
+
In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.
+
Client-side web APIs
+
When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. 
+
+ +

Solving common JavaScript problems

+ +

Use JavaScript to solve common problems provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.

+ +

See also

+ +
+
JavaScript on MDN
+
The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.
+
Coding math
+
An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by Keith Peters.
+
diff --git "a/files/th/learn/\340\270\235\340\270\261\340\271\210\340\270\207\340\271\200\340\270\213\340\270\264\340\270\243\340\271\214\340\270\237\340\271\200\340\270\247\340\270\255\340\270\243\340\271\214/index.html" "b/files/th/learn/\340\270\235\340\270\261\340\271\210\340\270\207\340\271\200\340\270\213\340\270\264\340\270\243\340\271\214\340\270\237\340\271\200\340\270\247\340\270\255\340\270\243\340\271\214/index.html" new file mode 100644 index 0000000000..4235bdb5e2 --- /dev/null +++ "b/files/th/learn/\340\270\235\340\270\261\340\271\210\340\270\207\340\271\200\340\270\213\340\270\264\340\270\243\340\271\214\340\270\237\340\271\200\340\270\247\340\270\255\340\270\243\340\271\214/index.html" @@ -0,0 +1,50 @@ +--- +title: การเขียนโปรแกรมเว็บไซต์ฝั่งเซิร์ฟเวอร์ +slug: Learn/ฝั่งเซิร์ฟเวอร์ +translation_of: Learn/Server-side +--- +
{{LearnSidebar}}
+ +

แบบไดนามิกเว็บไซต์ -  การเขียนโปรแกรมฝั่งเซิร์ฟเวอร์หัวข้อเป็นชุดของโมดูลที่แสดงให้เห็นว่าการสร้างเว็บไซต์แบบไดนามิก; เว็บไซต์ที่ให้ข้อมูลที่กำหนดเองเพื่อตอบสนองคำขอ HTTP โมดูลนี้ให้คำแนะนำทั่วไปเกี่ยวกับการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์พร้อมกับคำแนะนำระดับเริ่มต้นเฉพาะเกี่ยวกับวิธีใช้เฟรมเวิร์กเว็บ Django (Python) และ Express (Node.js / JavaScript) เพื่อสร้างแอปพลิเคชันพื้นฐาน

+ +

เว็บไซต์หลักส่วนใหญ่ใช้เทคโนโลยีฝั่งเซิร์ฟเวอร์เพื่อแสดงข้อมูลแบบไดนามิกตามที่ต้องการ ตัวอย่างเช่นลองนึกดูว่ามีสินค้ากี่ชิ้นใน Amazon และจินตนาการว่ามีการเขียนโพสต์บน Facebook กี่รายการ การแสดงสิ่งเหล่านี้ทั้งหมดโดยใช้เพจแบบคงที่ต่างกันจะไม่มีประสิทธิภาพอย่างมากดังนั้นไซต์ดังกล่าวจะแสดงเทมเพลตแบบคงที่แทน (สร้างโดยใช้HTML , CSSและJavaScript ) จากนั้นอัปเดตข้อมูลที่แสดงในเทมเพลตเหล่านั้นแบบไดนามิกเมื่อจำเป็นเช่นเมื่อคุณต้องการ ดูผลิตภัณฑ์อื่นใน Amazon

+ +

ในโลกสมัยใหม่ของการพัฒนาเว็บขอแนะนำให้เรียนรู้เกี่ยวกับการพัฒนาฝั่งเซิร์ฟเวอร์

+ +

เส้นทางการเรียนรู้

+ +

การเริ่มต้นด้วยการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์มักจะง่ายกว่าการพัฒนาฝั่งไคลเอ็นต์เนื่องจากเว็บไซต์แบบไดนามิกมักจะดำเนินการที่คล้ายคลึงกันมาก (การดึงข้อมูลจากฐานข้อมูลและแสดงในเพจการตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนและบันทึกไว้ใน ฐานข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้และการล็อกอินผู้ใช้ ฯลฯ ) และสร้างขึ้นโดยใช้เว็บเฟรมเวิร์กที่ทำให้การทำงานของเว็บเซิร์ฟเวอร์เหล่านี้และอื่น ๆ เป็นเรื่องง่าย

+ +

ความรู้พื้นฐานเกี่ยวกับแนวคิดการเขียนโปรแกรม (หรือภาษาโปรแกรมเฉพาะ) มีประโยชน์ แต่ไม่จำเป็น ในทำนองเดียวกันไม่จำเป็นต้องมีความเชี่ยวชาญในการเขียนโค้ดฝั่งไคลเอ็นต์ แต่ความรู้พื้นฐานจะช่วยให้คุณทำงานได้ดีขึ้นกับนักพัฒนาซอฟต์แวร์ที่สร้างเว็บฝั่งไคลเอ็นต์ "ส่วนหน้า"

+ +

คุณจะต้องเข้าใจ "วิธีการทำงานของเว็บ" เราขอแนะนำให้คุณอ่านหัวข้อต่อไปนี้ก่อน:

+ + + +

ด้วยความเข้าใจพื้นฐานดังกล่าวคุณก็พร้อมที่จะดำเนินการตามโมดูลต่างๆในส่วนนี้ 

+ +

โมดูล

+ +

หัวข้อนี้ประกอบด้วยโมดูลต่อไปนี้ คุณควรเริ่มต้นด้วยโมดูลแรกจากนั้นไปที่หนึ่งในโมดูลต่อไปนี้ซึ่งแสดงวิธีการทำงานกับภาษาฝั่งเซิร์ฟเวอร์ที่เป็นที่นิยมมากสองภาษาโดยใช้เว็บเฟรมเวิร์กที่เหมาะสม 

+ +
+
ขั้นตอนแรกการเขียนโปรแกรมเว็บไซต์ฝั่งเซิร์ฟเวอร์
+
โมดูลนี้ให้ข้อมูลเทคโนโลยีที่ไม่เชื่อเรื่องพระเจ้าเกี่ยวกับการเขียนโปรแกรมเว็บไซต์ฝั่งเซิร์ฟเวอร์เช่น "มันคืออะไร" "มันแตกต่างจากการเขียนโปรแกรมฝั่งไคลเอนต์อย่างไร" และ "ทำไมจึงมีประโยชน์" โมดูลนี้ยังสรุปเฟรมเวิร์กเว็บฝั่งเซิร์ฟเวอร์ที่เป็นที่นิยมมากขึ้นและให้คำแนะนำเกี่ยวกับวิธีการเลือกสิ่งที่ดีที่สุดสำหรับไซต์ของคุณ สุดท้ายนี้มีการแนะนำการรักษาความปลอดภัยเว็บเซิร์ฟเวอร์
+
Django Web Framework (Python)
+
Django เป็นเว็บเฟรมเวิร์กฝั่งเซิร์ฟเวอร์ที่ได้รับความนิยมอย่างมากเขียนด้วยภาษา Python โมดูลนี้อธิบายว่าเหตุใด Django จึงเป็นเฟรมเวิร์กเว็บเซิร์ฟเวอร์ที่ดีวิธีตั้งค่าสภาพแวดล้อมการพัฒนาและวิธีดำเนินงานทั่วไปกับมัน
+
Express Web Framework (Node.js / JavaScript)
+
Express เป็นเว็บเฟรมเวิร์กยอดนิยมซึ่งเขียนด้วย JavaScript และโฮสต์ภายในสภาพแวดล้อมรันไทม์ node.js โมดูลจะอธิบายถึงประโยชน์หลักบางประการของเฟรมเวิร์กนี้วิธีตั้งค่าสภาพแวดล้อมการพัฒนาของคุณและวิธีดำเนินงานการพัฒนาเว็บและการปรับใช้งานทั่วไป
+
+ +

ดูสิ่งนี้ด้วย

+ +
+
เซิร์ฟเวอร์โหนดที่ไม่มีกรอบ
+
บทความนี้แสดงเซิร์ฟเวอร์ไฟล์แบบคงที่แบบธรรมดาที่สร้างด้วย Node.js บริสุทธิ์สำหรับผู้ที่คุณไม่ต้องการใช้เฟรมเวิร์ก
+
การกำหนดค่าประเภท MIME ของเซิร์ฟเวอร์อย่างถูกต้อง
+
การกำหนดค่าเซิร์ฟเวอร์ของคุณเพื่อส่ง {{อภิธานศัพท์ ("MIME types")}} ที่ถูกต้อง (หรือที่เรียกว่าประเภทสื่อหรือประเภทเนื้อหา) ไปยังเบราว์เซอร์เป็นสิ่งสำคัญสำหรับเบราว์เซอร์เพื่อให้สามารถประมวลผลและแสดงเนื้อหาได้อย่างถูกต้อง นอกจากนี้ยังเป็นสิ่งสำคัญในการป้องกันเนื้อหาที่เป็นอันตรายจากการปลอมตัวเป็นเนื้อหาที่ไม่เป็นอันตราย
+
diff --git "a/files/th/learn/\340\271\200\340\270\243\340\270\264\340\271\210\340\270\241\340\270\225\340\271\211\340\270\231\340\271\203\340\270\212\340\271\211\340\270\207\340\270\262\340\270\231\340\271\200\340\270\247\340\271\207\340\270\232/index.html" "b/files/th/learn/\340\271\200\340\270\243\340\270\264\340\271\210\340\270\241\340\270\225\340\271\211\340\270\231\340\271\203\340\270\212\340\271\211\340\270\207\340\270\262\340\270\231\340\271\200\340\270\247\340\271\207\340\270\232/index.html" new file mode 100644 index 0000000000..0eb9b565f5 --- /dev/null +++ "b/files/th/learn/\340\271\200\340\270\243\340\270\264\340\271\210\340\270\241\340\270\225\340\271\211\340\270\231\340\271\203\340\270\212\340\271\211\340\270\207\340\270\262\340\270\231\340\271\200\340\270\247\340\271\207\340\270\232/index.html" @@ -0,0 +1,55 @@ +--- +title: เริ่มต้นใช้งานเว็บ +slug: Learn/เริ่มต้นใช้งานเว็บ +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

การเริ่มต้นใช้งานเว็บเป็นซีรีส์สั้น ๆ ที่จะแนะนำคุณเกี่ยวกับการปฏิบัติจริงของการพัฒนาเว็บ คุณจะต้องตั้งค่าเครื่องมือที่จำเป็นในการสร้างหน้าเว็บแบบธรรมดาและเผยแพร่โค้ดง่ายๆของคุณเอง

+
+ +

เรื่องราวของเว็บไซต์แรกของคุณ

+ +

การสร้างเว็บไซต์แบบมืออาชีพเป็นงานที่ต้องทำมากมายดังนั้นหากคุณยังใหม่กับการพัฒนาเว็บเราขอแนะนำให้คุณเริ่มต้นจากเล็ก ๆ คุณจะไม่สร้าง Facebook ใหม่ในทันที แต่มันไม่ยากที่จะทำให้เว็บไซต์ง่ายๆของคุณเองทางออนไลน์เราจะเริ่มที่นั่น

+ +

ด้วยการทำงานตามบทความด้านล่างตามลำดับคุณจะไม่ต้องทำอะไรเลยเพื่อให้หน้าเว็บแรกของคุณออนไลน์ มาเริ่มการเดินทางกันเลย!

+ +

การติดตั้งซอฟต์แวร์พื้นฐาน

+ +

เมื่อพูดถึงเครื่องมือในการสร้างเว็บไซต์มีหลายอย่างให้เลือก หากคุณเพิ่งเริ่มต้นคุณอาจสับสนกับอาร์เรย์ของเครื่องมือแก้ไขโค้ดเฟรมเวิร์กและเครื่องมือทดสอบที่มีอยู่ ในการติดตั้งซอฟต์แวร์พื้นฐานเราจะแสดงวิธีการติดตั้งซอฟต์แวร์ที่คุณต้องการเพื่อเริ่มต้นการพัฒนาเว็บขั้นพื้นฐานแบบทีละขั้นตอน

+ +

เว็บไซต์ของคุณจะเป็นอย่างไร?

+ +

ก่อนที่คุณจะเริ่มเขียนโค้ดสำหรับเว็บไซต์ของคุณคุณควรวางแผนก่อน คุณกำลังจัดแสดงข้อมูลอะไร คุณใช้ฟอนต์และสีอะไร เว็บไซต์ของคุณจะเป็นอย่างไร? เราสรุปวิธีการง่ายๆที่คุณสามารถปฏิบัติตามเพื่อวางแผนเนื้อหาและการออกแบบไซต์ของคุณ

+ +

การจัดการกับไฟล์

+ +

เว็บไซต์ประกอบด้วยไฟล์จำนวนมาก: เนื้อหาข้อความโค้ดสไตล์ชีตเนื้อหาสื่อและอื่น ๆ เมื่อคุณสร้างเว็บไซต์คุณต้องรวบรวมไฟล์เหล่านี้ให้เป็นโครงสร้างที่เหมาะสมและตรวจสอบให้แน่ใจว่าพวกเขาสามารถพูดคุยกันได้ การจัดการกับไฟล์จะอธิบายถึงวิธีตั้งค่าโครงสร้างไฟล์ที่เหมาะสมสำหรับเว็บไซต์ของคุณและปัญหาที่คุณควรทราบ

+ +

พื้นฐาน HTML

+ +

Hypertext Markup Language (HTML) คือรหัสที่คุณใช้เพื่อจัดโครงสร้างเนื้อหาเว็บของคุณและให้ความหมายและวัตถุประสงค์ ตัวอย่างเช่นเนื้อหาของฉันเป็นชุดของย่อหน้าหรือรายการสัญลักษณ์แสดงหัวข้อย่อยหรือไม่ ฉันมีภาพแทรกบนหน้าของฉันหรือไม่? ฉันมีตารางข้อมูลหรือไม่? โดยไม่ทำให้คุณพื้นฐาน HTMLให้ข้อมูลมากพอที่จะทำให้คุณคุ้นเคยกับ HTML

+ +

พื้นฐาน CSS

+ +

Cascading Stylesheets (CSS) คือโค้ดที่คุณใช้จัดรูปแบบเว็บไซต์ของคุณ ตัวอย่างเช่นคุณต้องการให้ข้อความเป็นสีดำหรือสีแดง? ควรวาดเนื้อหาบนหน้าจอที่ใด ภาพพื้นหลังและสีใดที่ควรใช้ในการตกแต่งเว็บไซต์ของคุณ ข้อมูลเบื้องต้นเกี่ยวกับ CSSจะนำคุณไปสู่สิ่งที่คุณต้องใช้ในการเริ่มต้น

+ +

พื้นฐาน JavaScript

+ +

JavaScript เป็นภาษาการเขียนโปรแกรมที่คุณใช้เพื่อเพิ่มคุณลักษณะแบบโต้ตอบให้กับเว็บไซต์ของคุณ ตัวอย่างบางส่วนอาจเป็นเกมสิ่งที่เกิดขึ้นเมื่อกดปุ่มหรือป้อนข้อมูลในแบบฟอร์มเอฟเฟกต์สไตล์ไดนามิกภาพเคลื่อนไหวและอื่น ๆ อีกมากมาย ข้อมูลเบื้องต้นเกี่ยวกับ JavaScriptช่วยให้คุณทราบถึงสิ่งที่เป็นไปได้ในภาษาที่น่าตื่นเต้นนี้และจะเริ่มต้นอย่างไร

+ +

เผยแพร่เว็บไซต์ของคุณ

+ +

เมื่อคุณเขียนโค้ดและจัดระเบียบไฟล์ที่ประกอบเป็นเว็บไซต์ของคุณเสร็จแล้วคุณจะต้องวางโค้ดทั้งหมดทางออนไลน์เพื่อให้คนอื่นค้นพบได้ การเผยแพร่โค้ดตัวอย่างของคุณจะอธิบายถึงวิธีการรับโค้ดตัวอย่างแบบง่ายทางออนไลน์โดยใช้ความพยายามขั้นต่ำ

+ +

เว็บทำงานอย่างไร

+ +

เมื่อคุณเข้าถึงเว็บไซต์โปรดของคุณสิ่งที่ซับซ้อนมากมายเกิดขึ้นในเบื้องหลังที่คุณอาจไม่รู้ วิธีการทำงานของเว็บสรุปสิ่งที่เกิดขึ้นเมื่อคุณดูเว็บเพจบนคอมพิวเตอร์ของคุณ

+ +

ดูสิ่งนี้ด้วย

+ + -- cgit v1.2.3-54-g00ecf