_edited.png)
XML/XSL is a pair of languages used to store information. In XML, everything is stored in elements, with the format <element_name>element_value</element_name>. Most XML files have an <xml> unclosed-element (<element_name stuff>, only used for headers) which contains some file meta information as attributes. An attribute is a property in the format <element_name attribute_name=”attribute_value”>. Elements can have any name, value, and attributes. They can also have child elements within the element_value. The way these are used is defined by the user, sometimes in XSL. XSL is a styling language for XML, specializing in mapping information from XML to user interface. XSL also is defined in elements. This user interface is defined in another language, HTML/CSS.
HTML/CSS is a pair of two markdown-style languages used to define ui (the web graphics). It comes with many preset elements, such as <p> for text, <div> for blocks, and <body> to enclose other elements. In HTML, the document has a header similar to XML and is then enclosed by an <html> element. This element includes the <head> element for page metadata (such as the tab name and icon) and the <body> element which includes information on the page. Some elements, such as <p> and <h1> through <h6> are all the same element with different style presets. This brings us to CSS, the styling language for HTML. This language is written in sections formatted as thing_to_format{format_info}. The thing to format can be an element name <p> - p, an element id <p id=”15”> - #15, an element class <p class=”text”> - .text, or a group <p> <h1> - p,h1. Some example of format info are font-size - font-size:15;. CSS uses ; between style attributes and : between name and value. There a a variety of things CSS can also do, such as do something if screen is a certain size or animate thing using keyframes. This pair is the most widely used language for web pages. However, there is another language used for HTML/CSS a lot. Javascript.
Javascript
Javascript is a scripting language that has a lot of features to integrate with HTML/CSS. Javascript has a lot of built in functions to work with html, from sound to CSS manipulation to even working with the html <canvas> elements. Javascript uses variables, or “vars” - a name which gets a value assigned to it. These can either be defined as const var_name = var_value for variables which can not be changed or let/var var_name = var_value for changing variables. Note that the const rule does not apply to Arrays. Arrays are a group of variables. Javascript also uses statements, delimited at the end with ;. These are used for almost everything, from executing functions (discussed in a moment), to setting variable values (var_name = value). In javascript, a lot is defined in classes and functions. Classes are defined with format class class_name [extends parent_class_name] {class_info}. Classes normally contain many smaller functions. Sub-classes are not defined within a class, they are defined separately via extends parent_class_name. Functions are defined in format function function_name () {function_info}. The () can contain parameters, or “params” (variables to be used within the function) in format (param_name, param_name, …). Functions and their parameters are called using function_name(params). Functions are useful because they can be used many times, in a method more controlled than loops (discussed later). Javascript is also very gimmicky with syntax. For example, “if” statements, used to check if a parameter is true (if(condition){if_data}) can be simplified to if(condition)statement or param&&if_data if there is one statement, param&&(if_data) for many statements, or an if/else pair (if(condition){if_data}else{else_data}) can be shortened to (condition)?if_true:if_false. “if” statements themselves have their conditions evaluated based on true/false. So if(5==5) executes what is in if_data, whereas if(5==3) does not, and would instead execute what is in the else_data if there is any. The conditions can be complicated. To check if two values are equal, == is used. For greater/lesser/greater-equals, etc. you can use >=,<=,>,<. There are also logical operators for multiple conditions, such as && for “and” and || for “or”. There are many more operators, but these are the only majorly used ones. There are also loops. The types of loops are “for” and “while”. “for” loops are used as for(parameter){for_data}. These are used to execute things a number of times (i=i_start; i_condition; i++/i--), or for each in a set (temp_var_name in array_name). “while” loops are used similarly, as while(condition){while_data} which are like “if” statements but they do things multiple times. These are also used to do thing indefinitely, known as a while(true) loop. Javascript also has many built-in functions. Some of these include XHR and CanvasRenderingContext. XHR, short for the method XMLHttpRequest(), allows you to request files as data, rather than just some javascript files and such. These also make use of the onload() handler. A handler is something automatically called by the compiler when the handler condition is met. For onload(), it is called when the given file is completely transferred. XHR is similar to Image() and Audio(). These are exactly as they sound - files that can be given an image.src or audio.src property as a variable containing data, an http url, or a data url. This .src property applies to XHR in the exact same way. All these functions, XMLHttpRequest(), Image(), Audio(), are known as constructors. A constructor is a function within a class that is executed on class creation via new class_name(). These can easily be defined by the user as class class_name { constructor(params) {constructor_info} }. Constructors have one special property - they have a function called super(). This allows you to call the parent class’s constructor. constructor parameters are called using new class_name(params). These are easily passed to the super() function. CanvasRenderingContext is a set of functions that utilize html <canvas> to draw things to the screen. The canvas is selected using another set of functions, from the document class. (which will be discussed in a moment) context_var = canvas_var.getcontext(type_name) is then used to get context for it. The type can either be the common “2d”, the image rendering ”bitmaprenderer”, or the gpu-based “webgl”/”webgl2” or “webgpu”. These each have their own functions, executed as context_var.function_name. This only scratches the surface of Javascript’s built in functions, however. Follow-up expected.
Comments