Thank you for joining me for this video JavaScript with Servoy. For Servoy University, this is Scott Butler. In this video, we're going to go through a PowerPoint presentation of a basic overview of JavaScript. We'll go through all the different core functions that are available, as well as some of the additional things that Servoy adds to the JavaScript model. So let's start with a basic overview of what is JavaScript. It's an object-oriented language developed by Netscape and its cross-platform. Generally speaking, it's not meant to be used standalone, but it's usually embedded in some other product, most commonly in a web browser. When you embed JavaScript into a web browser, then you also get some additional items, like the document object model, commonly known as the DOM. So if you've taken a look at there at some of the other JavaScript tutorials, commonly they'll integrate the DOM in what the core JavaScript, but we have to keep in mind that those are separate. Some of the things that you can do in a browser with the window object and the document object are not available in Servoy, because those are only available when inside of a browser. When inside of Servoy, we get lots of new additional functionality. We'll review that in detail later. To give you sort of a background of how JavaScript is used in Servoy, they actually use the Rhino engine. And that's an open source JavaScript engine written by Mozilla. It's essentially a pure JavaScript implementation written in Java. So that's how you're able to write in JavaScript, but your application is deployed in Java. So let's start with the simple items. We'll start with values. JavaScript is an untyped language, meaning that you don't have to predefined the type for most variables. However, the values are of a specific type. So for example, you can have numbers represented as integers or with decimal places. You can have logical or Boolean values like true or false. You can have string representation like the word hello. You can represent dates. And then there's lots of other special keywords like null and undefined. So these are values that we can use in JavaScript. These values get assigned to variables. And you can declare several different types of variables. The most basic is a local JavaScript variable. And so inside of a function, you have the ability to declare a local variable that has the scope so that it only exists within your function. And you do that by simply prefixing the variable with the word, the characters, VAR. So that just tells it that it is a variable. Notice that again, it's untyped. So we didn't tell it that variable x is an integer. We just said, there. However, it is actually an integer since that's the value that has been assigned to it. Since we have global JavaScript variables, that's the same concept except for you don't use the word VAR. And so now that the value of x or the variable x is available throughout my entire scope. So anywhere in the program, I could represent I could access x and I could get its value. Then we have some special servoy items like servoy global variables. So these are actually defined at the solution level. If you're looking down your navigator down the left while you're in servoy developer, you'd be under solutions, globals, and there's a section called variables. And you can define those there. And when you define those, you will also predefine their type. So this is different than standard JavaScript variables. Because you're going to define whether or not that variable is a text or number or a media object or the various different options that you get there. And whenever you access those special variables, they're prefixed with the word globals. So if you have a global variable called test, you would access it with a globals.test. Now the nice thing about these global variables is that they can be used in other areas unlike the other JavaScript variables. So for example, you can use them in a servoy relationship. And you can also display those on the screen as a data provider value. So you can have a field, for example. And there's, we've got a little example here, globals.myglobals equals one. So that's an example that you would see in code for setting the global variable. You also have form variables. So these are similar to globals and that they're defined in the special area of servoy. And that's at the form level. So each form can have its own set of form variables. And again, they need to be predefined. So you need to determine their type. They can be used to be displayed on screen, however, they can't be used in relations. Because you might not have the proper context. So you can only use global variables in relations. Then servoy also gives you some predefined variables. This is something very unique to servoy. So whenever you have a form that's based on a table, all of the column names in that table are automatically local variables for you to access. So if you have a column in your table called test, and you set the variable test equal to one, what you've actually done is set the value of the column in the database to one. And we'll go through these in more detail later. Next, let's talk about constants. So constants are read only variables. An example here is const1 equals 1. So you can define it by specifying cnst in front of the variable name. And that means that it can't change values. It also can't have the same name as any other variable. So if you wanted to find something in your program and you want to make sure its value can never change, then you can define it as a constant. Next, we have literals. So these are fixed value, not variable, that you can directly point to. And we'll go through some of these in a bit more detail later. But it is a general overview, you have arrays. So that's a way of storing ordered objects. We have bullions like true or false. You can have floating point literals, such as decimals, decimal points, fractions, exponents, integer values, express and decimal hexadecimal or octal. You can have objects which are just custom predefined objects containing properties or values. We can have strings, which is of course just a series of characters. And you can put those in double quotes or single quotes. And then of course there's a escape characters, which in JavaScript is the backslash. Next we have expressions. So these are a set of literals, variables, or operators that evaluate to a single value. So for example, you can have arithmetic expressions where you're doing a disjean or subtraction. You can have string expressions where you're building a concatenated string or evaluating a string. You can have logical expressions where you're determining what the value is a true or false. And then you can also have just objects being returned. Next we'll take a look at the assignment operator type of expressions. So these are simply assigning a value from the right operand to the left. So we have your basics like addition, subtraction, and multiplication, as well as division. And then there's the module operator. So that's going to return back the remainder after division. There's the bitwise and let's going to return one if both operands are one or true. Then there's the bitwise or they'll return one if either of the operands are one. There's the bitwise exclusive or which returns one only if one but not both are one. So that means x can be one or y can be one, but both of them can't be one. There's also a shorthand notation where you can take the special sign like the plus sign and put it next to the equal and just do it in a shorthand expression. So x plus equals y is the exact same as x equals x plus y. Now we'll take a look at comparison operators. And these basically compare operands and determines whether or not the comparison is true or false. So they always return back a true or false Boolean value. So we'll start with the equal comparison operator. So notice that's two equal signs. The difference here being the comparison operator versus the assignment operator. If we did x equals y, that would actually be setting x to the value of y. x equals y determines whether or not the value of y is equal to the value of x and returns back true or false. Similar fashion with not equal to where we use the exclamation point. So we turn back whether the value is are not equal. So if x and y are of different value, it would return back true. Then you have the strict equal. The difference here with the three equal signs versus the two equal signs is that we're testing both a value and type. So for example, if I had a string of value one and an integer of value one, and I compared them two equal signs would return back true. Three equal signs would return back false because they're different type. Same thing with the strict not equal sign. You can also test value with greater than and less than using the greater than less than sign. You can also combine that with the equal to sign to determine if it's greater than or. Next, we have arithmetic operators. So these take several numeric values and return back a single numeric value. So for example, modulus. 12 modulo five returns back true. So that's going to give you the integer remainder after you divide the two numbers. Then you can increment and decrement values using the plus sign and the minus sign. So x plus plus is the same as saying x equals x plus one. Same thing with a decrement value x minus minus is the same as x equals x minus one. There's also a unary negation. And so if I were to say minus x, then that's going to take and flip the sign. So if x were equal to three, it would now be equal to negative three. Next we have logical operators and these return back a Boolean value and normally used with other Boolean values. So we have and or not. So if you want to test to see whether two values are true, then you use the double and sign. So that will only return back true if both of them are true. So x and y both true. The only one to test to see if one or the other is true, then you use the double pipes. So that functions as the or statement. And that will be turned back true if either one of them are true. And then you can also negate a statement using the not operator, which is the exclamation point. So for example, if x were true, not x would return back false. So we'll look at string operators. So the basic ones here is just the concatenating value. So if x and y were integers, it would actually add them together. But if x and y are string values, it will concatenate them together into one string. Next we have some special operators that are defined for us in JavaScript. The first one is a conditional. So if you write a line like condition, question mark, and then the value one, colon, value two, that's sort of like an if then type of operation. So if the condition returns back value of true, then this statement will return back value one. Otherwise it will return back value two. So it's kind of like a shorthand way of doing a if then else type of statement. You can also use commas. So if you want to define like multiple variables at the same time or something like that, you can use just a comma in your statement to do that. You can use the delete command to delete a value as well as deleting a property or a value in an array. You can use the in statement. So x and y will tell you if y has a property or a rate index equal to x. So if you have an array of objects and you want to test to see if that array has a value in it, you can just do x and y and that will return back whether or not it does not. You can use instance of if you want to check to see if x is an instance of a certain type. So check to see if x is an instance of a string for example. And we'll get into these in a little bit more detail in the next presentation. You can use the new command that returns a new object of the type. So for example, if I had an object called y, I could return back a new instance of the object using the new command with the parentheses after y. If we use this, that's a special command that will return back of calling object that was used in that method. Finally, we can use type of. So if I call type of x, that'll tell me what type of variable is x, is it a string, is it a date, etc. Next we have a regular expressions. These are used to match patterns and character expressions and the commonly just referred to as a recx. And when you create these, you create it using the new regular expression command. And my example here, I have a variable I'm setting equal to this new regular expression object. And x would be the pattern that you're going to use in that regular expression. And there's a whole series of different patterns that you can use. You can get really advanced and complex. And so I'd point you to a website, www.regxlib. And that's got a little evaluator. We can test your regular expression. It's a cheat sheet and a guide. But it's very useful if you want to test determine whether or not a series of values or patterns exist within a string. It's much more efficient than using manual search and replace within a string. Next we'll take a look at statements. So in JavaScript, you can have blocks of statements. And you do that by just putting the curly brackets around multiple of the statements. And that'll just group them together. And let's take a look at a conditional statement. So here's a common example that you'll see used in JavaScript. And that's a if else type of statement. So what we're doing here is we're testing to see if x is true. And we want to do one set of code. Otherwise, if it's not, then we want to do a different set of code. And so you can see we've outlined it here. What code will run when x is true? And what code will run when x is false? There's also a switch statement, which allows you to do that a little bit more efficiently. So if I call a switch on the variable x, then whenever x equals a, it will break into the a case statement. Now notice I also have the break keyword there. That tells it that I want it to stop executing. If I didn't have the break statement in there, then it would just continue executing all the way down. Lastly, there's the default option. And that's going to run if none of the cases matched my switch statement. Next we have loop statements. And these execute repeatedly until a specified condition is met. And those common one here is a four statement. So within your four statement, there are three expressions or conditions that you'll use within it and they're separated by the semicolon. The first part is the initializing expression. So this gives you the option to create a little local variable that will only exist within this little four statement. So commonly, you'll see the variable I created. So within a four statement, the initializing expression will be four, bear I equals zero. So you're going to initialize the loop to create a variable equal to zero. And then you have the condition that's going to keep looping as long as that condition is true. So you might do something like while I is less than some value. And then the last is the incrementing expression. So that's going to get executed every time it loops. So you might do something like I plus plus. so that would increment the value of I during each loop. So you have the initializing expression which gets around once while you enter the loop, the condition which gets evaluated during each loop and a loop will continue to run while the condition is true. And incrementing expression, which will get executed during each loop. Lastly, we have the do while statement. So this lets you set a chunk of code to run. And notice that the do is first and the while is last in comparison to the next one below where the while is first. So the difference here is at the top part, everything inside of the do block is going to run the first time no matter what. Then at the bottom, once it gets through its first loop, it'll run the while statement. So we'll check to see if that condition is true. If it is, it'll go back up and keep running. Compared to just the while statement on its own, it'll only run while when the while condition is true. So it won't even execute the first time. There's also some special options that you can do in your loop like a break. So the break will immediately exit the loop. You can also use the continue statement and that'll force the loop to move on to the next iteration. We've got some object manipulation statements in JavaScript. And that allows you to loop through manipulate the objects. So for example, the for in. So if I have an array, for example, I can do for and I can define a variable right there. So for test in test array, for example. And what that does is it creates that variable for me for each loop. And in the loop, it automatically assigns the variable to that value in the object. And it'll continue running until it's gone through every iteration in the object. So every property. Commenting your code, you can use a double forward slash to do a single line comment. You can also create block comments where you use the slash and asterisks. And everything in between those will be a comment statement. There's several predefined global functions that are built into JavaScript. The first one is used to replace escape sequences with character representations. So essentially if you have a URL and you want to go back and forth between replacing the special characters, you can use these decode and encode functions. Then there is an eval functions. And what that will do is it will evaluate the expression that you pass inside of the eval. So essentially if you have like a string that represents code and you evaluate that string, it'll run like as if that was hard coded written into the program. Next we have is finite and that just will determine whether or not X is a finite number is non. So that determines if X is not a number. Parce int and parts flow commands can be used to convert strings to numerical values. And then you can also convert a number to a string using number or string command and passing in the value that you want to convert. There's a couple others like escape and un-escape. And so these will switch back and forth between a hexadecimal and ASCII encoding. There's lots of predefined core objects built into JavaScript. The first one we'll take a look at here is an array. That's probably one of the more common ones used. An array is basically a set of objects. So for example, we've defined here a variable called myarray. And I've used a shorthand notation in the first line. So I have defined that array to be equal to one, two, and three. So I've done two things there. I've both defined its type that it's an array by using those brackets around the end. I've also filled its values all in one line. The other way to do it is as separate lines. So in the next example, you can see I've set my array equal to a new array object. And then I've gone and I've pushed value into the array. So myarray dot push one adds the value one to the end of the array. I can also do a reverse. I can get the last item off of the array by using pop. Then I can also directly access the elements in the array by their index in the array. So my array zero returns back the first element in the array. And I can get and set that value. I can also get the length of the array by looking at the length property. And again, we're going to go into these in an example format in the next series. Next we have a date object. So of course, if you want to represent some date values, you can do that using the command new date. And there are many different parameters that you can pass into the date object. And our example here we're passing in the year, the month, and the day. Notice that the month starts at zero. So I've got January 1st, 2010. And then once you have that date object, it's got lots of functions available to you. And we'll go over each of those in our next series. The basic example here is my date dot get month. So you can declare these date objects and then get information back about the dates. It's also useful for doing adding two dates together and things like that. There's also the function objects. Survey methods are function objects themselves. We're going to dive into these here in a couple more slides. But then you can also create your own function objects. Next we have a string object. So this is a series of characters. So I've created very my string and I've said it equal to test. And again, you can use single quotes here or double quotes. It doesn't matter. Once you've got that string object, you can run various series of functions on that object. For example, my string that two upper case will convert that to an upper case value. There's also a number object. So I can have set a number equal to 5.123. And then I can run some special functions that are available to me now that it's a number object. Like my nom dot to fixed and specify that only one two decimal places and we turn that back to me. Finally, there's a math object that lets me run lots of mathematical functions like math dot round 5.123. We turn back five so it rounds it to the nearest integer. Finally, we have working with functions. So there are four different types of functions in servoy. The first level here is a global method. And these are defined at the solution level. So every solution has a set of globals and these are predefined functions that you declare in servoy. The nice thing about these functions that are globals is that they can be assigned to any button or event in the solution. So anywhere throughout your entire solution, you'll be able to access these. And they're grouped into a file called globals.js in the solution. So when you're working in servoy, you'll see this globals.js file and that holds all of your global functions. Next we have four methods and like globals, these are defined at a specific level. So every form has their own set of methods. And these methods can be assigned to any button or event on the form. Notice the differentiation there that the form methods can only be executed directly by either a call from another function or by assigning it to a button or event on the form. However, with the globals, they can be assigned to any form in the entire solution. And those four methods are grouped into a file that has the name of the form.js. And so all the functions of the form are in that JavaScript file. Next you have local function objects. So JavaScript allows you to within a function create other functions. And those are used in more advanced situations and we'll cover those in another video. Finally, there's lots of functions provided by the servoy object model. So similar to when you're working within a browser and you have the document object model, servoy has its own solution, servoy object model. That gives you access to other classes and objects that they provide. And if you take a look down on the solution tree on the left, you'll see all of these. So application solution model, database manager, utils, and all of these items listed there. Now the source for these functions are not directly available to you, but its functionality is documented and servoy documentation equal to. That ends the PowerPoint portion of the JavaScript, the servoy video series that we're doing here. Next we're going to do some hands on examples within the servoy IDE. So you have to use all these functions and expressions inside of servoy.