2

I'm not coming from web-development at all, but am looking to build a web application.

So far, I've looked into all the server-side stuff (for example, I think my stack will be Linux + node.js + ExpressJS + MongoDB), and have learnt a lot! At this point, I'm comfortable setting up an HTTP server, routing requests, using RESTfull interaction with a database, and serving dynamic HTML using an HTML template engine like ejs or Jade. I even looked into Websockets as a means for establishing a TCP connection to add fast user interaction without page refreshing.

Now I'm looking to do pretty stuff; add graphs, tabs, ect to my web-applications! I've looked into things like Dojo, JQuery, CanvasJS, AngularJS ect, and all them seem cool. Problem is, now that I think of it, I have no idea how client-side programming works. For example, in AngularJS I may find something like: 

   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="components.js"></script>
  </head>

What is this saying? Does my server actually replace "components.js" with the actual "componennts.js" code before transmitting the response? What's going on with the https://ajax... source? Does the browser, (or the server?) actually have to go to this url, and retrieve code?

As I said, as far as I'm concerned, the server responds with an HTML document composed of ASCII characters. What then, is actually running on the client side, and how does it get this code? (i.e. on V8 or whatever).

Improve this question
11
  • HTML is processed by the client (==browser). The client fetches that URL and executes it.
    – Guy Sirton
    Commented Jul 23, 2013 at 19:43
  • 2
    w3.org/TR/html51/scripting-1.html#attr-script-src
    – Guy Sirton
    Commented Jul 23, 2013 at 19:45
  • @GuySirton Thanks for the link! So for something like Dojo/Angular ect; all the Dojo code is actually stored externally, and anyone who wants to use Dojo actually just requests their scripts from the browser?
    – Colin Martell
    Commented Jul 23, 2013 at 19:48
  • @ColinMartell: Sometimes web pages download JS components from central locations and sometimes you download them and stick those on your own web server... Google does serve Angular from their servers so you don't have to ( blog.angularjs.org/2012/07/… )
    – Guy Sirton
    Commented Jul 23, 2013 at 19:50
  • @ColinMartell That is more or less correct. There are several ways that Javascript can be linked to a web page. For reusable code like Dogo/Angular/etc., the external source file is the common way to do it. When your browser encounters a <script> tag with a src attribute, it will fetch that source file and inject it into your page so that all of its public functions and data become available to other scripts on your page. It is that code that makes up client-side web scripting.
    – Dan Albert
    Commented Jul 23, 2013 at 19:54

2 Answers 2

Reset to default
8

When a client makes a request to your Web Server requesting a resource -for example, the main Page- your server returns that resource. In case that resource is an HTML file, it is possible -and common- that to show your site you also require additional resources -images, CSS stylesheets, JS files- so the Browser can render your page correctly. That assets can be on the same web server that host your application or can be hosted somewhere else.

With this line of code:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

Your HTML file is saying that it requires the file angular.min.js, and that file is locate in the https://ajax.googleapis.com servers. On the other side, this line of code:

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

States that your site requires the components.js, and that file is located within your Web Server (for example, in http://www.mysite.com/components.js). So, when a user access to your site his Browser will load some files from your Web Server and some other from external repositories. Every file will be downloaded and stored in the Client's PC to load your site.

Improve this answer
2
  • Oh ok. I just never knew this. Sounds cool! Thanks!
    – Colin Martell
    Commented Jul 23, 2013 at 20:03
  • @ColinMartell: As an aside, most SO users recommend using a 3rd party server for your library scripts (see Where do you include the jQuery library from?). Obviously this doesn't apply to your site-specific scripts.
    – Brian
    Commented Jul 23, 2013 at 20:18
1

what Carlos said regarding .js files also applies to image (.jpg) and style source files (*.css) Once all files are downloaded, the client uses them to view and/or manipulate the page. If the browser does not recognize a command (because the browser is old, it has javascript turned off, or the code uses vendor-specific code), the app 'crashes'

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.