Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript
JavaScript
  1. วิธีสร้างหรือรีเซ็ต Counter (ตัวนับ) ด้วย JavaScript

    ใช้คุณสมบัติ counterReset เพื่อสร้างตัวนับใหม่หรือรีเซ็ตค่าตัวนับเดิมเป็นศูนย์ มักใช้กับ container element ที่จะเริ่มนับใหม่ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> h2:before { counter-increment: section; content: counter(section) Quiz ;

  2. วิธีตั้งค่าความยาวเริ่มต้นของ Flex Item ด้วย JavaScript

    คุณสมบัติ flexBasis กำหนดขนาดเริ่มต้นของ flex item ก่อนที่จะมีการกระจายพื้นที่ว่างหรือการย่อ ขนาดสามารถเป็นความยาวคงที่ (px, em) หรือเปอร์เซ็นต์ได้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #box { border: 1px solid #000000; width: 450px;

  3. วิธีเพิ่มค่า Counter (ตัวนับ) ด้วย JavaScript

    ใช้คุณสมบัติ counterIncrement เพื่อเพิ่มค่าตัวนับ CSS ซึ่งมักใช้ร่วมกับ pseudo-elements เช่น ::before เพื่อสร้างหมายเลขอัตโนมัติ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> h2 { counter-increment: section; } h2:before { content: coun

  4. วิธีตั้งค่าทิศทางของ Flex Items ด้วย JavaScript

    ใช้คุณสมบัติ flexDirection เพื่อควบคุมทิศทางการจัดเรียงของ flex items ภายใน flex container ค่าที่ใช้ได้คือ row, row-reverse, column, column-reverse ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #box { border: 1px solid #000000; width: 450px;

  5. วิธีทำงานกับเมธอด addEventListener() ใน JavaScript HTML DOM

    เมธอด addEventListener() ใช้สำหรับผูกตัวจัดการเหตุการณ์กับองค์ประกอบ รองรับการระบุช่วงการจับเหตุการณ์ (capturing/bubbling) และเพิ่มหลายฟังก์ชันต่อเหตุการณ์เดียวกันได้ ตัวอย่าง <!DOCTYPE html> <html> <body> <p>Double click the below button.</p> <button id=bt

  6. วิธีเพิ่ม Event Handler หลายตัวให้กับองค์ประกอบเดียวกันใน JavaScript HTML DOM

    สามารถเพิ่มตัวจัดการเหตุการณ์มากกว่าหนึ่งตัวให้กับองค์ประกอบเดียวกันได้ โดยเรียก addEventListener() หลายครั้งด้วยชื่อเหตุการณ์หรือฟังก์ชันที่ต่างกัน ตัวอย่าง <!DOCTYPE html> <html> <body> <p>Click the below button once to get Date.</p> <p>Click the below

  7. วิธีเพิ่มตัวจัดการเหตุการณ์ (Event Handler) ให้กับองค์ประกอบใน JavaScript HTML DOM

    ใช้เมธอด addEventListener() เพื่อผูกฟังก์ชันกับเหตุการณ์บนองค์ประกอบ HTML วิธีนี้ยืดหยุ่นกว่าและรองรับหลายตัวจัดการต่อเหตุการณ์เดียวกัน ตัวอย่าง <!DOCTYPE html> <html> <body> <p>Click the below button.</p> <button id=btnid>Click me</button> <

  8. วิธีตั้งค่าคุณสมบัติเส้นคอลัมน์ (column rule) ด้วย JavaScript

    คุณสมบัติ columnRule ใน JavaScript ใช้กำหนดสไตล์ สี และความกว้างของเส้นแบ่งระหว่างคอลัมน์ในครั้งเดียว รูปแบบคือ width style color ตัวอย่าง <!DOCTYPE html> <html> <body> <p>Click below to create 4 columns</p> <button onclick=display()>Columns</button&g

  9. วิธีใช้งานเมธอด removeEventListener() ใน JavaScript

    ใช้เมธอด removeEventListener() เพื่อลบตัวจัดการเหตุการณ์ที่ผูกไว้ด้วย addEventListener() เมธอดนี้ต้องการชื่อเหตุการณ์และฟังก์ชันอ้างอิงเดียวกันกับที่ใช้ในการเพิ่ม ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #box { background-color: gray; border:

  10. วิธีตั้งค่าสไตล์เส้นคอลัมน์ระหว่างคอลัมน์ด้วย JavaScript

    ใช้คุณสมบัติ columnRuleStyle เพื่อกำหนดสไตล์ของเส้นแบ่งระหว่างคอลัมน์ สามารถตั้งค่าเป็น solid, dotted, dashed, inset, outset ฯลฯ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #myID { column-count: 4; column-rule: 4px dotted yellow; } <

  11. วิธีหาจำนวนโหนดใน NodeList ด้วย JavaScript HTML DOM

    เพื่อหาจำนวนโหนดใน NodeList ให้ใช้คุณสมบัติ length ซึ่งจะคืนค่าจำนวนโหนดที่อยู่ในรายการ ตัวอย่าง <!DOCTYPE html> <html> <body> <p>Demo Text1</p> <p id=pid></p> <script> var myLen = document.querySelectorAll(p); document.getEle

  12. วิธีตั้งค่า fontStyle, fontVariant, fontWeight, fontSize, lineHeight และ fontFamily ในประกาศเดียวด้วย JavaScript

    หากต้องการกำหนดคุณสมบัติแบบอักษรทั้งหมดในครั้งเดียว ให้ใช้คุณสมบัติ font ของ JavaScript ซึ่งช่วยให้ตั้งค่า font-style, font-variant, font-weight, font-size, line-height และ font-family ได้ในบรรทัดเดียว ตัวอย่าง <!DOCTYPE html> <html> <body> <h1>Heading 1</h1>

  13. วิธีตั้งค่าความกว้างเส้นคั่นระหว่างคอลัมน์ (Column Rule Width) ด้วย JavaScript

    บทนำ Property columnRuleWidth ใช้กำหนดความหนาของเส้นคั่นระหว่างคอลัมน์ใน CSS Multi-column Layout ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #myID { column-count: 4; column-rule: 4px solid yellow; } </style> </head> <body> &

  14. วิธีตั้งค่าความกว้างคอลัมน์และจำนวนคอลัมน์พร้อมกันด้วย JavaScript

    บทนำ Property columns ใน JavaScript เป็น shorthand ของ column-width และ column-count ช่วยกำหนดเลย์เอาต์หลายคอลัมน์ในคำสั่งเดียว ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #myID { column-count: 4; column-rule: 4px solid yellow; } </style>

  15. วิธีสร้างแท็ก img ใหม่ด้วย jQuery พร้อม src และ id จาก JavaScript Object

    บทนำ jQuery มีหลายวิธีในการสร้าง element <img> ใหม่แบบไดนามิก พร้อมกำหนด attribute ต่างๆ วิธีที่ 1: สร้างจาก HTML String var myImg = $(); $(document.createElement(myImg)); // ไม่จำเป็น ตรงนี้ผิด myImg.attr(src, responseObject.imgurl); หมายเหตุ: โค้ดต้นฉบับมีบางส่วนที่ไม่ถูกต้อง ให้ใช้วิธีด้าน

  16. การทำงานกับ Structs ใน JavaScript

    บทนำ JavaScript ไม่มีโครงสร้าง Struct แบบ C/C++ หรือ Go ในตัว แต่สามารถจำลองพฤติกรรมคล้าย Struct ได้โดยใช้ Object และ Constructor Function ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <script> function displayStruct(str) { var str = str.split( ); var count =

  17. วิธีตั้งค่าสีเส้นคั่นระหว่างคอลัมน์ (Column Rule Color) ด้วย JavaScript

    บทนำ เมื่อใช้ CSS Multi-column Layout Property columnRuleColor ใช้ตั้งค่าสีของเส้นคั่นระหว่างคอลัมน์ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #myID { column-count: 4; column-rule: 4px outset yellow; } </style> </head> <body>

  18. วิธีตั้งค่าตระกูลแบบอักษร (Font Family) ด้วย JavaScript

    บทนำ Property fontFamily ใน JavaScript DOM ใช้สำหรับเปลี่ยนแบบอักษรของข้อความใน element ใดๆ แบบไดนามิก ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <h1>Heading 1</h1> <p id=myID> This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.

  19. ควรใช้คอมเมนต์ HTML ในบล็อก JavaScript หรือไม่?

    ไม่ ไม่จำเป็นต้องใช้คอมเมนต์ HTML ในบล็อกของ JavaScript นี่เป็นแนวปฏิบัติในทศวรรษ 1990 เบราว์เซอร์ที่ต้องการให้คุณใช้คอมเมนต์ HTML ใน JavaScript ไม่มีอยู่แล้วคุณสามารถใช้ CDATA<script charset="utf-8">    /* <![CDATA[ */    /* ]]> */ </script>

Total 5941 -คอมพิวเตอร์  FirstPage PreviousPage NextPage LastPage CurrentPage:227/298  20-คอมพิวเตอร์/Page Goto:1 221 222 223 224 225 226 227 228 229 230 231 232 233