Lesson 4

Coding Functions

MAD Educator: Tadhg Deeney

Diploma in Mobile App DevelopmentPart I

@ShawMobileApp

MOBILE APP DEVELOPMENT TOOL KIT

ONLY €19.99

Webinar Slides for every lesson

Bonus Videos

Summary Notes for every lesson

Exclusive Starter Pack

INCLUDED:

Enhance your learning experience!

Lesson 3 Recap

• Front End Development

• Introduction to HTML

• Introduction to CSS

• Building our UI

• Summary

• Course Interaction

• Q & A

Lesson 4

• Lesson 3 Recap

• Introduction to JavaScript

• Variables & Functions

• Arrays

• Adding Interactions

• Summary

• Course Interaction

• Q & A

Intro to JavaScript

Inspect Values to ValidateShow or Hide Elements of a PageMake changes without Refreshing

Syntax NotesStatements end in ;Blocks of Code are encased in { }= is an assignment operator== is an equivalence logical operator+ is a string concatenation operator

JavaScript

var foods = [‘Apples’, ‘Bananas’, ‘Oranges’];

for (var i in foods){

if(foods[i] == ‘Apples’){

alert(foods[i] + ‘ are great!’);}else{

alert(foods[i] + ‘ are okay…’);}

}

Intro to JavaScript

Define an Array named foods

Open a for loop that defines var ifor indexing each element of the

array

Checks if the current element is ‘Apples’

Displays a sentence if it is

Displays a different sentence

JavaScript

var foods = [‘Apples’, ‘Bananas’, ‘Oranges’];

for (var i in foods){

if(foods[i] == ‘Apples’){

alert(foods[i] + ‘ are great!’);

}else{

alert(foods[i] + ‘ are okay…’);

}}

Intro to JavaScript

Interacts with the elements

“Manipulating the DOM”

Add Script block to HTMLDefine function sayHello()

sayHello() function

End function & Script TagAdd onclick attribute to HTML

JavaScript

<script type= “text/javascript” charset=“utf-8”>

function sayHello(){document.getElementById(‘foo’).innerHTML = “Hi There!”;}

</script>

<h1 id=“foo” onclick=“sayHello()”>Click Me</h1>

Question Time

What is the “Fizz-Buzz”

Example?

#ShawMAD

Sample Interview Questions for Technical Interviews

Variables

Variables store Information

var task = document.getElementById(“inputTask”).value;

This information is SavedGiven a Name

Used and changed later on

taskList.push(task);

Functions

Block of Code that execute a particular Set of Instructions.

Functions must be given a name

( ) are used to add in arguments

{ } contain the scope

function add(){

//Commands to Add Tasks}function remove(){

//Commands to Remove Tasks}function display(){

//Commands to Display Tasks}

todoList

Arrays

A special variable that can store multiple values

Array elements are created using [ ]

Assigned a key value (starts with 0)

Define an Array named taskList

Add Values to the Array

Remove Values from the Array

var taskList = [];

function add(){

taskList.push(task);}

for(var i in taskList){

taskList[i]}

Position inContainer taskList0 First Task

1 Second Task

2 Third Task

The Display function

var taskListContent = “<ul>”;

for(var i in taskList){

taskListContent +=“<li>”+taskList[i]+”</li>”;}

taskListContent += “</ul>”;

Intro to JavaScript

Variables & Functions

Arrays

Creating Interactions

Congratulations you have just taken the next step

o Attend all of the lessons live to ask Questions in

real time and benefit the most

o We’re here to help, so contact us anytime!

Summary

Coding Challenge

See if you can Answer our Coding Questions

Stay tuned for another Challenge on Thursday!

www.youtube.com/c/shawacademyMobileAppDevelopment @shawacademy @ShawMobileApp

https://www.facebook.com/shawacademy

Facebook Review

Leave a Facebook Review to receive free code samples from todays lesson

Email mobile.app@shawacademy.com once you have posted your review

• The next session is “Web Hosting”

• Finishing our App

• Testing on Mobile Devices

• What is Web Hosting?

• How to get YOUR App Online

Your Next Lesson

Lesson 5

Attend all of the lessons LIVE and your

knowledge will grow

Shaw Academy Lifetime Membership Prize

during Lesson 6

Student Feedback

We strive for continuous improvement

After the lesson we will ask you to rate the lesson on a

scale of 1 (lowest) to 5 (highest).

www.facebook.com/shawacademy @shawacademy @ShawMobileApp

QUESTION TIME See you back for Lesson 5 Web Hosting

mobile.app@shawacademy.com