Hiển thị javascript trước html

#1

Chào ac e mới đang mò mẫm về javascript và html nhưng e đang vướng 1 chỗ này mong mng giải đáp
Em có đoạn code như này
Đây là html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Check spy</title>

  </head>
  <body>
    <h1>Welcome to Part 9: Your JavaScript Level One Project!</h1>
    <p>For this project you will be building a generic website that will seem to ask mundane
    questions to normal users, but you secretly are looking for a spy! Anyone visiting your website will be asked a series of questions,
   only the Spy will be able to give specific answers you expect. If all question are answered correctly, you will posta secret message in console for the Spy to read!</p>

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

  </body>
</html>

Còn đây là javascravascript ạ

alert("Hello! I will ask you some question?");

var firstName = prompt("What is your First Name?");
var lastName = prompt("What is your Last Name?");
var age = prompt("How old are you?");
var tall = prompt("How tall are you in centimeters");
var petName = prompt("What is your pet name?");

if(firstName[0] == lastName[0] && (20 <= age && age <=30) && petName[petName.length-1] == "y"){
  console.log("Welcome Comrade! You've passed the Spy Test");
}
else{
  console.log("Sorry, nothing to see here.");
}

nhưng khi e chạy nó thì nó chạy javascript luôn chứ k load html trước ạ

image
image.png1315×708 26.4 KB

Ac có kinh nghiệm chỉ e với ạ

#2

Link này có thể giúp bạn:

Lần sau đăng câu hỏi lên thì nhớ đăng hẳn code và markdown, chứ đừng chụp màn hình nhé!

1 Like
#3

E cảm ơn và sẽ chú ý ạ. Nhưng cho e hỏi là e làm theo hướng dẫn trong 1 bài giảng code như nhau nhưng sao họ lại load js trước cơ chứ k thêm hàm như link của a ạ

#4

Bạn đưa link bài giảng đó đc ko, có thể họ đã bỏ qua 1 vài chỗ trong bài giảng để tiết kiệm thời gian.

3 Likes
#6

Do khóa học e tải về nên phải up lên youtube ạ. xem qua giúp e với ạ. E cảm ơn a

#7

bạn up code của bạn vô đây : https://jsfiddle.net/

Nhiều lúc bạn code hay do bài học bị cắt mất vài chỗ nên làm sai!

1 Like
#8

Sẽ chú ý rồi thì hãy sửa luôn bài viết đi!

2 Likes
#9

https://jsfiddle.net/jfL69yek/1/
liệu có phải do trình duyệt k ạ. e dùng chrome trên ubuntu

#10

cái đoạn JS này nó sẽ ngăn cây DOM lại và phải thực hiện hết câu lệnh js của bạn. :slight_smile:

muốn cây DOM load hết rồi mới thực thi JS thì bạn tìm hiểu: https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/

1 Like
#11

vậy so với bài giảng thì e có bị thiếu gì k ạ sao họ lại load html trc vậy ạ

#12

Bài giảng không có sai nha. tại người ta giảng chạy cái html trước và sau đó thực hiện thêm đoạn JS sau. Sau khi code xong đoạn js. Họ lại reload lại trang HTML thế là nó hiện thực thy code js.
Bạn hãy thử xóa bỏ dòng <script src=“checking_spy.js” ></script> rồi load trang HTML. Trang HTML load xong thì undo dòng JS lại và tải lại trang HTML xem nhé.

#13

e thử rồi ạ nhưng k khả quan :disappointed_relieved::disappointed_relieved:
với lại nhân tiện về phần cây DOM e đọc nhưng hình như nó phải dùng hàm ngay trong đoạn code html nhưng e muốn tách js làm file riêng thì sao ạ

#14

T nghĩ không sao cả đâu. Bạn cứ tiếp tục học bài mới đi. Chủ yếu JS học để biết thôi. Chứ giờ không còn dùng tới nữa. Chuyển lên Jquery rồi!

#15

Bạn nói tầm bậy, jquery chính là được code bằng JS, đâu chỉ học JS để cho biết???
Giờ bảo bạn lập trình game html 5, thuật toán game bạn viết bằng cái gì??? , và vẫn ứng dụng jquery song song bình thường nhé.

5 Likes
#16

javascript là ngôn ngữ. JQuery chỉ là 1 trong số rất nhiều library viết và dành cho javascript. Bạn đưa ra nhận xét tầm bậy và buồn cười quá. Nếu nói tầm ngôn ngữ thì phải nói javascript và typescript (1 số superset khác của javascript nữa)

1 Like
#17

HTML đã load và đã được parse ra DOM, nhưng browser chưa render DOM nên bạn không thấy gì thôi.

Quá trình parsing thì browser đọc tới đâu thì build DOM tree tới đó. Do đó trong checking_spy.js vẫn có thể dùng document để lấy <h1> hoặc <p>.

Tuy nhiên nếu có element nào ở sau <script> thì bạn không thể lấy DOM của element đó được.

...
<body>
  ...
  <script src="checking_spy.js"></script>
  ...
  <div id="footer">...</div>
  ...
</body>

(function () {
  var h1Elem = document.getElementsByTagName('h1')[0]; // h1Elem != null
  h1Elem.style.backgroundColor = '#CCCCCC';

  var oElem = document.getElementById('footer');
  console.log(oElem); // null
})();

Lý do mà browser không thực thi rendering ngay lúc tạo DOM vì quá trình browser parse HTML, CSS (nếu có thẻ <style> hoặc link tới file css), và JavaScript (thông qua <script> hoặc link tới file js), tất cả đoạn code JavaScript được compile và chạy ngay tức khắc, và cùng dưới 1 global scope là window. Tất cả code đó cùng chạy synchronously trong 1 lifecycle. Lifecycle này chặn browser hiển thị DOM.

Một lý do khác là do chưa đọc hết tất cả code HTML, CSS, thực thi hết JS để browser có thể tính toán ra giá trị cuối cùng (computed value). Do đó, nếu browser parse HTML được 1 nửa, đến đoạn script, nhưng browser không chắc chắn là sau script còn thẻ HTML nào không, hay JavaScript có đổi giá trị của DOM nào không. Vì vậy, tại thời điểm đang đọc thẻ script, browser không biết chắc chắn các computed value để render ra màn hình.

1 Like
Muốn chuyển đoạn code JS trong thẻ script sang 1 tập tin riêng thì phải code như thế nào?
#18

Bạn viết cái function wait 5s rồi execute bên javascript

#19

theo mình thấy ko biết bạn có để ý alert của video đătj sau đoạn hỏi tuổi các action còn của b lại đặt đầu tiên đây có phải là lý do chăng

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?