Skip to main content

Scripting

We will learn by doing today. We will create a folder on our desktop and create some javascript, some simple php files, and also work with some embeds and google fonts. We will then post these to OPAL.

Client Side Script (JavaScript)

I will demonstrate how you can implement some of these javascript samples shown here:

https://www.w3schools.com/js/js_examples.asp

We do not expect you to learn how to program in javascript in a part of one lecture and lab. We just want you to be able to grab some code and make it work for you.

If you are interested in actually understanding some javascript, then you may want to invest 12 minutes here: https://www.youtube.com/watch?v=Ukg_U3CnJWI

Certainly one of the javascript examples from w3schools demos will to the job for your project. You should not just copy and paste it as is; you should make it work to suit your situation.

Below is the sample code of how I did this for my one page site:

Notice that the above code does not need to be enclosed in a script element. This is because the javascript is coded into the onclick attribute. The onclick attribute is the only place where javascript is to be found. All other parts of the code example are all basic HTML.

That is the real learning objective: figure out how to do a little JavaScript and hack it to make it work for you.

For example, if you choose this sample, don’t just use the same image; use your own images. Students have figured this out over and over again, so you can do it too. I have had to sit down and help some students that got stuck, so let me know if you need some extra help.

Server Side Script (Google Font example)

The javascript example above is hosted at my account at https://jsfiddle.net, so it is showing up on this page via a serverside script. If you have a youtube account or a twitter account you can find instructions on how you can embed a youTube video or a Twitter feed on an html page in your site. Basically any thing that is hosted on another server and can be displayed on your site will count as a server side script. However, links that "come along with your template" don't showcase that you have applied any extra effort extra to your project.

Google fonts are hosted on Google servers and can be displayed on your pages. Here is a link that describes how to integrate Google fonts into your site

https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/

There are other Server side scripts you can implement, but the Google fonts option is used by a lot of students to meet the server side script. If you use this option you should be careful to only use legible typefaces for your body text. You may use more decorative typefaces for your headers.

PHP

PHP is a server scripting language, and can create dynamic and interactive Web pages. The OPAL server has PHP installed so you can easily create some simple PHP pages.

Here are a few snippets that you can experiment with:

Google Form

You can also use a Google Form to meet this objective. Here is a video