[แก้ได้แล้ว] ทำไม Tag <Script> ถึงอยู่ในส่วน Body

By: Elysium
ContributorWindows PhoneSymbianWindows
on 22 June 2017 - 22:47 Tags:
Forums: 
Programming Problems

[อัพเดต]

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

สิ่งที่ได้รู้คือ ถ้าวาง

 <script src="script.js"></script>

ก่อน

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

มันจะไม่ทำงาน คงจำไปอีกนาน คิดเอาเองว่ามันเป็น javascript มันก็คงจะเหมือนๆ กัน
ถ้าจะใช้ jquery ต้องแนบไฟล์ jquery.min.js ไปด้วยเสมอใช่ไหมครับ

[ข้อความเดิม]

ณ ที่ตรงนี้คือมือใหม่หัดเล่น

index.html

<html>
<header>
<script src="script.js"></script>
</header>
<body>
</body>
</html>

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

แต่ถ้าเป็น code เพียวๆ นำมาวาง header ก็ยังทำงานได้อยู่ หรือว่ามันจะเกี่ยวกับตัวนี้

$(document).ready(function(){
});

ลอง Google แล้วครับ แต่ก็ยังไม่เข้าใจ

Get latest news from Blognone
By: hisoft
ContributorWindows PhoneWindows
on 22 June 2017 - 22:56 #994718
hisoft's picture

ขอดูตัวเนื้อหาด้วยได้มั้ยครับ?

By: Elysium
ContributorWindows PhoneSymbianWindows
on 22 June 2017 - 23:08 #994720 Reply to:994718
Elysium's picture

เอามาจากตรงนี้เลยครับ

index.html ถ้าเป็นตามนี้ Code จะทำงานปรกติครับ แต่พอเอามาวางตรง header มันกลับไม่ทำงาน เหมือนไม่ถูกเรียก

<html>
<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</header>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

ไฟล์ script.js

$(document).ready(function(){
 $("button").click(function(){
    $("p").toggle();
});
});

คนขี้ลืม | คนบ้าเกม | คนเหงาๆ

By: hisoft
ContributorWindows PhoneWindows
on 23 June 2017 - 00:29 #994728 Reply to:994720
hisoft's picture

เอ ตามลิงก์ที่ให้มาสคริปต์มันก็อยู่ใน header นี่ครับ?
แล้วผมลองย้ายจาก header ลงไปใน body มันก็ยังทำงานได้เหมือนกัน

By: Elysium
ContributorWindows PhoneSymbianWindows
on 23 June 2017 - 12:45 #994800 Reply to:994728
Elysium's picture

ทุกอย่างปรกติครับ ปัญหามันอยู่ที่ตำแหน่งการวาง

<script type="text/javascript" src="script.js"></script>

ลองบน Win 8.1 IE11, Chrome กับ Win10 Edge ปัญหาก็มีตามที่บอกไว้ เอาโค้ดออกจากส่วนของ ready มาวางข้างนอก (ไม่มี ready มาครอบ) ก็ยังไม่ทำงานเหมือนกัน

คนขี้ลืม | คนบ้าเกม | คนเหงาๆ

By: hisoft
ContributorWindows PhoneWindows
on 23 June 2017 - 21:15 #994889 Reply to:994800
hisoft's picture

ไม่แน่ใจว่าแก้ได้หรือยัง แต่ถ้ายังไงขอชุดตัวอย่างแบบที่ได้กับไม่ได้เต็มๆ มาดูกันดีไหมครับ

By: mix5003
AndroidUbuntuWindows
on 23 June 2017 - 12:55 #994801 Reply to:994720

head กับ header มันคนละ tag กันนะครับ

ตำแหน่งการวาง script ได้วางหลัง jquery รึเปล่าครับ

By: osmiumwo1f
ContributorWindows PhoneWindows
on 22 June 2017 - 23:11 #994721
osmiumwo1f's picture

เกี๋ยวครับ เพราะ $(document).ready(function(){}); จะมองว่าตัว html มันโหลดเสร็จยัง ถ้ายังไม่เสร็จ js จะยังไม่ทำอะไรที่อยู่ข้างในนั้นครับ

By: waroonh
Windows
on 23 June 2017 - 10:06 #994764

เท่าที่ดู ไม่มีอะไรผิดเลยครับควรจะ run ได้เลย
รวมถึง ตัว code ที่โพสมาเป็นตัวอย่างด้วยครับ แต่ที่สังเกตเห็นคือ
ref จาก Google CDN
src=https://ajax.googleapis.com

เครื่องไม่ต่อออก internet อยู่ไม่ทำงานแน่นอน
ถ้าต่อ net อยุ่ browser อาจจะ disable
การ run script อยู่ เพราะ run บนเครื่องโดยตรง ครับ

By: i3i4i5
ContributoriPhoneWindows
on 23 June 2017 - 11:39 #994787
i3i4i5's picture

$("button").click(function(){
$("p").toggle();
});

ถ้าวางไว้ใน header หรือไว้ด้านบน tag button สคริปจะทำงานก่อน DOM (button นั่นแหละ) จะโหลดเสร็จ ทำให้ใช้งานไม่ได้
ส่วนถ้าครอบด้วย $(document).ready(function(){}); จะทำให้สคริปทำงานหลัง DOM โหลดเสร็จ

By: 7elven
ContributoriPhoneWindows PhoneAndroid
on 4 July 2017 - 02:12 #996345

คือจำไว้นะครับว่า ถ้าจะเราใช้ lib ตัวไหนเราก็ต้องโหลด lib ตัวนั้นก่อน
ในที่นี้คือ jquery ก็ต้องวางไว้ก่อนที่เราจะเรียก script ของเรา

และผมขอแนะนำอย่างนึงเวลาโหลดหน้าเว็บ ถ้า script ของเรามีการจัดการ element ด้วย
ให้นำ script ไปวางไว้ก่อน แบบนี้แทน เพื่อที่จะได้แน่ใจว่า html ทั้งหมดถูกโหลดแล้ว
มันดีกว่าต้องใช้ on ready แน่นอนครับ และปัจจุบันก็แนะนำให้ทำแบบนี้ ตรง head เอาไว้ใส่พวก lib ก็พอ

ปล.มีความรู้สึกเดจาวูอย่างบอกไม่ถูก ไม่ได้ว่า จขกท นะครับ แต่ผมรู้สึกจริงๆ

By: Elysium
ContributorWindows PhoneSymbianWindows
on 4 July 2017 - 09:52 #996404 Reply to:996345
Elysium's picture

คงจำได้ขึ้นใจละครับทีนี้ (ถ้าจะให้แก้ตัว คงต้องบอกว่าปรกติจะชินแต่กับ JavaScript เพียวๆ ละครับ ไม่ใช่โปรแกรมเมอร์นะ เวลาแต่ง Blogger มันเจอบ่อยๆ สามารถสุดได้แค่นี้ละครับ ^_^)

ให้นำ script ไปวางไว้ก่อน แบบนี้แทน

หมายถึงวางไว้ก่อนปิดแท็ก body ใช่ไหมครับ

เดจาวู

อันนี้ มันยังไงเหรอครับ

คนขี้ลืม | คนบ้าเกม | คนเหงาๆ

By: 7elven
ContributoriPhoneWindows PhoneAndroid
on 11 July 2017 - 16:10 #997404 Reply to:996404

ใช่ครับ ก่อนปิด body สงสัยจะโดนตัดแท็กออกตอน submit
ส่วนเรื่องเดจาวู แค่คุ้นๆหน่ะครับ สงสัยช่วงนี้คงนอนน้อย

By: nine623 on 18 April 2020 - 19:20 #1155003

Hi