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=”descriptionattribute to describe more about it when the user mouses over. The alt=”text descriptionattribute 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.

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.

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.

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: 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.

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.

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 NASDAQ.

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.

Web programming: Python: finding server version

The tutor tells how to determine the version of Python the server is using.

I’ve found two ways to print out the version of Python used by the remote server:

import platform
print “Content-type: text/html\n\n”
print(platform.python_version())

or else

import sys
print “Content-type: text/html\n\n”
print(sys.version)

HTH:)

Source:

docs.python.org/2

docs.python.org/2

stackoverflow.com

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