Unit 20 D2: Explore how web pages using scripts are implemented in different browsers

There are certain elements of JavaScript that can be displayed in different ways depending on what browser is being used. This is because each browser has their own version on how to read and run code which causes the outcome to be varied. Because of this inconsistency, it is beneficial to test your website on multiple browser to make sure that the code runs correctly and users will have the same experience on every browser.

Browser detection

Browser detection allows users to see the different properties of the browser in use. These are properties such as; name of the browser, code name of the browser, browser version, whether cookies are enabled, etc…

Developers have to create different versions of code so that the website is compatible with multiple browsers. This allows a wider audience to be able to access the website. The same thing has to be done so that the website is compatible with mobile devices; for example, the layout and size of the website would have to be altered to fit the screen of mobile devices without looking out of proportion.

Using Visual Studio Code, I have created JavaScript code which will present me with the properties of the browser that I have specified. This will allow me to quickly and easily get access to information about the browser I may need to alter and improve the performance and functionality of the website.

After creating a new HTML file, I opened a <script>tag so the browser knew that the code within this tag was JavaScript/client-side script. Within the tag, I wrote function which is a block of code created to perform a specified task – in this case, provided the details of the browser.

I then set up the variables – requesting information about the browser - 

Now, when I open this .HTML file in a browser, it will display the browser information that I have specified. A pop-up will appear as well, displaying information about the browser. This pop-up will be the example that I use to demonstrate the way scripts are implemented on different browsers.

Safari

The image above is what first appears when the .HTML file is opened in Safari – there is no browser details on this page. When you click the button ‘Browser Version’, the pop-up will appear along with browser information.

JavaScript running on Safari browser

Google Chrome

The image above is what first appears when the .HTML file is opened in Google Chrome – there is no browser details on this page. When you click the button ‘Browser Version’, the pop-up will appear along with browser information.

JavaScript running on Google Chrome browser

Firefox

The image above is what first appears when the .HTML file is opened in Firefox – there is no browser details on this page. When you click the button ‘Browser Version’, the pop-up will appear along with browser information.

JavaScript running on Firefox browser

Browser Style Sheets

Browsers each have their own CSS that they refer to when presenting content to the user. Because of this, the layout of websites can vary when using different browsers. The code for some websites is written in a way that it is only compatible with one browser and not another – this can create problems for users if they are unable to access/use the browser intended.

This is why developers/websites can benefit from have multiple style sheets (for each browser) so that it is compatible with multiple browsers, increases accessibility and increase the number of users visiting the website. 

Unit 20 M2: Discuss how a scripting language can improve functionality

Alerts, prompts and confirming user choices

Alerts, Prompts and confirming user choices are usually presented as popups in order to gain the user’s attention. 

Alerts is used to warn the user when the computer is about to perform an action that could potentially cause damage to the computer (e.g. Expose the computer to malicious software). This improves functionality by giving the user the chance to cancel the action before any damaging actions can occur. They can also allow users to allow access to block features in case the computer was mistaken about something being damaging, even if it’s not (e.g. some JavaScript actions can be blocked by the computer if they appear threatening).

Prompts are used to show the user that they have to perform a certain input in order to continue (e.g. Entering an email address when filling an online form). This improves functionality by increasing the chances of the user entering the correct information and decreases the chances of user errors occurring.

Confirming user choices are used to ask users to approve of a requested performance (e.g. When deleting a file from the Recycle Bin, the computer will ask – ‘are you sure you want to permanently delete this file?’). This improves functionality by preventing/reducing user errors. Using the example given earlier, confirmation notifications ask for permission to permanently delete files from the computer so if the user clicked ‘delete’ accidently, they have the chance to cancel the action.

Redirecting the user

Redirecting links are usually embedded within a webpage as text or an image (e.g. hyperlinks).  Redirecting links are used as a way for the user to access either an internal page on the website or an external website. This improves functionality by making it quick an easy for the user to access where they are wanting to go, without wasting time looking for it themselves.

For example, when the user clicks 'computer programming' on the webpage (highlighted above), the website redirects them to the page about computer programming.

Maintaining cookies