Blog

Breaking JS

Arrays and Objects

Arrays and Objects | JavaScript for Beginners | PIXEL BOUTIQUE | #BreakingJS

In real life, we organise our life and the data in it using lists. Arrays are JavaScripts version of lists. They are a way of organising a list within your code. An array holds multiple items that are ordered, which means that each item has a numbered position within the array. This is numbered using the JavaScript zero-index.

Read more >

Share the love:
Breaking JS

Variables and Data

JavaScript Variables

JavaScript Variable are containers for storing data values such as numbers and strings which must be identified with unique names. These unique names are called Identifiers – these can be short or more descriptive names.

JavaScript Variables and Data | Breaking JS | PIXEL BOUTIQUE | #BreakingJS
Source: PixaBay

Declaring a Variable

Before we can use a Variable, we must declare the variable. We do this by typing the keyword var followed by the variable name.

Initializing a Variable

Once we have declared our variable we can then initialize it with a value by typing the variable name followed by a = symbol (assignment operator – more on this will be covered in future posts) and then the value you wish to store in that variable:

var myVariable1 = 5;

Let’s break that down:

var (declaring the variable) myVariable1 (variable name) = (assignment operator) 5 (value);

Names can contain letters, numbers, underscores (_) and dollar signs ($) only and they must begin with a letter, a dollar sign ($) or an underscore (_). They can not begin with a number. They are case sensitive and you can not use Reserved JavaScript Keywords as your variable name.

Reserved JavaScript Keywords include but are not limited to the following. As you work through JS, you will become more familiar with such keywords:

 break case catch class const
 continue debugger default  delete do
 else export extends finally for
 function if import in  instanceof
 new return super switch this
throw try typeof var voide
while with yield

We can have multiple variables like so:

var myVariable1 = 5;
var myVariable2 = 3;
var myVariable3 = 2;

Read more >

Share the love:
Breaking JS

An introduction to JavaScript

This is where my #BreakingJS journey begins and I’m equally excited and scared. So without further ado, blog post number 1 is an introduction to JS for those (including myself), who don’t really know what it’s role is in the development world.

If you are wandering what #BreakingJS is all about, check out the debut post here which explains what it is I’m doing.

JavaScript (JS for short) is a programming language that pops a little interactivity into your website. So you know all of those buttons you press when you submit a form? Those forms use JavaScript to gather and send information (data). Obviously it does heaps more than a functional button click. With JS you can do so much. From carousels and image galleries, all the way up to developing games and apps. It appears that the developer world is your oyster when you Break JS!

One thing before we continue:

In order to learn JS, you should already have knowledge of HTML, and if you have CSS too then that’s great. These three languages are important when developing websites and all work together to make your website look and work correctly. If you don’t have a working knowledge of HTML and CSS, then put JS on hold for now and tick those two languages off first.

Here is my analogy of how the three work together using the human face:

Introduction to JavaScript | PIXEL BOUTIQUE | Brekaing JS | #BreakingJS

HTML (The Face)

The content and structure of your face (website) and how it is laid out. It creates the position of your eyes, nose and lips (sections within your website that you can create using DIV’s etc).

Introduction to JavaScript | PIXEL BOUTIQUE | Brekaing JS | #BreakingJS

CSS (The Makeup)

This adds makeup (style) to your face (HTML) structure and generally makes it look pretty (or not), depending on how good you are at applying makeup.

Introduction to JavaScript | PIXEL BOUTIQUE | Brekaing JS | #BreakingJS

JavaScript (Facial Movements)

JS programs your face (website) so that you can speak, see + hear (submit forms, display interactive galleries, play games).

I hope this makes sense and you enjoyed my artwork 🙂

Read more >

Share the love:
Breaking JS

Breaking JS

Breaking JS | PIXEL BOUTIQUE | Learning JavaScript | #BreakingJS

I am a self taught developer who has over 10 years HTML and CSS experience. I’ve always kind of been in and out of learning JavaScript and figured it was about time to start learning properly and filling in those knowledge gaps, because I am pretty useless at it. In fact, you might say I often Break JS! In JS, a “Break” means to break a loop, and that is exactly what I am going to do. Break my continuous loop of #BreakingJS and learn the right way.

How will I Learn JS?

I’ve recently started the Free Code Camp course which has really tested my JS knowledge and made me realise that I don’t know what the hell I am doing, so along with continuing that course, I will be doing my own research online, lot’s of reading and using W3Schools and MDN (Mozilla Developers Network) as my reference points.

Learning JavaScript With Me

The reason I am blogging my learning journey, is mainly for myself, but to also help other fellow JS Newbies in #BreakingJS – and also, Vaidehi Joshi inspired me to do so after doing the same with Computer Science (#BaseCS).

I can’t promise that my posts will be accurate, educational, humorous or even well written, but this is for ME, and if anyone else finds it useful, that’s a bonus in my eyes. Feel free to follow along, offer any advice, scrutinise my thinking if you must, but just let me know your thoughts.

You can find all of my #BreakingJS posts here or you can follow my journey via the hash tag on Twitter or Instagram. Feel free to hashtag your progress.

Now, where to start…

Table of Contents

Share the love: