devkuma – JavaScript

SyntaxHighlighter | SyntaxHighlighter Basics

kc@example.com (kc kim) — Tue, 10 Dec 2019 01:18:45 +0900

This section explains how to download and apply SyntaxHighlighter.

JavaScript Introduction | Overview

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

JavaScript

JavaScript is an object-based scripting language.
HTML is used to write web content, CSS is used to design the web, and JavaScript can be used to implement web behavior.

JavaScript is mainly used in web browsers, but with frameworks such as Node.js, it can also be used for server-side programming.
Most web browsers included on current computers, smartphones, and similar devices have a built-in JavaScript interpreter.

jQuery Introduction | Overview

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQuery improves JavaScript productivity and makes it easy to implement processing related to the Document Object Model (DOM) and events. Ajax applications and plugins can also be developed quickly by using jQuery.

Reference: http://api.jquery.com

Getting Started with D3.js

kc@example.com (kc kim) — Sun, 16 Apr 2023 11:31:00 +0900

Vue.js v3

kc@example.com (kc kim) — Sat, 01 Oct 2022 09:03:00 +0900

This section explains Vue 3.

Official documentation

On September 18, 2020, it was upgraded to version 3.0.

Basic D3.js Usage

kc@example.com (kc kim) — Sat, 06 May 2023 14:53:00 +0900

Vue.js v2

kc@example.com (kc kim) — Mon, 28 May 2018 22:41:57 +0900

This section explains Vue 2.

JavaScript

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

JavaScript is an object-oriented scripting language.

jQuery

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQuery is an open-source JavaScript library that simplifies the JavaScript language so it can be used more easily.

SyntaxHighlighter

kc@example.com (kc kim) — Tue, 10 Dec 2019 01:18:45 +0900

SyntaxHighlighter is a JavaScript library that automatically displays source code such as Java or PHP in an easy-to-read format when it is written on a site or blog. It highlights syntax prepared for each programming language and displays line numbers. This section explains how to use SyntaxHighlighter.

D3.js (Data-Driven Documents)

kc@example.com (kc kim) — Sun, 16 Apr 2023 11:31:00 +0900

D3.js Events

kc@example.com (kc kim) — Sun, 16 Apr 2023 11:31:00 +0900

D3.js Charts

kc@example.com (kc kim) — Sun, 16 Apr 2023 16:55:00 +0900

jQuery Introduction | Selecting Elements

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

With jQuery, you can easily select HTML elements and set specific actions on the selected elements.
jQuery provides most CSS selectors, as well as some non-standard selectors, for selecting elements.

SyntaxHighlighter | Customization

kc@example.com (kc kim) — Tue, 10 Dec 2019 01:18:45 +0900

SyntaxHighlighter provides various display settings. This section explains how to use them and how to change the display by adding custom CSS.

D3.js Hierarchy

kc@example.com (kc kim) — Wed, 24 May 2023 08:58:13 +0900

Node.js

kc@example.com (kc kim) — Wed, 01 Nov 2017 10:20:06 +0900

Server-side development with JavaScript too! By using cloud services such as Heroku, anyone can publish web applications for free. This section explains web development with Node.js and how to create web applications.

JavaScript Introduction | Types

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

D3.js forceSimulation

kc@example.com (kc kim) — Tue, 16 May 2023 02:29:00 +0900

React

kc@example.com (kc kim) — Sat, 16 Dec 2017 00:04:13 +0900

SyntaxHighlighter | Troubleshooting

kc@example.com (kc kim) — Tue, 10 Dec 2019 01:18:45 +0900

This section explains solutions to problems that occur while using SyntaxHighlighter.

jQuery Introduction | Manipulating Elements

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQuery provides several methods that make it easy to edit new elements or content.

Adding elements
Changing the inside of elements
Copying elements
Replacing elements
Removing elements

Angular

kc@example.com (kc kim) — Mon, 28 May 2018 22:41:57 +0900

This section explains Angular.

Vue.js

kc@example.com (kc kim) — Mon, 28 May 2018 22:41:57 +0900

This section explains Vue.

Version	Release date
3.0	September 18, 2020
2.0	September 30, 2016
1.0	October 27, 2015
0.6	December 8, 2013

JavaScript Introduction | Operators

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

Operators

JavaScript provides various operators for many kinds of operations.

jQuery Introduction | Traversing Elements

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

Tree Traversing

Tree traversing means the process of searching through the DOM tree from a specific element to the element you want to select by using relationships with other elements.

This tree traversal can be divided into the following three areas.

Traversing ancestor elements
Traversing descendant elements
Traversing sibling elements

JavaScript Introduction | Control Flow Statements

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

Control Flow Statements

Statements used when you need to control the sequential flow of a program are called control flow statements.
These control flow statements include conditional statements, loops, and similar constructs.

jQuery Introduction | Element Area

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

JavaScript Introduction | Arrays

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

Arrays

What is an array?

In JavaScript, an array is defined as an ordered set of values referenced by a name and an index. Each value that makes up an array is called an array element, and the number that indicates a position in the array is called an index.

Arrays in JavaScript have the following characteristics.

The type of array elements is not fixed, so elements in the same array can have different types.
Array element indexes do not need to be continuous, so specific array elements can be empty.
In JavaScript, arrays are handled as Array objects.

jQuery Introduction | Setting CSS Styles and Properties

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

With jQuery, you can easily get or set property values related to the CSS styles of selected HTML elements.

JavaScript Introduction | Functions

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

What Is a Function?

A function is an independent block designed to perform a specific task.
Such functions can be called whenever needed to repeat that task.

function addNum(x, y) {
    return x + y;
}
document.write(addNum(2, 3));

In JavaScript, a block refers to a part enclosed in braces ({}) in a function or statement.

JavaScript Functions

In JavaScript, a function is also a data type.

Therefore, a function can be assigned to a variable, or properties can be assigned to a function.
JavaScript functions can also be defined nested inside other functions.

Defining Functions

In JavaScript, a function definition starts with the function keyword and has the following components.

The function name
Function parameters separated by commas inside parentheses
JavaScript statements enclosed in braces ({})

The syntax for defining a function in JavaScript is as follows.

function functionName(parameter1, parameter2,...) {
    statements to execute when the function is called;
}

A function name is an identifier that distinguishes the function.
A parameter is a variable that allows a value passed as an argument when calling a function to be used inside the function.

// Define a function named addNum.
function addNum(x, y) {    // x and y are parameters of this function.
    document.write(x + y);
}
addNum(2, 3);              // Call addNum() by passing 2 and 3 as arguments.

In the example above, argument 2 is stored in parameter x, and argument 3 is stored in parameter y.
In this way, both the number and order of arguments and parameters are very important.

An argument of a function means a variable or constant that passes a value to the function when the function is called.

Return Statement

In JavaScript, a function can contain a return statement.
Through this return statement, the caller can receive the result executed by the function.

The return statement stops execution of the function and returns the value of the expression specified after the return keyword to the caller. A return statement can return a value of any type, including arrays and objects.

function multiNum(x, y) {
    return x * y;         // Return the result of multiplying x and y.
}
var num = multiNum(3, 4); // After multiNum() is called, its return value is stored in variable num.
document.write(num);

Calling Functions

A defined function is executed only when it is called within the program.
A normal function call can be made in the same form as the function definition statement.

Function definition

function addNum(x, y) {
    return x + y;
}

Function call

var sum = addNum(3, 5); // Call addNum() and pass 3 and 5 as arguments.
                        // After the function call finishes, assign its return value to variable sum.

In the example above, the numbers 3 and 5 passed as arguments are assigned to parameters x and y defined in the function.
Therefore, inside the called function, parameters x and y are assigned 3 and 5 respectively and then calculated.

Functions as Values

In JavaScript, a function is not only a syntactic construct but also a value.
Therefore, a function can be assigned to a variable or passed as an argument to another function.

The following example stores a function in a variable and uses it.

function sqr(x) {                // Define function sqr that calculates a square.
    return x * x;
}
var sqrNum = sqr;                // Assign function sqr to variable sqrNum.
document.write(sqr(4) + "<br>"); // Call function sqr.
document.write(sqrNum(4));       // Call variable sqrNum like a function.

jQuery Introduction | Event Handling

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

JavaScript Introduction | Objects

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

What Is an Object?

An object can be understood as a thing that we can recognize in real life.

Example of an Object

Object

cat kitty

Property

cat.name = “Nabi”
cat.family = “Korean Shorthair”
cat.age = 0.1
cat.weight = 300

Method

cat.mew()
cat.eat()
cat.sleep()
cat.play()

All cat objects have properties like the above, but the value of each property will differ for each instance.

JavaScript Objects

The basic data type in JavaScript is the object.

An object is an unordered set of properties made up of names and values. A function can also be used as the value of a property, and such a property is called a method.

var cat = "Nabi"; // Declaration of a normal variable
// An object is also a kind of variable that holds many values.
var kitty = { name: "Nabi", family: "Korean Shorthair", age: 1, weight: 1.1 };
cat          // Nabi
kitty.name   // Nabi

In JavaScript, everything except numbers, strings, booleans, and the undefined type is an object.
However, primitive types such as numbers, strings, and booleans are treated as objects with fixed values, so they also have object-like characteristics.

Referring to Object Properties

In JavaScript, object properties can be referenced as follows.

Syntax

objectName.propertyName
or
objectName["propertyName"]

var person = {
    name: "Hong Gil-dong", // Define the name property.
    birthday: "030219",   // Define the birthday property.
    pId: "1234567",       // Define the personal ID property.
    fullId: function() {  // Return a resident registration number by combining birthday and personal ID.
        return this.birthday + this.pId;
    }
};
person.name    // Hong Gil-dong
person["name"] // Hong Gil-dong

Referring to Object Methods

In JavaScript, object methods can be referenced as follows.

Syntax

objectName.methodName()

var person = {
    name: "Hong Gil-dong",
    birthday: "030219",
    pId: "1234567",
    fullId: function() {
        return this.birthday + this.pId;
    }
};
person.fullId() // 0302191234567
person.fullId;  // function () { return this.birthday + this.pId; }

If parentheses (()) are not added after the method name when referencing a method, the property itself is referenced instead of calling the method.
Therefore, when the property itself is referenced without using parentheses, the definition of that method itself is returned.

jQuery Introduction | Controlling Input Elements

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

JavaScript Introduction | Standard Objects

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

jQuery Introduction | Effect Features

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

Effect Features

jQuery provides various methods that make it easy to add effects to web pages.
These effects can be used immediately with the default settings, or the settings can be changed through the animate() method.

jQuery Introduction | Using Ajax

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

With jQuery, you can develop Ajax easily.

JavaScript Introduction | Document Object Model

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

jQuery Introduction | Utility Methods

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

JavaScript Introduction | Browser Object Model

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

What Is the Browser Object Model?

With JavaScript, you can access browser information or control various browser features.
The object model that can be used at this time is the Browser Object Model (BOM).

Unlike the Document Object Model (DOM), the Browser Object Model (BOM) is not a W3C standard object model.
However, this model provides a way for JavaScript to directly control and manage functional elements of the browser.
In JavaScript, objects in this BOM model can be used as global objects.

JavaScript Introduction | Events

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

What Is an Event?

An event means the occurrence of an incident related to an HTML element that the web browser reports.

JavaScript used on a web page can respond to events that occur in this way and perform specific actions.
Therefore, client-side JavaScript is called an asynchronous, event-driven programming model.

JavaScript Introduction | Exception Handling

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

Exception

An exception means a runtime error that occurs while a program is running.
It is important to prevent such exceptions in advance, but it is also very important to know how to handle exceptions when they occur.

An error means a syntactic error in a program statement.

JavaScript Introduction | Regular Expressions

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

What Is a Regular Expression?

A regular expression is a search pattern used to find a set of strings that follow a specific rule within a string. These search patterns can be used for all kinds of string search, replacement, and related tasks.