question about javascript

Nipplemilk909 · November 7, 2017

basic question on web page creation with javascript.

when making multiple web pages that utilize html and javascript do you need to made two more sets of these (html and js files) to make three web pages or can we link multiple pages to one html file?

Ryois · November 7, 2017

5 minutes ago, Nipplemilk909 said:

basic question on web page creation with javascript.

when making multiple web pages that utilize html and javascript do you need to made two more sets of these (html and js files) to make three web pages or can we link multiple pages to one html file?

You can use the same JS file for multiple web pages. However, I don't think you can reference an HTML without using an iframe.

Strayuru · November 7, 2017

You can include a JavaScript file in a HTML page, so you can have a single js file used on 3 different pages. But each HTML page would need its own separate file, unless you were using JavaScript to change the content dynamically.

To use a JavaScript file in a HTML page do something similar to the following:

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

EDIT: Oh and make sure to put that in the <head> tag

Ryois · November 7, 2017

5 minutes ago, Strayuru said:
You can include a JavaScript file in a HTML page, so you can have a single js file used on 3 different pages. But each HTML page would need its own separate file, unless you were using JavaScript to change the content dynamically.

To use a JavaScript file in a HTML page do something similar to the following:
<script src="myscripts.js"></script>
EDIT: Oh and make sure to put that in the <head> tag

https://stackoverflow.com/questions/3531314/should-i-write-script-in-the-body-or-the-head-of-the-html Put libs in the header, normal scripts in the body, rendering/loading impact scripts at the bottom.

Nipplemilk909 · November 7, 2017

21 minutes ago, Ryois said:

https://stackoverflow.com/questions/3531314/should-i-write-script-in-the-body-or-the-head-of-the-html Put libs in the header, normal scripts in the body, rendering/loading impact scripts at the bottom.

the reason for using linking javascriot files is for me to learn how to use DOM

i need to make three web pages that utilize some dom basics ,

so i can still make the three js files and add them to one html still

Nipplemilk909 · November 7, 2017

5 hours ago, Ryois said:

https://stackoverflow.com/questions/3531314/should-i-write-script-in-the-body-or-the-head-of-the-html Put libs in the header, normal scripts in the body, rendering/loading impact scripts at the bottom.

im still a little confused as to what im suppose to do and link together and where to link it,

do i make one html file and make three js files to link them ?

Do the first 3 tutorials from Javascript DOM Tutorials. You can skip the final exercises at the end of each tutorial.

Create 3 Web pages, one for each of the 3 tutorials. Each Web page should illustrate the concepts and techniques covered in the corresponding tutorial. .

Notes

Tutorial 1 covers the following features for accessing HTML elements.

- document.getElementById()
- el.childNodes
- el.firstChild and el.lastChild
- el.nextSibling and el.previousSibling
- el.parentNode

Tutorial 2 covers the following features for modifying HTML elements.

- el.innerHTML (Don't use for security reasons.)
- parent.removeChild (Needs to be called on the child's parent.)
- el.appendChild (Can also be thought of as "moveChild" because it detaches from any existing parent.)
- document.createTextNode()
- document.createElement()

Tutorial 3 covers the following features for handling user input events.

- el.onclick (Set to a callback function in which this refers to the element clicked. Not recommended because of possible conflict with libraries that set their own event listeners.)
- el.style
- el.addEventListener('click', listener, false) (The listener is called with an event object, which has target as a useful attribute.)
- el.removeEventListener('click', listener, false)
- Event listeners are called with event objects.
  - event.target is the element emitting the event.
  - event.preventDefault() supresses normal results of event.

blepmaster · November 7, 2017

There are a few options you can take here:

- Create three HTML pages, and one Javascript file. Then, embed the JS into each of the HTML files with this line of code in the <head> tag.

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

- Create a separate JS file for each of your pages. You would still add the file through that same line of code above, but it would be different src attributes. This method would be good for doing a tutorial, as it allows for you to have a clean space for each section of the tutorial. But for a practical website that calls the same function multiple times on multiple pages, it is not practical.

- Using <script> tags, write the scripts directly inside of your HTML files, with no need to create any JS files. Do note that the script tag must be before the HTML that uses it or else the code will not work.

N0ps32 · November 7, 2017

If you have multiple HTML files that share common content among each other (e.g. header, footer, menu, ...) you'll want to use a templating engine.

You can do this server side if you have access to something like php, java, nodeJS, ruby, etc. or if you need static HTML you can also use something like pug:

https://pugjs.org/api/getting-started.html

Combined with Grunt or Gulp to "compile" the templates on your local machine and then upload the final pages.

If you want to have shared Javascript files you don't need to take any extra steps.

You can reference the JS file from each page with a script tag without any issues.

But again if you plan on making multiple pages with shared content a templating engine makes a lot of sense, so you don't have to manually carry over changes to shared content to each page by hand.

vorticalbox · November 8, 2017

On ‎07‎/‎11‎/‎2017 at 11:50 AM, Ryois said:

You can use the same JS file for multiple web pages. However, I don't think you can reference an HTML without using an iframe.

please don't use iframes its not the 1990's

Nipplemilk909 · November 8, 2017

22 hours ago, N0ps32 said:

If you have multiple HTML files that share common content among each other (e.g. header, footer, menu, ...) you'll want to use a templating engine.

You can do this server side if you have access to something like php, java, nodeJS, ruby, etc. or if you need static HTML you can also use something like pug:

https://pugjs.org/api/getting-started.html

Combined with Grunt or Gulp to "compile" the templates on your local machine and then upload the final pages.

If you want to have shared Javascript files you don't need to take any extra steps.

You can reference the JS file from each page with a script tag without any issues.

But again if you plan on making multiple pages with shared content a templating engine makes a lot of sense, so you don't have to manually carry over changes to shared content to each page by hand.

i think its just asking me to reference the js files to one html file right? thats what the dom really covers, the interaction between js and html?

Ryois · November 8, 2017

On 11/8/2017 at 4:15 PM, Nipplemilk909 said:

i think its just asking me to reference the js files to one html file right? thats what the dom really covers, the interaction between js and html?

<html>
  <head>
    <!--HEAD,META,LIBS -->
  </head>
  <body>
    <script src="myscript.js"></script>
    <!--CONTENT -->
  </body>
</html>

<!--- ANOTHER PAGE-->
<!--- SECOND HTML FILE-->
<html>
  <head>
    <!--HEAD,META,LIBS -->
  </head>
  <body>
     <!--CONTENT -->
    <!--SAME SCRIPT FROM BEFORE-->
    <script src="myscript.js"></script>
  </body>
</html>

Heres an example

Ryois · November 8, 2017

8 hours ago, vorticalbox said:

please don't use iframes its not the 1990's

iframes are good, embedding YouTube videos, showing another site or multiple pages, router control, webmin, etc..

Nipplemilk909 · November 9, 2017

5 hours ago, Ryois said:


<html>
  <head>
    <!--HEAD,META,LIBS -->
  </head>
  <body>
  
    <script src="myscript.js"></script>
    <!--CONTENT -->
    
  </body>
</html>

<!--- ANOTHER PAGE-->
<!--- SECOND HTML FILE-->
<html>
  <head>
    <!--HEAD,META,LIBS -->
  </head>
  <body>
    <!--SAME SCRIPT FROM BEFORE-->
    <script src="myscript.js"></script>
    <!--CONTENT -->
    
  </body>
</html>

Heres an example

the meta tag isnt needed in most basic html files right?

Nipplemilk909 · November 9, 2017

5 hours ago, Ryois said:

iframes are good, embedding YouTube videos, showing another site or multiple pages, router control, webmin, etc..

my apologies for another question, but is using the script tag in html file and referencing a js file the same way just different ways to do?

N0ps32 · November 11, 2017

On 11/8/2017 at 10:18 PM, Ryois said:


<body>
    <!--SAME SCRIPT FROM BEFORE-->
    <script src="myscript.js"></script>
    <!--CONTENT -->
    
  </body>

Heres an example

That's not good practice, JS blocks rendering. If you have non critical JS you should always load it at the very end so the browser can start downloading resources referenced above.

Ryois · November 11, 2017

12 minutes ago, N0ps32 said:

That's not good practice, JS blocks rendering. If you have non critical JS you should always load it at the very end so the browser can start downloading resources referenced above.

I copied pasted in the wrong location, yes I am aware of this lol.

Ryois · November 11, 2017

On 11/8/2017 at 9:29 PM, Nipplemilk909 said:

the meta tag isnt needed in most basic html files right?

No, but for many websites, it's a must for good search rankings.

On 11/8/2017 at 10:25 PM, Nipplemilk909 said:

my apologies for another question, but is using the script tag in html file and referencing a js file the same way just different ways to do?

most websites use <script src="javascript"></script> yes.

Sign In

question about javascript

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Notes

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Featured Topics

Topics

Latest From Linus Tech Tips:

I shouldn’t have kept the $1,000,000 computer

Latest From Tech Quickie:

This Guy BUILT His Own Graphics Card!