Code First: Girls UCL

Spring/Summer 2016

Recap:

Frameworks

Framework vs Library

Framework: 

  • provides a structure for your code to address a particular problem or bring your architecture in "order"
  • Like a code-template with some helpers, constructors etc

Library:

  • an entire toolkit which highly abstracts different layers, like browsers / DOM models / etc.
  • simplifies your coding experience. 
  • generic & applicable to various tasks

Bootstrap

jQuery

Getting jQuery

JavaScript file that can be downloaded from the jQuery downloads page.

For each version you can either get the normal code, which is useful for your own development, or the minified (jquery.min.js) code, which has had all the space (and other stuff) taken out to make it as small as possible, so it downloads quicker.

Save it in the same folder as your website!

      Link it

    <script src="jquery.min.js"></script>
  </body>
</html>
$('li')                // selects all the li elements on the page
$('li .important')     // selects all the li with class="important"
$('#main-title')       // selects the element with id="main-title"

Experiment with jQuery using the Console section of the Chrome developer tools.

You will need to be on a page where jQuery is loaded.

 

One of the nice things about jQuery is its ability to select elements via their CSS selectors.

To select elements jQuery uses the $(‘ ’) function. For example:

Demo

What else can you do with jQuery?

 

Check out the API Documentation and experiment in your groups!

 

Things get a lot more interesting when you can create bits of JavaScript to be run in response to a user action.

This allows you to build up interactions like “when the user clicks the submit button, check that their email is a valid email, if it isn’t make the field go red and add the words ‘email is invalid’ at the bottom of the form”.

 

If you want to learn more about jQuery you might want to try some of the following resources:

 

Where to get help?

Experiment with jQuery using CodePen or jsFiddle.

Google Analytics

An analytics service provided for free by Google. It allows you get an overview of how many people are visiting your site, where they come from, what they do on your site, and much more.

How it works

To use Google Analytics you need to place JS Plug-In, a snippet of JavaScript, (that they provide) on each of the HTML pages on your site. When a user visits the page, the javascript sends a message to the Google Analytics site logging the visit.

 

Competition

Put into practice the skills learnt on the course

Work individually or in groups of 2-3 to create a landing page for a website.

Form teams by Week 3, and collaborate on Slack

  • A visually appealing design - good use of CSS, HTML elements, and Twitter Bootstrap

  • Good formatting

    • Code split into the appropriate files

    • Files indented properly

  • A live website (Github page, Heroku or own domain)

  • Extras e.g:

    • A contact form (for example name and email)

    • Social buttons

    • Widgets

    • As many different HTML elements you can manage

Interactive elements (like forms) on the website don’t need to be functional, but should be present if they need to be for the visual aspect of the design.

  • (optional) Good organisation

    • Version control using GitHub

    • Sensible commit messages

Code First: Girls UCL Session 4

By Diana K. Lee

Made with Slides.com

Code First: Girls UCL Session 4

jQuery

  • 935

More from Diana K. Lee