UNIT 20 D1- Explore How WebPages Using Scripts are Implemented in Different Browsers

D1- Explore How WebPages  Using Scripts are Implemented  in Different Browsers 

How web pages with scripts are implemented in different browsers

>http://adf.ly/q8bko D1 in a word document <

The way certain elements of JavaScript is displayed is not always going to be the same for every browser, as every different browser would have their own take on how to run the code which means that when running the code of different browsers you would always get something looking different. That is why it is always good to test your coding on every browser to try to find a close matching on every website to that each user on different browsers will have nearly the same experience within the browsers.

Browser Detection

The whole point of browser detection is to see certain things from: what web browser is in use and a number of other things. Because of browser detection, a web developer will have to use different codes to make sure that the website is working the way it needs to be in different browsers. The same goes for when a mobile user tries to use the website which means that the website itself should have a completely different way it operates to be better for when they use the site. Things that would need to be changed for mobiles uses are the layout and size of the website to match the size of the phones screen. The detection process is to make sure that the right code is used for the browser in use to allow the website to work at its best.

Here are some pictures below that are JavaScript popups which are shown on three different browsers that are Firefox, Internet Explorer and Chrome. From looking at all of these three images, it is really clear to see that the JavaScript doesn't work the same on these browsers because browser detection is not coded within the site so the browser is not told how to show what is on the website.

The reason why the popups are different is due to the fact that all browsers are programmed differently which means that client side scripts would be shown to be different on the client’s browser. CSS code should all look the same on all browsers but with JavaScript it is either in the wrong or right way. This is why it is displayed in any way unless told not to.

                     JavaScript running on Google Chrome Browser. 

JavaScript is running on the website within Firefox’s browser. 

                  JavaScript running on Internet Explorer 

This is the browser detection code to tell any web browser what to do

Here is an example of the code for the browser detection. This should detect what web browser is being used to access the website.  When the browser detection has figured out what the user is using then it would adjust accordingly.

Separate Style Sheets for Different Browsers

As you should know, all browsers work in different ways which means it is best that a different style sheet is made for them. If you were to use the same website but in different browsers without making a different style sheet for each then you would come across the website looking different for both websites.  

As you can see this is the same website that is in different browsers (Internet Explorer and Google Chrome). The website is optimal for Google chrome and not for Internet explorer as the style sheet has just been coded for Google chrome. Creating another style sheet for each browser should entirely get rid of all and any problems to do with issues of compatibility. This would work great with browser detection as it will know when to use a different style sheet when needed.  

Object Detection

There is another way that will allow the website to know what browser and the version of the browser is that the user is running. The way that the detection works is by detecting what browser and version is being used and able to add the code needed to make the website compatible with the user’s browser. It looks at the scripting language that will work on the browser and adjust it to what needs changing. The object detection works well with browser detection

Object Detection Code

This is the code that handles machines trying to access the website. The code detects the size of the screen and adjust it accordingly.