Client-based Web Programming

The Browser and JavaScript

Licence for this work

This work is produced by Johan Leitet for the course Client-based Web Programming (1DV022) at Linnaeus University.

All content in this work excluding photographs, icons, picture of course litterature and Linnaeus University logotype and symbol, is licensied under a
Creative Commons Attribution 4.0 International License.

You are free to

copy and redistribute the material in any medium or format
spread the whole or parts of the content
show the whole or parts of the content publicly and digital
convert the content to another format
change the content

If you change the content do not use the photographs, icons, picture of the course literature or Linnaeus University logotype and symbol in your new work!

At all times you must give credit to: ”Linnaeus university – Client-based Web Programming (1DV022)” with the link https://coursepress.lnu.se/kurs/klientbaserad-webbprogrammering/ and to the Creative Common-license above.

"The browser is a really hostile programming environment."

-- Douglas Crockford,
The JavaScript Programming Language

Server - Client

Icon made by Freepik from www.flaticon.com is licensed under CC BY 3.0

JS in the Browser

Old recommended: Add scripts at the far bottom of the page

index.html


<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
<body>
    <section>
        ... A lot of content here ...
    </section>

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


    src/
       |-js/
          |-app.js
       |-index.html

JS in the Browser

You can add scripts on the page. Avoid this.

index.html


<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
<body>
    <script>
      console.log('Testing out js in the browser')
    </script>

    <section>
        ... A lot of content here ...
    </section>
</body>

Using ECMAScript Modules (ESM)

Supported in all major browsers

index.html


    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script type="module" src="js/app.js"></script>
        </head>
    <body>
        <section>
            ... A lot of content here ...
        </section>
    </body>


    src/
        |-js/
            |-app.js
        |-index.html