Wednesday, May 28, 2014

JavaScript - Chapter 1 - Basics

JavaScript - Chapter 1 - Basics

Back again for some more fun with JavaScript. I will eventually lead this conversation into a website project and maybe some off shoots into areas of gaming or server scripting. However before you can run you must first learn to walk so here we are. There are some basic things you must know about any programming language there are rules and syntax that the interpreter understands and if you break these you will not have a functional program. Everyone assumes to be able to program you need to be good at math. I received my bachelors degree in Mathematics and my master's degree in Information Systems. However useful the math is for logic and data I've found programming more suited to learning a new language.


There are five primitive data types in JavaScript and they are as follows:

There are other types that are objects, arrays, and functions. Objects are used to hold data as properties as well as perform tasks via defined functions when they are attached to an Object most refer to them as methods. Arrays also hold data but that is their main purpose. Function executes a snippet of logic takes parameters and usually returns values.  Here are a few examples of the more complex types as follows:


There is some debate on whether you would want to use comments in code at least a few articles I have read lately they debate that well written code needs not to be cluttered with comments. I myself find them very useful. If you have a complex piece of code you would want other developers to know what a certain section of logic does especially when you are using shortened naming conventions as is common in JavaScript to keep payload down. Here are examples of how to use comments and you will notice up above I have already left a few in prior examples. 


There are a few words that are not allowed to be used as literals in your syntax because the interpreter regards these handful of words to perform operations. An example would be a variable. Just like your college algebra class you had to solve the following equation x+ 4 = 8 so here naturally x would be equal to 4 to complete the expression. In programming we have placeholders such as x to hold values or objects these are called variables. A variable definition would go as follows in the code:

var x = 4;

Here we are declaring a variable name x and it hold the value 4 which can be reused or reassigned throughout the code. The var portion of the variable declaration is a keyword. The interpreter knows that following the var keyword an a variable name then after and equal sign knows that a value is going to be assigned to the variable which has been declared. Here are some more keywords that are worth noting I would recommend visiting the following link for the functionality and definitions of what these key words do.

Your First Program

First we need to have a place to write and execute our code luckily with JavaScript we will not need expensive IDE just need to install Firefox.

Download Firefox

To open a scratch pad just click on the orange Firefox menu in the top left corner of the browser and then select Web Developer = > Scratch pad

This will allow you to write some basic JavaScript then execute it in the browser. Here comes the boom first program that every developer needs to write is the "Hello World!" program so in your scratch pad perform the following:

You will find that this opens in the browser and congratulations you are starting to code like Vikings. I'll catch you next week with some more fun. 

Tuesday, May 20, 2014

Javascript - Intro

Javascript - Intro

So in development right now there is a movement. It appears to me at least  that there are hordes of developers moving their shops over to javascript (JS).This  I suppose is due to there being better options for organizing the code and how client side code is able to communicate with the server.  You have new JS frameworks that create MVC structure for your web-based projects and along with that you have restful web-services that return Json that seems like a perfect marriage for JS to move and display data. Now we are going so far as to actually program your server in JS and complete the full request cycle without deviating from the JS. You could also embrace technologies that stored your data in JS type objects and  you can kiss SQL traditional data storage goodbye as you embrace this new form of development. I currently work for a Microsoft shop and have worked a little bit in JS. I have seen the brutal nature of scripts that go on for days and have very little structure. I once chased an error for two weeks before realizing that it was an extra comma in a 2000 line JS file that had been left there by accident from a previous cohort. I have rendered large amounts of data using every Jquery plugin under the sun.  But where I have lacked knowledge is good OO methodology for building scalable and maintainable JS projects. So I decided to start from the start and relearn JS from the very foundation. I'm hoping to go over the entry items and with weekly post work my way into a full website example. This is mostly something I promised a couple of friends of mine they wanted to learn how to code. I find to as I put my thoughts out here for the world I try to make them more meaningful and in doing so I feel educated personally by doing this so hey win, win.

So this next section is a rundown of what I personally know about JS off the top of my head. I'm sure I'm going to leave a few things out my apologies. I don't claim to be awesome just another scrub trying to earn a buck for his family who needs new shoes and electronics. So now that the disclaimer is out of the way lets talk techy for a bit.

Javascript(JS) is a interpreted language what does this mean it means that it is ran directly as is and is not compiled before hand into a language the the computer understands. It is supported in all browsers and the engine the interprets and executes JS code has made some major jumps in the last few years which also is probably why it's becoming a more feasible solution.

There are drawbacks for interpreted languages mostly they are slower then compiled languages and the big one is they are not checked for errors during compiling to avoid pitfalls. If you make a mistake in JS it's going to show up for your users so testing becomes key and most of all organization like the instance I mentioned earlier if you mess up your markup you may be on a hunt to find where the issues reside. I've heard that the syntax of JS was influenced by Java but don't be a noob and tell people (especially techy folk) that you are writing Java as I have heard many a person say then to my chagrin find them writing JS. However the good news is now you can tell your peeps you are a Javascript Developer and they think you are the man and shoot lightning bolts from your backside like William Wallace.

Javascript is a un-typed language I have also heard the term loosely type language meaning that you do not have to strongly type your variables before you assign them and also you have the flexibility to use a variable for one type here and then assign a different type down the road and hopefully you can see by this statement alone why this can be troublesome and why not being frivolous with this power is vital to keeping maintainable code.

So that is what I have for now buckle up next week I'll start going over the types and assigning variables. Then onward and upward. Remember to code like Vikings. :D

Tuesday, May 6, 2014

Chrome Auto Fill Honey Pot Hack

So today I have to say chrome actually is making me a bit heated. It's like my child that is always my good one just decided to go bad to get some attention. I still love you chrome but here we go. Today on my website I have a settings page where the user can update their username and a new password. If the user however has chosen to save password information upon login you get these very non stylish yellow boxes.

So I was thinking about my current research on honey pots to stop bots from autofilling your username and password fields and I thought why not stop the chrome monster from doing the same thing to my settings page. It's ironic that I'm using hacking prevention to fix an issue with chrome. So here is an easy fix for the man that doesn't want the tacky dom load change.

Place an input above your other fields you do not want filled.

Set the style to display none and the end user will not ever know it's there. Also no yellow boxes. This may not be the most eligent fix but I thought I would throw a twist on the posts I saw out there already.

The result:

I should also throw some credit to Phil Haack who's article I was reading to try to replace my captchas.