This forum is now read-only. Please use our new forums at discuss.codecademy.com.

HTML Basics Forum

View Course

873 points
E2d3e544ca497f9221be4099f02d2c1a?s=140&d=retro
Submitted by
kaotica08
about 3 years ago

should script ref sources in an .html file be separate or together?

Which is better for putting script tags in the section of a .html file?

separate:

<script type="text/javascript" src="jquery.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  

or together:

<script type="text/javascript"  
    src="http://code.jquery.com/jquery.min.js" 
    src="jquery.min.js"
    src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
></script>


2 votes

permalink

In a course we have to work with what the author gives us. Sometimes it's not the ideal but it's the approach they deem fit for the lesson. It's okay to work within a single document if it's just that, a single document for practice or experimentation. Once we start working toward production code, though, we best be well on our way to unobtrusive coding methods:

  • HTML is for document content and structure, only.
  • CSS is for presentation and element positioning (external).
  • JS is for behaviors and interaction (external).

A standalone page for testing and experimenting might look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>At very top, under the charset tag so SE's can see it quickly</title>
<style>
/* CSS in here (known as embedded style sheet) */
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
    // code
});
</script>
</head>
<body>
    <div style="width: 100%">Known as an inline style rule
         - highly discouraged.
    </div>
</body>
</html>

8281 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago


1 vote

permalink

There can be only one src attribute per <script></script> element. What's more, there should be only one version of jQuery present in memory. Loading multiple versions will not work since only the last one loaded will be in effect.

Load sequence recommended (includes jQuery UI for reference)

  • jquery UI theme CSS
  • your page CSS
  • jQuery core (only one version--recommend 1.11.xx)
  • jQuery UI library
  • your custom JS

8281 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago

1 Comment

Fbea9d81238a05ceab568eeb5522def4?s=140&d=retro kaotica10 about 3 years ago

thank you thank you thank you - I'm going to work up what I think the above translates into and post it below; if you happen to be checking back and see it, would you be so kind as to let me know if it's a good way to go? I'm kinda desperate, I'm learning by remote from home and I don't really have anyone I can ask. tks in advance! if so, if not no stress and tks for the pointers.


0 votes

permalink

hey Roy a million tks for the advice already; can you pls take a look at my attempt to assemble the pieces you recommend?

I pasted into a google doc b/c I struggled with the formatting for this forum *(tried 4 spaces etc., couldn't get the <link ones in):

https://docs.google.com/document/d/1TcZnFoz8FNYT4kfqnbAK3MYH3m68gBLhbmycsuySUaY/edit?usp=sharing

tks so much; I know it takes some time and I have nothing to offer to reciprocate. Unless you want any advice / info on the video game industry (I've been a vGame producer for almost 20 years). TKS!

574 points
Fbea9d81238a05ceab568eeb5522def4?s=140&d=retro
Submitted by
kaotica10
about 3 years ago


0 votes

permalink

Version 2 differs from 1 in ways that are beyond our needs. Stick to version 1. (1.11.1)

You don't need the UI unless you plan to use it. It takes up space and download time.

In HTML5 we no longer need to add a type attribute to script of style sheet tags.

Keep your JavaScript external, not in the page if it can be helped. Your script.js file will have this line in it to kick off your code when the browser is ready:

$(document).ready(function(){
    // your code will go in here.
});

In time you will discover that jQuery is not a be all and end all, and it is definitely not a replacement for native JavaScript. It extends JS with abstract methods that save us typing and time, but it does not negate or rule out native code.

If you have little or no JavaScript experience, then I highly recommend immersing yourself in that language then when you are well along, at least up to objects and events. start to parallel learn jQuery. You will be much better equipped to understand and recognize what the methods are doing.

For a typical small project, we might have a <head> that includes the following:

<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="script.js"></script>

in this order. script.js will contain all our custom script. We never, ever, change the jQuery core script or it will be at our peril.

8281 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago


0 votes

permalink

huge huge tks; I went thru cdcdmy (including the, jQueary, javascript and object oriented programming modules) so I am a little familiar with this link rel above.

The course I'm taking now does it all either inline or internal; but mos def will do it like you suggest.

THANKS!!!

574 points
Fbea9d81238a05ceab568eeb5522def4?s=140&d=retro
Submitted by
kaotica10
about 3 years ago


0 votes

permalink

I should add,

    <script></script>
</body>
</html>

It's not uncommon to see script elements at the end of the body. These script are loaded last and so are naturally deferred. By the time they run, the DOM content has loaded. In this position a script does not need $(document).ready(). We can run all the script JS or jQuery we want at this point.

8281 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago

1 Comment

5958b8ebe12813a2a3000034_980106998 Roy about 3 years ago

For native script, body loaded script as given above does not need an onload event, either. It's still considered inline, though, which is why the jQuery deferral method is preferred from a head loaded script.


0 votes

permalink

wow, can't thank you enough for taking the time. Really appreciate it, all makes sense.

cheers!

902 points
A76f6542e6b7e484275c3e1783b43775?s=140&d=retro
Submitted by
kaotica07
about 3 years ago


0 votes

permalink

<! DOCTYPE html >
< html >
Esta é minha primeira página html, estou começando agora a programar e a criar minhas páginas.
</ html>
O que q eu to fazendo errado aqui?

92 points
Picture
Submitted by
fergiansante
over 2 years ago

1 Comment

5958b8ebe12813a2a3000034_980106998 Roy over 2 years ago

Made with Google Translate: Por favor, fazer uma nova pergunta no Q & A, onde todo mundo vai vê-lo e ser capaz de responder. Isto é resolvido com um fio muito poucos assinantes. Se possível, por favor, envie sua pergunta em Inglês, como é que a língua neste Q & A. Obrigado. -- em Inglês -- Please ask a New Question in the Q&A where everyone will see it and be able to answer. This is a resolved thread with very few subscribers. If possible, please post your question in English, as that is the language in this Q&A. Thank you.