3

I’m new to JavaScript. Started learning a few days back. Please correct me if I’m wrong anywhere. I came through the three representation of JavaScripts: “Inline”, “Embedded” and “External”.

I have two questions regarding this:

1. Example below: Here we are not mentioning <script type="text/javascript"> but still it is working fine and the browser identifies it. How is this happening?

<html>
  <head>
    <title></title>
  </head>
  <body>
    <input type="Button" value="Click me" onclick="alert('Welcome');"/>
  </body>
</html>

2. When to use inline and when to use embedded? I understand everything should be external because if the code is separate, it can be more easily cached by browsers (from this answer). But I didn’t get the usage of inline and embedded.

My question may sound a little simple, but I can’t find the answers to them through searching. Kindly help me to understand these basics better.

Community
  • 1
  • 1
Arun Palanisamy
  • 5,281
  • 6
  • 28
  • 53
  • might want to look at: http://stackoverflow.com/questions/10607847/how-does-inline-javascript-in-html-work – panepeter Jul 20 '15 at 11:53
  • [inline vs external javascript?](http://stackoverflow.com/questions/138884/when-should-i-use-inline-vs-external-javascript) [how does inline javascript work?](http://stackoverflow.com/questions/10607847/how-does-inline-javascript-in-html-work) – Gaurav Mahawar Jul 20 '15 at 11:54
  • @GauravMahawar: `[Text](Link)` – Cerbrus Jul 20 '15 at 11:55

4 Answers4

0

Well, you can have external. This is javascript you load through an extrnal file

<Script type="text/javascript" src="path/to/javascript.js"></script>

Then you have embedded

 <script type="text/javascript">
      function foo() {
           alert('bar');
      }
      foo();
 </script>

Then you have inline. Imho(imho = In my humble opinion) inline comes in two varieties. inline functions or onclick handlers like you have shown. The greater consensus is however that inline functions are where HTML code mixes with javascript like the example below.

 <input type="button" onclick="foo()">

or an inline function as I and a few other developpers see it. Please note, this is my interpretation of the meaning inline. That interpretation is: A variable to which you assign a function.

Please note, this is an interpretation, but the meaning 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 different meaning and meanings can blur over from one language to another. That is why I think this is also an inline function because you can use it within a function do define a scoped function in a closure, or assign it to onlcick handlers of a DOM element, etc...

      var foo = function() {
                alert('bar');
           }
      foo();

To answer your second question:

Don't use inline. It's valid to use, but it means copying over all the javascript between separate html files.

If you make it abstract so you access all identifiers by id, and use the javascript representations it will run a lot smoother, and will be easier to maintain.

  document.getElementById('someobjectname')

gives you the object you want from within a js file. If you attach some onload handlers to the document element you can fire up your javascript when the document has finished loading into the browser and then perform your magic on it.

Tschallacka
  • 27,901
  • 14
  • 88
  • 133
  • 2
    Can you provide any reference for calling a function within a function "inline"? –  Jul 20 '15 at 12:01
  • [What is the difference between anonymous and inline functions in JavaScript?](http://stackoverflow.com/questions/19159703/what-is-the-difference-between-anonymous-and-inline-functions-in-javascript) the accepted answer, well technically it's assigning it to a parameter, i'll update my answer to represent that... I always work within scopes so I kinda merged that in my head as an understanding... I'll modify my answer to represent it correctly. – Tschallacka Jul 20 '15 at 12:02
  • 2
    The `type` attribute is not necessary starting HTML5 –  Jul 20 '15 at 12:04
  • Hi, meet my friend internet explorer. Backwards compatiblity, hard to get out of my system ;-) I have typed it like that for 15 years... – Tschallacka Jul 20 '15 at 12:06
  • The answer you quoted is hardly authoritative. He seems to be inventing his own terminology, calling an anonymous function definition assigned to a variable "inline". I've never seen that usage before. I don't think "inline" has a well-defined meaning, but if there were to be one, it would almost certainly be JavaScript given as an attribute value such as `click="`. –  Jul 20 '15 at 12:08
  • I disagree with you about that inline only applies to onclick handlers, because it's definition not set in stone. For my mind inline is whenever it's defined from within something or assigned to something. Tell me, does `click="alert('foo')"` make it inline? But what about `document.getElementById('bar').onclick = function() {alert('foo');};` Why is that not an inline function? It does exact the same. It's assignign a function to a variable. But somehow that is not an inline function? – Tschallacka Jul 20 '15 at 12:18
  • @MichaelDibbets The diffference is that the first mixes HTML and JavaScript together, the other doesn't. My definition of "inline" has always been "in a line of HTML", and refers solely to when you have zero separation between your HTML, CSS and JavaScript. I don't think there's this confusion with CSS, incidentally, where an "inline style" only ever refers to CSS styling that's applied to an element using the HTML `style` attribute. – Anthony Grist Jul 20 '15 at 12:38
  • Even then, I think we're trying to mix together two very different things; inline JavaScript (i.e. an `onclick` attribute in HTML) and an inline function within JavaScript (i.e. a function set as the value of a variable). The two may end up doing the same thing in your examples, but the techniques for getting to that end result are wildly different. – Anthony Grist Jul 20 '15 at 12:42
  • True that, yet it all boils down to an interpretation that can vary from developper to developper. I added a clarificaton to my answer that explains that the meaning of inline can vary from developper to developper depending on background and/or experience. – Tschallacka Jul 20 '15 at 12:45
0

  1. when browser reads html it's creating DOM. every element is object in DOM and has it's properties, events, functions. so when browser parses html it's binding events, calling functions at runtime. it's all about browser's behavior. look at: http://arvindr21.github.io/howBrowserWorks/ and http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ or search in google "how browser works"

  2. it's good to separate js, css part from html. but sometimes You want output js functionality according logic of Your app: somebody inlines it, somebody dynamicaly generates js file and requires it in html.

num8er
  • 18,604
  • 3
  • 43
  • 57
0

From the code snippet in your question

<input type="Button" value="Click me" onclick="alert('Welcome');">

Is an example of inline JS.

The other varieties as you mentioned are embedded and external.

Embedded JS is useful in situations where your scripts are specific to that particular file alone. You cannot reuse your JS in any other file.

<script>
    // Your script
</script>

External JS is useful in situations you want to reuse your script. For example create a file, hello.js with content

alert('Hello');

Then you can include the script in your html like

<script src="hello.js"></script>
  • *whereas script included in head tag have to be invoked manually.* What does this mean? –  Jul 20 '15 at 12:04
0

Here we are not mentioning but still it is working fine and the browser identifies it. How is this happening?

Because the HTML specification defines what intrinsic event attributes like onclick mean, just as it defines what <script> means.

When to use inline and when to use embedded?

In general:

  • Don't use intrinsic event attributes (like onclick="..."), bind event handlers using JavaScript (e.g. addEventListener).
  • Use external script elements (like <script src="..."></script>) for most scripts, especially if they large or reused between pages.
  • Consider inline script elements (like <script>...</script>) if:
    • the script is short and only applicable to a single page (you might get mild performance benefits or ease maintenance)
    • the script is designed to make data available to JavaScript (e.g. if it defines a variable containing frequently updated data and is generated from a database)
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thank you. But still i didn't get clarity about Embedded javascript? Also can u please give a short note on intrinsic event attributes because as i said i'm in the very beginning of learning Javascript.If it is not relavent please ignore it. – Arun Palanisamy Jul 20 '15 at 13:27
  • You'll need to be more specific than "i didn't get clarity". What don't you understand? "a short note on intrinsic event attributes" — There's one in the answer. – Quentin Jul 20 '15 at 13:28
  • I don't know when to use embedded javascripts?.and here what u mean by intrinsic event attributes. is it something related to embedded javascript? – Arun Palanisamy Jul 20 '15 at 13:30
  • "I don't know when to use embedded javascripts" — I'm not sure how I can be clearer than the bullet points in the answer. "intrinsic event attributes" — `onclick`, `onmouseover` etc. – Quentin Jul 20 '15 at 13:32
  • Sry if didn't get it.U didn't mention anything about embedded javascripts in the answer.. i got clear about external and inline from 2nd and 3rd points respectively,but not embedded..so intrinsic event attribute=embedded js? – Arun Palanisamy Jul 20 '15 at 13:37
  • @Crazy2crack — Your terminology is unclear. I've added examples. – Quentin Jul 20 '15 at 13:44