Tag: javascript

Talk: Introduction to JavaScript & Web Development

Learn the basics of JavaScript, HTML and CSS in web development to build a simple to-do list webapp.

The second Thursday night software topic I held was another introduction to JavaScript, this time focusing on the web development side. This included a crash course in HTML and CSS, with a little bit of jQuery (a popular JavaScript library).

We had a smaller turn out this time (around a dozen), thanks to school holidays and the Easter break. But everyone there got actively involved and asked a lot of great questions. Many thanks to Anne (who helped set up) and Paul (who typed for me) who helped me get through the night with a broken wrist.

The slides I started off with are available here. They act as an introduction to the talk and to basic HTML, CSS, JavaScript and programming concepts.

The rest of the talk was learn-by-example and learn-by-doing. We built a web page that provided a simple to-do list webapp.

The code is listed below in the resources. Note that to view the code in your browser for these examples (or any webpage), right click on the page and select “View Page Source”. Or you can just save the page and open it in your favourite text editor.

As usual, there was a lot covered in this talk. And some of the code in the printed handouts (the new stuff in step 4) wasn’t covered, but leads on from what I did cover.

 

Resources from this talk:

Additional resources:

Talk: Introduction to JavaScript & Firefox Add-on Development

Learning the basics of JavaScript and Firefox add-on development by building two simple Firefox add-ons.

Last Thursday (7th April) we held the second of our Thursday Night Sessions, which was the first of my software topics: A Very Basic Introduction to JavaScript and Firefox Add-on Development.

We had ~25 people show up, from kids to IT professionals – most with a laptop in hand (and Firefox installed). For many of them, this was their first time programming; for others, it was their first time using JavaScript. By the end of the night, everyone had made their first two Firefox add-ons.

The slides I started off with are available here. They act as an introduction to the talk and to basic JavaScript and programming concepts.

The rest of the talk was learn-by-example and learn-by-doing. I walked everyone through using Mozilla’s Add-on Builder – a webapp that lets you easily code and test Firefox add-ons using the new Add-ons SDK.

Add-on Builder

We built two add-ons:

  • Wikipedia Button – An extremely simple add-on that adds a button to the bar at the bottom of your browser, with the Wikipedia logo. Clicking it will open Wikipedia in a new tab.
  • Translate Selection – A less-simple add-on that adds a “Translate Selection” item to your context menu (right-click menu). When you select some text, right click, and select “Translate Selection”, the text you selected will be translated into English (using Google’s translation service).

This was a 2 hour talk, which included me walking around to talk to and help individuals/small groups. I covered a lot in this talk – so try not to get too intimidated by it. Just keep playing around, and keep learning. In my next software talk (21st April), I’ll be sticking to the basics of JavaScript – this time, we’ll be using it in a web page. And feel free to come in to the workshop on Saturdays (1pm to 5pm) – I’ll be happy to answer any questions.

Resources from this talk:

Additional resources: