How to use an External JavaScript Page
I hate clutter. Whether it’s in your own personal space, office or even in your code, it’s like nails on a chalkboard. By now, we have all probably come across code that is a bit difficult to read, to say the least. Sometimes we don’t have control over these situations but when it comes to our own code we can help organize it quite a bit.
If you have expanded your abilities in the art of JavaScript, then you can see how things can get jumbled up. To fix this small, but annoying ordeal we can actually store our code in a separate page, which is referred to. This will help keep things short and sweet.
Right-click the folder and add a New Item. You can also place your file in the root of your project. Locate your newly created JS page and let’s go on ahead and name it “MyFirstExternalJS.js” and click OK. Let return back to our Default.aspx, or HTML, page and go ahead and add a paragraph tag right under the H2 tag.
Now let’s write in there, “Hello from HTML, or ASPX!” and that will conclude our extent of HTML. Now you can go ahead and run the page to see what we have.
Now, since you’re not impressed, let’s add a reference to your page for your .js page we just created. If you only have one page or will only be using the specific .js file on this particular page you can just refer it directly to this page.
Since we are lazy and don’t like to rewrite redundant code we can also just as easily refer the page in our “Site.Master” page if we will be using the same .js page throughout our application. Always be sure to place the JavaScript page Reference in the head section of your page.
This is done in the Head so when the page loads, the JavaScript code will all be available and ready to run, which can be important if you have a onload() event in your .js file.
Open the Scripts folder in you Solution Explorer and drag over you .js file into you default.aspx page head. And you are done referencing your External JavaScript file like in the Code Block above.
Now we can go ahead and add some code to out .js file. Let’s add a onload() event to our script sheet like so:
What we have done here is use our External Javascript page to create and an event as soon as the page loads for every time it loads.
Now that that’s out of the way let keep moving along and add the actual even to our Default.aspx page. In the body section we will need to add script tags and place the actual command between those tags. Once your finish run it and let’s see it go!
Make sure to make the onClick even equal to the JavaScript event we want to invoke. And you are set! Make sure to save and now run your application to see your lovely creation. If you still have any questions, please feel free to download the Source Code below, to help clear up any concerns or confusion. That’s all for this lesson, until next time my friend, so long!
If you have expanded your abilities in the art of JavaScript, then you can see how things can get jumbled up. To fix this small, but annoying ordeal we can actually store our code in a separate page, which is referred to. This will help keep things short and sweet.
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.
To begin, let’s create a new project. Now, we are at our default.aspx or HTML. To use an external page, what do we need? Correct, the page itself! Now, over in you Solution Explorer locate the Scripts folder, this is where we will be placing out new JavaScript file.Right-click the folder and add a New Item. You can also place your file in the root of your project. Locate your newly created JS page and let’s go on ahead and name it “MyFirstExternalJS.js” and click OK. Let return back to our Default.aspx, or HTML, page and go ahead and add a paragraph tag right under the H2 tag.
Now let’s write in there, “Hello from HTML, or ASPX!” and that will conclude our extent of HTML. Now you can go ahead and run the page to see what we have.
Now, since you’re not impressed, let’s add a reference to your page for your .js page we just created. If you only have one page or will only be using the specific .js file on this particular page you can just refer it directly to this page.
Since we are lazy and don’t like to rewrite redundant code we can also just as easily refer the page in our “Site.Master” page if we will be using the same .js page throughout our application. Always be sure to place the JavaScript page Reference in the head section of your page.
Code Block
Default.aspx
Referencing the External Javascript Page<script src="Scripts/MyFirstExternalJS.js" type="text/javascript"></script>
Open the Scripts folder in you Solution Explorer and drag over you .js file into you default.aspx page head. And you are done referencing your External JavaScript file like in the Code Block above.
Now we can go ahead and add some code to out .js file. Let’s add a onload() event to our script sheet like so:
Code Block
MyFirstExternalJS.js
First Functionfunction onload() {
alert("Hello from onload External JavaScript Page!")
}
Now that that’s out of the way let keep moving along and add the actual even to our Default.aspx page. In the body section we will need to add script tags and place the actual command between those tags. Once your finish run it and let’s see it go!
Code Block
Default.aspx
Calling a Function from the External JS Page directly from the body in our ASPX.<script type="text/javascript">
internal()
</script>
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
Now, in the body section let’s add a button so we can control when the actual JavaScript event takes place. And let’s add a popup() event to our script page like so:Code Block
MyFirstExternalJS.js
An Alert in our External JS Page that will be controlled by a button in our ASPX page.function popup() {
alert("Hello from External JaveScript!")
}
I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
ExternalJSTut.zip