Posted on

Learn JavaScript Episode #5: Boolean Operators

In the 5th episode of this JavaScript tutorial series we will cover boolean operators. Booleans are used to compare whether two statements are true or false. In JavaScript, one equals sign is used for assignments, and two equal signs are used for comparisons.

Get The Learn to Code Course Bundle!
https://josephdelgadillo.com/product/learn-to-code-course-bundle/

Get The Complete Front-End Web Development Course!
https://www.udemy.com/front-end-web-development/?couponCode=WORDPRESS

Best,
Joseph Delgadillo
Web: https://josephdelgadillo.com/
YouTube: https://www.youtube.com/c/JosephDelgadillo
Steemit: https://steemit.com/@jo3potato

Posted on

Learn JavaScript Episode #4: Modifying and Undefined Variables

In the 4th episode of this JavaScript tutorial series for beginners we will cover modifying and undefined variables. It is important to reuse existing variables and other objects whenever possible to avoid excessive RAM usage.

Get The Learn to Code Course Bundle!
https://josephdelgadillo.com/product/learn-to-code-course-bundle/

Get The Complete Front-End Web Development Course!
https://www.udemy.com/front-end-web-development/?couponCode=WORDPRESS

Best,
Joseph Delgadillo
Web: https://josephdelgadillo.com/
YouTube: https://www.youtube.com/c/JosephDelgadillo
Steemit: https://steemit.com/@jo3potato

Posted on

Learn JavaScript Episode #3: Integers, Strings, and Variables

We are going to continue with this complete JavaScript tutorial by covering basic data types. In this video video I will show you how to use strings, integers, and variables in JavaScript.

Get The Learn to Code Course Bundle!
https://josephdelgadillo.com/product/learn-to-code-course-bundle/

Get The Complete Front-End Web Development Course!
https://www.udemy.com/front-end-web-development/?couponCode=WORDPRESS

Best,
Joseph Delgadillo
Web: https://josephdelgadillo.com/
YouTube: https://www.youtube.com/c/JosephDelgadillo
Steemit: https://steemit.com/@jo3potato

Posted on 1 Comment

Learn JavaScript Episode #2: Comments, Alerts, and Console Logging

Get The Learn to Code Course Bundle!
https://josephdelgadillo.com/product/learn-to-code-course-bundle/

Get The Complete Front-End Web Development Course!
https://www.udemy.com/front-end-web-development/?couponCode=WORDPRESS

In this JavaScript tutorial we will continue with the basics and cover how to insert comments in your code, as well as two builtin functions. We will be using alerts and console logging quite a bit throughout this tutorial.

Best,
Joseph Delgadillo
Web: https://josephdelgadillo.com/
YouTube: https://www.youtube.com/c/JosephDelgadillo
Steemit: https://steemit.com/@jo3potato

Posted on

Learn JavaScript Episode #1: Introduction

Get The Learn to Code Course Bundle!
https://josephdelgadillo.com/product/learn-to-code-course-bundle/

Get The Complete Front-End Web Development Course!
https://www.udemy.com/front-end-web-development/?couponCode=WORDPRESS

JavaScript is an extremely valuable scripting language that allows you to create functions, classes, event handlers, etc. within a website. In this tutorial video, we will cover how to create JavaScript files in your web project, inline js, and your first program!

Best,
Joseph Delgadillo
Web: https://josephdelgadillo.com/
YouTube: https://www.youtube.com/c/JosephDelgadillo
Steemit: https://steemit.com/@jo3potato

Posted on 4 Comments

Complete JavaScript Tutorial for Beginners

Get The Complete Front-End Web Development Course on Udemy!
http://bit.ly/2y2Nee7

Check out the Learn to Code Course Bundle!
https://josephdelgadillo.com/product/learn-to-code-course-bundle/

If you want get started as a front-end web developer, you will LOVE this complete JavaScript tutorial! JavaScript powers the majority of websites/webapps, so it is an essential language to know for any aspiring web developer.

If you would like to watch the videos with English subtitles, you can find them in the following playlist on YouTube 🙂

Topics covered in the video:

  • Introduction to JavaScript
  • Alerts and console logging
  • Integers, strings, and variables
  • Undefined variables and modifying variable values
  • Boolean operators
  • Comparing values
  • If statements
  • For loops
  • Defining functions
  • Event handling
  • Setting an elements inner HTML
  • Arrays pt.1
  • Arrays pt.2
  • Arrays pt.3
  • Textareas and getting the values of inputs
  • Functions – parameters and return values
  • Multiple function parameters
  • Flexible function parameters
  • Find the missing number exercise
  • Exercise solution
  • Classes intro
  • Class constructor, instance variables, and static variables
  • Extending classes
Posted on 2 Comments

Enroll in The Ultimate Web Development Course!

Hello Everyone!

Nick and I are pleased to announce the release of our newest course on front-end web development!

If you would like to get started as a front-end web developer, you are going to LOVE this course! Work on projects ranging from a simple HTML page to a complete JavaScript based Google Chrome extension.

https://www.udemy.com/front-end-web-development/?couponCode=WORDPRESS

We will cover the following technologies in this course:

  • Web development basics with HTML
  • Cascading Style Sheets (CSS)
  • JavaScript programming
  • jQuery JavaScript library
  • Bootstrap framework

This course covers the most popular web development frameworks, and will get you started on your path towards becoming a full-stack web developer!

This course is also available as an individual product on the site, and as a part of The Learn How to Code Course Bundle!

https://josephdelgadillo.com/product/learn-to-code-course-bundle/

https://josephdelgadillo.com/product/web-development/

Thank you for taking the time to read this, and we hope to see you in the course!

Posted on 1 Comment

Xamarin GUI Walk-through

Let’s talk about where we find things in our Xamarin Studio. The first thing I’m gonna to talk about is this bar right at the top here. So this white bar which may look familiar to users of Mac, because you have it in iTunes and the App store and things, it’s a bar that tells you where your errors are located and various messages. So, if I double click it, it’s not happening right now. But when you have an error it will show up here at the top and if you double click it, it will take you to the error, and that’s very useful. On the right hand side of the bar, this arrow if I click it, it tells me there’s an update for Xamarin. At the moment, I’m not going to update but just know that occasionally you might have to update to a beta channel or in extreme cases an alpha channel. Now this is because sometimes there are errors in Xamarin and it doesn’t quite compile right in a way that either Android or iOS accepts. So, might have to update to the latest beta, or alpha, just remember that. Ok, If we look at the left hand side of the screen we have this big play button, and the play button allows us to run whatever currently selected project we have in a device or simulator. The two ways of running it are either in debug mode or release, and the difference between the two is debug is where we want to be as developers because debug allows us to receive messages from the device when things go wrong. Release mode will not send us messages, so we won’t be able to see if something goes wrong all we see is the app crash on the phone. In the next box, when we click it down, I’ve got various iOS simulators set up here, and you can go into Xcode and set up more iOS simulators but these are the standard ones that Xcode should install for you. If you plug in an iPhone it will show up here in the iOS devices list, and you can run it on your iPhone or iPod or iPad. I don’t think you can run it in your trial edition of Xamarin though, but correct me if I’m wrong. Just below this panel, we have the solution, which I went through before with you in the previous lecture. I didn’t address UI tests because we are not going to look at that in this tutorial course. You can look it up on Xamarin’s website, but at the moment it’s not really within the realm of our project. The large window in the middle here is where we do the majority of our work. So if I come over here to NoteTaker.iOS and I go to AppDelegate.cs and I double click it, it will open the middle here and show me a whole bunch of code, and of course I can type things in here. Here you’ll notice the first feature of Xamarin, and that’s if I have a piece of code that’s wrong that it disagrees with it will put a red line underneath it. That tells me that there’s an error and that will be something I have to fix. So, I’m just going to delete that will save it back and if we look over here on the right hand side, we have a properties panel and this properties panel is related to this file we’ve just opened. So you can change the build action compile resource, image resource and generally you won’t have to look at this side panel except in extreme situations when you add things to your project. For example, in the resources images folder it will automatically set it as an image asset for you. So, there’s no need to worry about that kind of thing. So, we’re just gonna close that, and I’m going to close AppDelegate. Right, so if we look down the side here, I’m just gonna take you into another part of the GUI, which is a graphical editor, here we have Main.storyboard. So if you double click that, that’s gonna open up, and it usually takes a little while to get going, but it’s a graphical editor that allows you to place various elements on the screen in iOS. You do not have this sort of graphical editor in the Android version of Xamarin. They have a different way of doing things, and we will cover that when we get to Android. Once that’s loading if you come over here, we have a section called toolbox on the right. In Toolbox we have a whole bunch of things that we can add to our graphical user interface. I’m not going to go with what they are, but they are all here. To put them into our app, we simply have to click and hold and drag them across and there they are and to delete them, select this grey bar at the bottom, and press Command+Backspace and that will get rid of it. At the top of the main screen, you can click to see what it will look like on various devices. So on iPhone 6 it will look like this. On a iPhone 6 Plus it will look like this. The items that are already laid it there for you, you can tap them once and if you come over to properties, you have three tabs, Widget, Layout, and events. Ignore Events because we will do that ourselves. Widget lets you setup your item that you have on screen, so I can give it a name, a class, if we scroll down, you can give it an alignment relative to the screen, there are many things we can do, Layout, tells it exactly where it should be in the screen, and you can align it, to the center of the whole screen, both vertically and horizontally. Now, for this course, I am not going to do this tutorial, I’m not going to use storyboards, at all. We’re going to do everything programmatically, and the reason we are going to do everything programmatically is for your learning experience. So in the future if you want to use a different platform, that’s not Xamarin, that might be PhoneGap or Intel SDK, whatever it’s called now. So for this course, we’re not going to use storyboards. If we come to the top we have our menu, and if we click on the first one Xamarin Studio we can check for updates, see what version we have, and change our preferences, etc. If you click on preferences, we find the screen that allows you to set various settings through out the app through out Xamarin, rather. The most important of which is this one down here, SDK locations and Xamarin needs to know where these are for both Apple and Android. The Apple one will search the default location. So, when you install Xcode this is what it searches for, and it will also search for Xamarin.iOS which is installed with Xamarin Studio if you just install it the default way. Android, 2it needs to find three things the Android SDK, The Java SDK, and the Android NDK. These are usually located in the standard folders. If you can’t find them, if you come into here and there are red X’s go unto the Xamarin website or unto the forums and request help from them because they will take you through it. That pretty much covers, what we need to talk about with the GUI, and that brings me on to section 3, where we are going to plan our app before writing any code. So I look forward to seeing you then.

Posted on 3 Comments

Xamarin Folder Structure Explained

Now that we’ve created our project called Note Taker, you’ll notice there are 4 folders. The first one just called NoteTaker is our shared project. Now this folder is where we’re going to store all of our shared code. So, all of the code for example, in this file if I double click it, it will open it is accessible using both NoteTaker.droid for Android and NoteTaker.iOS for iPhone and iPad. If you put code for example in NoteTaker.droid NoteTaker.iOS won’t be able to access it, and there’s a very good reason for that it’s because iOS and Android are very different code-wise. So, you never want to share your iOS with your Droid code, ever, ever, ever! Sometimes within the shared project we can have what they called a conditional compiler, which looks something like this. If, Android and we can write endif and #endif, and this basically says, anything I write here will be applied to anything I want to build for iOS, and anything I write here will be applied to anything I want to write for Android. If I want to write for Android, it will of course ignore everything in the iOS section, but we will come to that much later on. That’s just a quick note. Ok, going to close that. So, if we come down on our folders here, we have NoteTaker.droid and NoteTaker.iOS. Now, the iOS one is in bold. That means it’s the currently active one. So when we click play up here it’s going to send it to our iPhone, or to our simulator, or our iOS device, to whatever we’ve chosen. If we want to change which project we have active, you go to droid, you right+click, and you go to set as start up project. So if I click that now, it now comes up at the top with the bunch of Android devices. Now, sometimes you would be in let’s say release and then you right+click a project, and you won’t have set a start up project. It’s a common error that happens and I don’t know why Xamarin does it, but just know it’s best to click debug iPhone simulator, right click and then it appears again. Ok, so make sure that you’ve selected iOS as your start up project. Close your Droid one, because we don’t want to look at that in the moment. So, in your iOS project we have a bunch of folders once again, and these base folders that your project starts with you should never ever move or change the name of. You can add folders to here if you right click it and you click add new folder, that’s absolutely fine. However, these four here you should never delete. Otherwise, your app will not build and you’ll have lots of errors. So, I mentioned it earlier but it should go without saying, any code we write for Apple goes into here: NoteTaker.iOS. Any code you write for Android goes in here: NoteTaker.Droid, and we never want to mix the code between the two. Shared code goes into just NoteTaker and that code in NoteTaker will be accessible by both Android and iOS. Now that we’ve covered where we put our code, and the whole project structure, join me in the next lesson when we walk through the Xamarin Studio graphical user interface.

Posted on 3 Comments

Creating a Xamarin Project

Now that you’ve got Xamarin installed, I want you to go ahead and open up Xamarin Studio. Note that you can follow this tutorial using Visual Studio using the Xamarin Plug-ins for that, and the workflow is pretty much the same. So, if you want to go that way that’s absolutely fine, but we’re gonna use Xamarin Studio. Once you’ve opened it, you are effectively in a lite version of Xamarin Studio, and what we need to do for this course to is to create ourselves a Xamarin account. So, if you click this log in button in the top corner it will ask you for your account details. We don’t have those at the moment. So come down here and click create account, and once you do that it will take you to this page on Xamarin’s website. You just put in your name, email, password, and you have the option here, to start a 30-day Xamarin trial. Now, this gives you access to the business version of Xamarin, which is what we want. Once you have finished this course the business version is the one that you should have if you want to use Visual Studio. You can get by on the Xamarin Indie Edition, which is much much cheaper, I think it’s a quarter of the price of the business version per year. This indie edition is perfectly fine for personal projects. So, once you’ve done all that click accept, and then come back here and enter your details. Once you’ve done that and you’ve clicked logged in, it will tell you: “You are now subscribed to Xamarin business.” I can subscribe on four computers, but on a trial I think you can only subscribe on two computers. So go ahead and close that. Let’s get started with creating our very first solution. So, come over here and click new solution. Now, if we look through the various options we have here, we have cross platform iOS, Android, Mac and other. If you’re only going to create an app for a single platform i.e., iOS or Android that’s fine, you can choose one of these options. I would advise to always choose cross platform because if you so decide you can add another platform later, and it’s going to be a lot easier than trying get all of your files together. So, we will click app and now you have a choice on cross platform, we can either do forms or native. Personally, I’ve used Xamarin forms and if you look over here in descriptions, it doesn’t actually say anymore, but it used to. Xamarin forms lets you write ones and run everywhere even on the graphical user interface which can be a good thing, but it can also be a bad thing because you can’t use the full system resources and various user-designed processes on Android or iOS if you use a generic version. But, if you choose a single view app, it allows you to use the entire Graphical User Interface native to each platform. So you can use everything that iOS can do and you can use everything that Android can do, and forms doesn’t let you do that. So, I would always choose single view app. Click next. It’s going to ask you for an app name and this could be anything you like. So, we’re just gonna call this note taker, and you’ll notice down here it doesn’t identify it for you. Now, this indentifier is going to be used to identify your app within the phone ecosystem on both Apple and Android. It’s typically formed of three words each separated by a period, and the first one is always com, the next one is your company name, but in this case I just put my name .grant.note_taker, and this is a unique identifier for your app. Right, so if you go to your Android developer account or your Apple developer account this identifier must be free. You’ve got to make sure that it’s free. Then we come down to shared code. We can either use what’s called a portable class library or a shared library, and the only difference between these two is how easy it is to share your code with other developers. If you want to share your code, and package it in one file, and to send it to loads of people you use a portable class library. If you want your code to allow you to do a lot more things then we use a shared library, and generally, I would say, let’s use a shared library and you can’t share your code as easily with people, but it allows you to do a lot more. We’re gonna take advantage of that so we can write a shared database later for both of our apps. So, go ahead and click next. It will ask you for a project name and a solution name. I would ignore this for now, just leave it as the default and I will explain what that means a bit later on. Lastly, you want to save it. So, wherever you want to save it it’s fine. You can save your projects in Dropbox. It syncs absolutely fine, no problems. So we’re gonna hit create and once it has worked through what it needs to do you come over here, and you’ll notice you have a bunch of essential folders, a tree structure. So, we’re going along like this. In the next lecture I’m going to explain exactly what each level of that tree structure is and how we’re going to structure all of our apps relative to these trees that you see here. So, join me for the next lecture.