You are browsing the archive for coding.

JAVASCRIPT INTRO

November 21, 2016 in IID

Javascript is a another programming language, often referred to as the ‘language of the web.’ It is used to add interactive functions to web pages. Javascript shouldn’t provide the content of a page, or have any presentational influence. The page should work even if the Javascript disappears: all content should be visible and styled the same.

Javascript looks like many other programming languages, it has curly brackets, semicolons, variables and many of the same control structures.
var a = 1;

var b = 2;

var c = a + b;

console.log( c );

We can use Javascript in files, but modern browsers like chrome, also provide us with a development console that lets us write quick, interactive bits of Javascript.

jQuery is also a part of Javascript and coding.

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto − Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

jQuery is not a language of its own; when you write jQuery, you are writing Javascript. Anything you can do in jQuery, you can do in Javascript but you may run into compatibility issues across browsers due to the simplified language and you’ll need to write more.

The dollar sign ($) is jQuery’s main function. It grabs the elements from the page for us and lets us use jQuery’s functions on them. For example:

$( ‘body’ ).css( ‘background’, ‘#FF0000’ );

$( ‘h1’ ).css( ‘color’, ‘#00FF00’ );

$( ‘div’ ).css( ‘height’, ‘400px’ );

Javascript time works in milliseconds. 1000 milliseconds = 1 second. If you do not specify the units, it assumes that it is pixels. If you use quotation marks, then you can specify the units.

CSS NOTES

November 14, 2016 in IID

spans are inline elements. They divide the text in-line

divs are block elements. They divide the text in blocks (on different lines)

<display: none> in CSS helps to hide data (example: when someone wants to click to something on the page

background{display: inline;} displays the background colour just on the text

inline margins only apply to the linear margin

block elements include the margin on all sides

padding goes around the content but is on the inside of the object

border goes around the content but is on the outside of the object

display: inline-block; will display the information both inline and in block format

CSS INTRO

November 1, 2016 in IID

CSS is a massive part of coding and the process of creating a website. CSS stands for Cascading Style Sheet and it is used to define presentation rules for content. In other words it tells the browser how the html page should look with a series of rules and codes.

The properties and values applied to elements are specified by selectors, for example: selector{     property: value;     property: list of values;     }

Here is a basic css style page that I applied to a pre-made html page:

41

HTML INTRO

October 10, 2016 in IID

In our introduction to coding for the web (HTML) we used an application called Atom and Google Chrome as the file reader. Firstly we viewed the coding of Google’s home page by clicking on view > developer > view source which brought up the full code for that page. There is also an option to live edit the page e.g.: change the view, the font or the size etc. these edits make no change to the actual website itself but can be saved in your browser as preferences for next time.

Our task was to learn the basics in HTML.

HTML is known as hypertext or markup language meaning that it adds significance to content and provides structure to the page. HTML code has no presentational information or programming capabilities.

All the information that you want has to be set out in a certain way with tags, here’s a basic layout structure:     <TAG NAME>  CONTENT  </TAG NAME>     and all documents must start with:     <!DOCTYPE html>     so that it can tell the browser what type of document it is and therefore how to read it.

We put the various tags into different categories to help understand them.

  1. Structure: ordering parts
  2. Sectioning: dividing and organising (header / footer etc)
  3. Headings: <h1> <h2> (ordered by importance), titles, subtitles etc
  4. Content: <p> paragraphs, images, diagrams, captions, references
  5. Text: add meaning, bold, underlined etc

The task was to copy a very simple template into Atom and add different tags to it to see what changes were made. All tags were found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

The last step was to validate the website for any errors, to do this all you have to do is copy the entire code into this website: https://validator.w3.org where it will tell you what errors there are and where they can be found within the code.

Skip to toolbar