How does the browser identify embedded JavaScripts?
I am new to JavaScript. I started studying a few days ago. Please correct me if I am wrong anywhere. I went through three JavaScripts views: "Inline", "Embedded" and "External".
I have two questions regarding this:
1. Example below: we don't mention here <script type="text/javascript">
, but still it works fine and the browser identifies it. How does this happen?
<html>
<head>
<title></title>
</head>
<body>
<input type="Button" value="Click me" onclick="alert('Welcome');"/>
</body>
</html>
2. When to use built-in and when to use built-in? I understand that everything has to be external because if the code is separate it can be more easily cacheable by browsers (from this answer ). But I didn't get the use of inline and inline.
My question may seem a little simple, but I cannot find the answers by searching. Please help me understand these basics better.
source to share
We don't mention here, but still it works fine and the browser identifies it. How does this happen?
As the HTML specification defines what internal attributes of an event, such as onclick
, mean, just as it defines what it means <script>
.
When to use built-in and when to use built-in?
Generally:
- Don't use inline event attributes (for example
onclick="..."
), bind event handlers with JavaScript (for exampleaddEventListener
). - For most scripts, use external script elements (for example
<script src="..."></script>
), especially if they are large or reusable between pages. - Consider inline script elements (for example
<script>...</script>
) if:- The script is short and only applicable to one page (you might get mild performance benefits or be easier to maintain).
- The script is designed to make data accessible to JavaScript (for example, if it defines a variable containing frequently updated data and generated from the database).
source to share
Well, you can have an external one. This is the javascript you load via the extrnal.
<Script type="text/javascript" src="path/to/javascript.js"></script>
Then you inlined
<script type="text/javascript">
function foo() {
alert('bar');
}
foo();
</script>
Then you have it built in. Imho (imho = In my humble opinion) inline comes in two flavors. built-in functions or onclick handlers as you showed. However, there is a great consensus that inline functionality is that HTML is mixed with javascript as shown below.
<input type="button" onclick="foo()">
or a built-in function like I , as some other developers see it. Note that this is my interpretation of the inline value. This interpretation: the variable to which you assign the function.
Note that this is an interpretation, but the meaning of inline is very vague, but not specified somewhere. When you are used to programming higher level programming languages like java or c, inline has a whole lot of different meanings and meanings can blur from one language to another. This is why I believe it is also a built-in function, because you can use it inside a function to define a scoped function in a closure, or assign it to DOM element onlcick handlers, etc.
var foo = function() {
alert('bar');
}
foo();
To answer your second question:
Don't use inline. It is valid to use, but it means copying all over the javascript between separate html files.
If you make it abstract to access all ids by id and use javascript views, it will run much smoother and easier to maintain.
document.getElementById('someobjectname')
provides you with the object you want from a js file. If you attach some onload handlers to an element document
, you can run your javascript when the document has finished loading into the browser, then do your magic on it.
source to share
-
when the browser reads the html, creating the DOM. each element is an object in the DOM and has its properties, events, functions. so when the browser parses the html it binds events by calling functions at runtime. it's all about browser behavior. have a look at http://arvindr21.github.io/howBrowserWorks/ and http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ or google search "how does the browser work"
-
It is good to separate js, css part from html. but sometimes you need output js functionality according to the logic of your application: someone builds it, someone dynamically generates a js file and requires it in html.
source to share
From the code snippet in your question
<input type="Button" value="Click me" onclick="alert('Welcome');">
This is an example of inline JS.
The other flavors you talked about are built-in and external.
Inline JS is useful in situations where your scripts are specific to that particular file only. You cannot reuse JS in any other file.
<script>
// Your script
</script>
External JS is useful in situations where you want to reuse a script. For example, create a hello.js
content file
alert('Hello');
Then you can include the script in your html like
<script src="hello.js"></script>