Nail the on in the course.
We learnt that p h p code is executed on the server and the results of executing that code our sent
to the browser.
The p p code does not and can not run in the browser.
It's a server side language.
If we want to execute code in the browser we have to use a client side language like javascript javascript
code is sent from the server to the browser and the browser executes this code.
Let's look at an example.
We'll start with this a s t email.
We have a head and a body section a title and a button.
In the browser.
It looks like this and if I click the button nothing happens if the button was inside a farm element
then this would submit the farm.
But it's not so on its own.
It doesn't do anything.
Let's add some javascript code first will add an on click attribute to the button element inside this
attribute.
We can put javascript code that will be executed in the browser when the button is clicked.
The alert function in Javascript shows a message in a pop up window.
Javascript has similar syntax to HP you call a function by putting its name followed by brackets.
Any arguments and ending the statement with a semicolon.
So when the button is clicked this code will call the alert function passing this helo string to it.
Let's give that a try.
And there's the alert message.
There are three ways we can add javascript to a page adding code like this directly to an element in
the h.t. email is called in line javascript.
This is generally not a good idea as it can lead to messy code that is difficult to maintain.
Much better to keep the h.t. email and Javascript separate.
If you can.
You can do this by using the script tag which is the second way to add javascript to a page to replicate
the in line code above.
First let's remove it and create a function that shows the message instead.
Recreate functions in a similar way to how we do it in P HP.
Next we need to add an event listener to the button element javascript code is typically executed in
response to events a button being clicked the page being loaded a farm being submitted and so on.
To do this first will add an I.D. attribute to the button.
So we can uniquely identify it then we need to get the but an element which we do by calling the get
element by idees method passing in the I.D. of the elements.
We want the document object represents the page of astm l..
This returns a variable that represents the button element in the h.t. EMAIL.
To this we can call the AD event listener method passing in the name of the event.
We want to listen far in this case to click event and some cold air that will be executed which is the
name of the function we just created.
Adding the cold like this is sometimes referred to as M bedded javascript.
And in the browser when I click the button the message is shown as before.
The third way to add javascript code to a page is to specify it in an external file that's create a
file called My script that J S..
And will cut the contents of the script tag.
And paste it in this new file.
The name of this file can be anything you like but it's good practice to use the dot J s extension back
in the index file.
We can add a source attribute to the script tag.
With the name of the file.
Although this element is now empty we still need to include the closing script tag.
In the browser the code works as before.
This being a p-h because I'll only be covering the javascript code that's relevant to working with HP.
But if you want to know more about javascript in more detail.
This site is an excellent starting point.
I should also mention that up until fairly recently javascript was pretty much exclusively a browser
only language.
However if you have the nolder jazz framework installed on your server you can run javascript on the
server just like HP.
We won't be using that though on the server we'll use P HP as we have up to now and Javascript will
be used in the browser.
But I just wanted to make you aware of it.