Web programming: AngularJS, part 2

The tutor shows an example of AngularJS in action, with JavaScript’s Math.pow(x,y) function.



JavaScript’s function Math.pow(3,4) evaluates 34, giving the answer 81. In that expression, 3 is the base, while 4 is the exponent.

Below, you can input a base and exponent and receive the answer from JavaScript’s Math.pow(base,exponent).

base, exponent ,

{{base}} raised to exponent {{exponent}} is {{answer()}}

The notable feature of this form is that it’s handled with AngularJS, which binds values as they are entered with expressions elsewhere on the page. The reason this page needs back-end code is to support the Math.pow() function, which seems unavailable in AngularJS without being brought into the scope, perhaps as follows:

var app0=angular.module(“theApp”,[]);
app0.controller(“theFnc”, function($scope){
$scope.base=”base”;
$scope.exponent=”exponent”;
$scope.answer=function(){
return Math.pow($scope.base,$scope.exponent);
}});

I’ll be talking more about AngularJS in coming posts:)

Source:

w3schools.com

w3schools.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

JavaScript: string functions: substr() vs substring()

The tutor describes the difference between substr() and substring()

Let’s imagine the string variable

var strng_ex=”this_example_string”;

The function substr(4,5) returns 5 characters from the string, starting at the fourth position (which is _, since the first position is 0):

strng_ex.substr(4,5) has value _exam

The function substring(4,5) returns a sequence of characters from the string, starting at position 4, then ending before position 5. Therefore, the value of

strng_ex.substring(4,5) is just _

HTH:)

Source:

www.w3schools.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

JavaScript: literal string with the concat() function

The tutor shares an observation about the concat() function.

The concat() function is used to join one or more strings to the end of another:

var strng0 = “This string, “;
var strng1 = “then this one”
var strng2 = “:)”
var strng3 = strng0.concat(strng1,strng2);
document.getElementById(“output”).innerHTML = strng3;

will display

This string, then this one:)

In my experience, a literal string can also be used at the front:

var strng_a = “then this one”
var strng_b = “:)”
var strng_c = “This string, “.concat(strng_a,strng_b);
document.getElementById(“output”).innerHTML = strng_c;

will also display

This string, then this one:)

Source:

www.w3schools.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web design: a JavaScript wrapper for SVG in WordPress

The tutor shows an example of a wrapper program in action.

To my knowledge, a wrapper is a program that hides a function that the managing system can’t handle. The “wrapping” is code that the managing system recognizes as the responsibility of another service, which it calls. The called service then executes the code inside the “wrapping”.

Here’s a example: SVG in WordPress. I’ve never gotten SVG to work in WordPress. (I’ve heard there are plugins for it, but haven’t tried any.) Yet, SVG is supported by the browser. I asked, “Could I embed SVG in JavaScript, which WordPress will turn over to the browser?”

Looking at the graphic above, the answer seems to be “yes”. The JavaScript wrapper program works: it allows SVG to be executed onto a WordPress page, when WordPress itself (to my knowledge) won’t do so without a plugin.

Source:

jenkov.com
Mozilla Foundation
w3schools.com
stackexchange.com

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Computer science: JavaScript: null value, undefined type and value

The tutor comments on JavaScript null and undefined.

Null, it seems, is often mentioned in computer science. Perhaps it’s used a little loosely: it might refer to the value read when there’s nothing there, or the value of a variable that doesn’t exist.

In JavaScript, in my experience:

jsDraw2DX Test

The tutor tests graphics with the jsDraw2DX library.


jsDraw2DX is a graphics library for JavaScript. I’d call it object-oriented: for programmers used to that style, it may be very intuitive. The tilted text above was generated from the following code:

var gr0=new jxGraphics(document.getElementById(“graph0”));

var col0=new jxColor(“#770077″);

var pen0=new jxPen(col0, ‘2px’);

var font0=new jxFont(‘serif’);

var brush0=new jxBrush(col0);

font0.size=”28px”;

var text0= new jxText(new jxPoint(85,105), “jsDraw2DX”, font0, pen0, brush0,35);

text0.draw(gr0);

document.getElementById(“graph0″).style.margin=”auto”;

I’ll be talking more about JavaScript graphics in future posts:)

Source:

jsDraw2DX.js

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.