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

By Elysium Contributor on Tag:

[อัพเดต]

เจอปัญหาแล้วครับ หลังจากเตรียมไฟล์เพื่อจะอัพโหลดให้ช่วยดู ผมเข้าใจปัญหาถูก ที่ว่ามันอยู่ตรงตำแหน่งการวาง 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 แล้วครับ แต่ก็ยังไม่เข้าใจ

Hiring! บริษัทที่น่าสนใจ

Carmen Software company cover
Carmen Software
Hotel Financial Solutions
 Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
 KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
 Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
 Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
 Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
 Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
 CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
 Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
 Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
 CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
 Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
 MuvMi (Urban Mobility Tech Co.,Ltd.) company cover
MuvMi (Urban Mobility Tech Co.,Ltd.)
Shape the future of urban mobility towards affordable, clean, and safe solutions
 T.N. Digital Solution Co., Ltd. company cover
T.N. Digital Solution Co., Ltd.
TNDS has been involving in every first move of banking’s major digital transformation.
 KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
 Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
 Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
 REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
 H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
 The Gang Technology Co., Ltd. company cover
The Gang Technology Co., Ltd.
We're a Digital Agency that helps our customers transform their business into digital with ease.
 LTMH company cover
LTMH
LTMH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
 Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
 Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
 MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
 Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
 LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
 LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

Elysium Thu, 22/06/2017 - 23:08

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

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();
});
});

Elysium Fri, 23/06/2017 - 12:45

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

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

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

osmiumwo1f Thu, 22/06/2017 - 23:11

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

waroonh Fri, 23/06/2017 - 10:06

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

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

i3i4i5 Fri, 23/06/2017 - 11:39

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

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

7elven Tue, 04/07/2017 - 02:12

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

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

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

Elysium Tue, 04/07/2017 - 09:52

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

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

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

เดจาวู

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

7elven Tue, 11/07/2017 - 16:10

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