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 Programming: JavaScript: how to manage a multi-line string

The tutor tells a trick for printing long strings with JavaScript.

Suppose you have a long string, over many lines, that you want to print with JavaScript.

Typically, to print a string, you might assign it to a variable, then print the variable:

var string_0=”Getting ready for Christmas…(and so on)…”;
document.getElementById(“div_0”).innerHTML=string_0;

In my experience, if the program you’re using puts a line break in the string, that seems okay. However, JavaScript may not allow an explicit line break in a string variable:

var string_0=”Getting
ready
for
Christmas”; seems not to work

Nonetheless,

var string_0=”Getting “+
“ready “+
“for “+
“Christmas….”;

will print as

That’s what I’ve noticed, anyhow:)

Source:

w3schools

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.

Web design: jQuery css() and JavaScript style: boundary testing

The tutor discusses what he noticed while experimenting with jQuery css() and JavaScript style.

JavaScript has a style function that allows you to access style attributes of an element. For example, to get an element’s color:

var e1_color=document.getElementById(“e1”).style.color;

However, as I understand, you’re not meant to harvest the entire style at once:

var e1_style=document.getElementById(“e1”).style; //not intended

Furthermore, let’s imagine you do so anyway, then try to convey that style to another element:

var e1_style=document.getElementById(“e1”).style;
document.getElementById(“e2”).style=e1_style;
//won’t work, according to my tests

Curiously, though, I’ve found that

var e1_style=document.getElementById(“e1”).style;
jQuery(“#e2”).css(e1_style);

does work on Chrome and Firefox (but not ie11).

It’s not a recommended way to change the style of an element, but it hints at how JavaScript and jQuery can have deeper communication than JavaScript with itself. It also reminds of the potential differences from browser to browser.

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

Source:

w3schools

Pollock, John. jQuery: A Beginner’s Guide. Toronto: McGraw-Hill, 2014.

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