Posted on

Programming: line numbers in Notepad

Tutoring programming, you might still use Notepad (I do). The tutor shares an observation.

Some text editors have the option to display line numbers, so you can see the exact line you’re on. Since compilers often mention problems in code by their line numbers, having them displayed is helpful.

I don’t know how to display line numbers in a column on Notepad, but it does have its own way of showing where you are:

  1. Across the top, click View. A dropdown will appear.
  2. If Status Bar is unchecked, check it.
  3. The Status Bar appears along the bottom. At bottom right, you’ll see something like Ln 44, Col 2, which would indicate your cursor is on Line 44, Column 2.
  4. You may need to uncheck Word Wrap, under Format, before Status Bar is available.

HTH:)

Source:

superuser.com

Posted on

Perl programming: printing a string

Tutoring web programming, you might encounter a question about Perl. The tutor mentions an observation.

Because inline styles use quotes, and then of course printing a string often uses quotes around it, a situation can easily develop in which nested quotes occur. In my experience, the nested quotes need to be different somehow, as

print "this text gives "that text" as its message";

seems not to work.

However, here are a couple of options:

  1. Using different types of quotes for outer vs inner strings:
    print "enclosing 'inner string' string";

  2. print "enclosing \"inner string\" string";

With the second option, the inner quotes are escaped. Then, Perl reads them simply as symbols rather than having specific meaning, so it just passes them along.

Source:

McGrath, Mike. Perl in easy steps. Southam: Computer Step, 2004.

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

Posted on

Web design: CSS properties vs html attributes

Tutoring, definitions are important. The tutor shares the difference between CSS properties and html attributes.

A CSS property is something you change to affect the appearance of an element. For instance, the color property can be set to the color you want the text to print in. The font-size property can be set to the size you want the text to appear.

An html attribute doesn’t change the appearance of the element, but describes it in some other way. As an example, a name can have the title=”description” attribute to describe more about it when the user mouses over. The alt=”text description” attribute renders descriptive text when the image won’t be rendered. lang (language) and href (destination of an anchor tag) are two more attributes.

I would say that, indeed, properties belong to CSS, while attributes belong to html.

Source:

w3schools.com

w3schools.com

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

Posted on

Web programming: JavaScript: avoiding the self-closing script tag

Tutoring web design, this fact is known. The tutor shares some documentation.

I’ve known for some time that the self-closing script tag

<script src=”the_script.js” />

seems not to work. Rather, I use

<script src=”the_script.js”></script>

I’ve wondered why the self-closing script tag doesn’t work; is it just something I’m doing wrong?

Today, I got confirmation that, indeed, the self-closing script tag doesn’t work in html5. Darren Jones, in his book JavaScript: Novice to Ninja (chapter 1) confirms that separate opening and closing script tags must be used.

Source:

Jones, Darren. JavaScript: Novice to Ninja. SitePoint Pty. Ltd., 2014.

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

Posted on

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.

Posted on

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.

Posted on

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.

Posted on

Web design: y=sinx from jsDraw2DX

The tutor shows how to produce a graph of sinx on a web page using jsDraw2DX.

I’ve mentioned jsDraw2DX in a couple of posts (here and here).

For producing a graph of sinx, the basic construct is

var singraph = new jxFunctionGraph(‘Asin(b(x-c)) + d’, x_start, x_end, thePen);
singraph.draw(graphics_div);

Above, A,b,c,and d are numbers to customize the sin graph. x_start and x_end are the start and end x-coordinates of the graph. thePen is an instance of jxPen, used to draw curves and outlines. graphics_div is the <div> element in which the graphics will be displayed.

Since webpage coordinates often start from the upper corner, then go across and down (rather than up), you may find you need the parameter A to be negative for the graph to look as expected. For instance, y=-sinx might be needed to produce a graph that looks like y=sinx should.

Here’s an example:


The actual function to produce the graph above in jsDraw2DX:

-45sin((x-20)/20)+60

Source:

jsDraw2DX

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

Posted on

Web programming: the “auto” setting

The tutor talks a bit about “auto”: is it the default setting for layout?

I’ve read that “auto” is default: unless you set the property to something else in particular, the element will be rendered as though that property was “auto”. Not always, in my experience; I’ll show you now:

Here’s an image without the “margin:auto” setting:

<img src=”source0.abc” style=”display:block” />

Here’s the same image with “margin:auto” included:

<img src=”source0.abc” style=”display:block;margin:auto” />

I’ve viewed this post in Chrome, ie11, and Firefox. In each case, the top image is left-aligned, while the bottom one is centered.

So many times I’ve keyed “margin:auto” wondering “Is this redundant?” Certainly not always:)

Source:

w3schools.com

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

Posted on

Web programming: AJAX: the current price of oil

The tutor demonstrates AJAX.

I understand AJAX to be an acronym: Asynchronous Javascript and XML. I’m not sure it necessarily involves xml; this demo doesn’t.

The data model behind AJAX is that a user clicks a button on the webpage, then information is retrieved from another resource as a result: finally that information is piped into an element on the webpage. Therefore, some content of the webpage changes to information from another resource. Yet, the surrounding page doesn’t change.

Ideally, the remote resource is encoded in xml format. XML is for organizing information, not displaying it; picking specific information from an xml document is convenient.

I’ve read about what asynchronous means; it’s not a very dramatic part of the AJAX definition. Apparently it just means that the retrieved information appears “whenever it arrives” rather than as a timed event. The return time can be variable, depending on how busy the server/s is/are.

Here is AJAX in action: the price of oil read from the US Energy Information Administration.

On click, price will appear here:)

AJAX is a big topic. I’ll be discussing aspects of it in future posts:)

Source:

Ballard, Phil and Michael Moncur. Ajax, Javascript and PHP. Indianapolis: SAMS, 2009.

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