Embed Size (px)
Citation preview
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
What is JavaScript?
Unfortunate Naming ConventionJava != JavaScript
JavaScript is entirely Client-Side
Functions are “fired” during the App’s Lifecycle
JavaScript – Scripting Language
document.write(“Hello MAD World”);
alert(“Click to Remove Me”);
<html><body><!– This is a Comment in HTML --><script language="javascript"
type="text/javascript">document.write("Hello World!")
</script></body>
</html>
Variables
Variables store Information
var myName = “Tadhg”;var myNumber = 8;
Save the DataName the Data
Use/Modify Data later
myName = “Oisin”;document.write(myName);
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}
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: Functions
<script type= “text/javascript”>function sayHello(){document.getElementById(‘demo’
) .innerHTML = “Hi There!”;}
</script>
<h1 id=“demo” onclick=“sayHello()”>Click Me</h1>
Fizz-Buzz Challenge
Count from 1 – 100
Shout “Fizz” instead of Multiples of 3Shout “Buzz” instead of Multiples of 5
Shout “FizzBuzz” instead of Multiples of 15
#ShawMAD
Sample Interview Questions for Technical Interviews
todoList
Arrays
A special variable that can store multiple values
Assigned a key value (starts with 0)
Add Values to the Array
Remove Values from the Array
var taskList = [];
function add(){
var task = “First Task”;taskList.push(task);
}
function remove(){
this.getAttribute(“id”);taskList.splice(id, 1);
}
Key: Array Position Array: taskList
0 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 [email protected] once you have posted your review
• The next session is “Development Tools”
• Creating Repositories
• Adding Version Control
• Project Management Your Next Lesson
Lesson 5
Out of Office – Annual Leave 31st October
GMT - Clocks Go Back!
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 5Development Tools
