0
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script src="HelloWorld.js" />
</head>
<body>
   <button onclick ="pressButton()" >Click Me!</button>
</body>
</html>

The above code does not show the button in the browser.

The HelloWorld.js is in the same folder as the HTML File with the following code:

function pressButton()
{
    alert("Hi");
}

But nothing happens.

Even if I give the full path (or) ./HelloWorld.js nothing happens.

I am on a windows system.

subham soni
  • 274
  • 1
  • 5
  • 17
  • In Javascript, object inherits from object. There is no Java like class. Every function in Javascript is an object of `Function` constructor. Check this link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function – intekhab Jul 17 '20 at 14:45
  • Objects are definitely not just "key value-pairs", that's an extremely incorrect mental model for JavaScript. You should consider reading through https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects or another JavaScript book to obtain a solid foundational understanding of JavaScript's object model. – user229044 Jul 17 '20 at 14:53

1 Answers1

-1

in JS everything is an object. the snippets below are equivalent:

class test{
   constructor(){
      console.log('stuff');
   }
   foo(){console.log('stuff 2');}
}
var obj = new test(); //will print 'stuff' in console
obj.foo();            //will pring 'stuff2' in console


function test(){
   console.log('stuff');
   function foo(){console.log('stuff 2');}
   return {foo:foo}
}
var obj = new test(); //will print 'stuff' in console
obj.foo();            //will pring 'stuff2' in console
var obj2 = test();    //will print 'stuff' in console
obj2.foo();           //will pring 'stuff2' in console
tstoev
  • 1,415
  • 11
  • 12
  • These are not equivalent at all. Your second example produces `Uncaught TypeError: obj.foo is not a function`. But, even if they were, how does this answer the question? – user229044 Jul 17 '20 at 14:57
  • yup I am looking at it right now. I rarely use the second syntax – tstoev Jul 17 '20 at 14:58
  • Fixed it. I do think that it answers the question, because in js(and in scripting languages in general) the instancing is pretty much a syntax sugar compared to non-scripting languages. – tstoev Jul 17 '20 at 15:07
  • They're still not equivalent; in your first example, each instance of `class test` has its constructor set to `test`, and its prototype set to `test.prototype`. In your second, each instance has its constructor set to `Object` and its prototype set to `Object.prototype`. It's really unclear how telling OP "everything is an object" helps them understand how constructor functions work. – user229044 Jul 17 '20 at 15:18
  • they do work in the same way though, aren't they? – tstoev Jul 17 '20 at 15:20
  • The closer thing to identical would be `(function () { "use strict"; function test() { console.log('stuff') }; test.prototype.foo = function () { console.log('stuff2') }; return test; })()` but this is still not identical. `class Test { }; Test()` will raise `Uncaught TypeError: class constructors must be invoked with 'new'` for example, while `function Test() { }; Test()` works fine, even in strict mode. – user229044 Jul 17 '20 at 15:40
  • ok, I see your point. Although the output is the same, the interpreter handles it in a different way. I will incorporate your feedback in the example above, during the weekend. – tstoev Jul 17 '20 at 16:25
  • pff thats more complicated that I thought, and I can't spare the time to dig into it. Would you recommend to delete the post to avoid confusing others? – tstoev Jul 17 '20 at 16:48