This page is currently under development.

Help Us Grow the JavaScript Section!

Yes po, I know this is a very ambitious project and involves a lot of work. Alam ko rin po na hindi ko kaya gawin ito mag-isa. Kaya naisip ko, mas magiging masaya at meaningful ito kung magiging bahagi kayo ng development na ito by submitting your own content in PDF format.

What's in it for you? Credit!
Yes po, I'm planning to include your name as credit in the title itself, just like what you'll see in the image below.

And hindi lang po basta simple credits lang, clickable link po ito!
You can include a clean link like your social media account if you want followers, or leave it blank if you prefer.

Your credits will remain as long as walang ibang submission na mas mahusay ang explanation. So just because a topic already has content doesn't mean you can't submit anymore. You're always welcome to try and submit your own version. With that said, we're now accepting your best works, send them in now!

Submission Guidelines

1. Content Requirements

• Write tutorials in Filipino (Tagalog)
• You can choose a topic from the scroll spy on the left side
• Focus on one JavaScript topic per submission
• Include practical code examples with proper syntax
• Provide step-by-step explanations
• Show expected outputs (console or visual)

Code Example Format

// Kalkulahin ang area ng isang bilog gamit ang radius
function computeArea(radius) {
    return Math.PI * radius ** 2;
}

// Kunin ang input mula sa user gamit ang prompt
const radius = parseFloat(prompt("Ilagay ang radius: "));

// Kalkulahin at i-display ang resulta
const area = computeArea(radius);
console.log(`Ang area ng bilog na may radius ${radius} ay ${area.toFixed(2)} square units.`);

2. Recommended JavaScript Topics

• Recommended: Blank topics like this have more higher chances of getting selected.
• JavaScript Arrays
• JavaScript Promises
• DOM Manipulation
• Async/Await
• Event Handling
• Functional Programming

How to Submit

1. Create a PDF of your JavaScript tutorial following our guidelines
2. Join our Facebook group
3. Upload/Post your PDF with topic name and brief description on our FB Group
4. Wait for feedback from our team

Example

Check our JavaScript | DOM Basics as a model for your submission.

Thank you for your interest in contributing educational JavaScript content to our platform! To maintain consistency and quality across all tutorials, please follow these detailed guidelines when preparing your submission.

Basic Page Structure

1. Tutorial Title

Always use this format: "JavaScript Tutorials: [Your Topic]"

Example: "JavaScript Tutorials: Promises"

2. Main Topic Header

Format your main heading as: JavaScript [Your Topic]

Example: JavaScript Promises

3. Introduction Paragraph

Provide a clear explanation of the concept with key terms in bold.

Example: "Ang Promises sa JavaScript ay isang object na kumakatawan sa eventual completion o failure ng isang asynchronous operation. Ginagamit ito para sa handling asynchronous tasks nang mas maayos kaysa sa tradisyunal na callbacks..."

Required Content Sections

1. Importance of the Topic

2. How the Concept Works

3. Code Example

// Halimbawa ng Promise para sa pagkuha ng data
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { id: 1, name: "Juan" };
            if (data) {
                resolve(data); // Matagumpay na nakakuha ng data
            } else {
                reject("Error: Walang data na nakuha"); // Nabigong makakuha ng data
            }
        }, 2000);
    });
}

// Gamitin ang Promise
fetchData()
    .then(data => {
        console.log("Data na nakuha:", data);
    })
    .catch(error => {
        console.error(error);
    });

4. Code Explanation

5. Practical Application (Optional)

// Halimbawa ng paggamit ng Fetch API na may Promise
fetch("https://jsonplaceholder.typicode.com/users/1")
    .then(response => response.json())
    .then(user => {
        console.log("User data:", user.name);
    })
    .catch(error => {
        console.error("Error sa pagkuha ng user:", error);
    });

6. Expected Output

Data na nakuha: { id: 1, name: "Juan" }
User data: Leanne Graham

7. Success Message

Formatting Requirements

1. Text Formatting

• Use bold text for all important concepts and terms
• Use backticks for all code elements, function names, variables, and technical terms
• Place all section headers in bold
• Use consistent spacing between sections (one blank line minimum)

2. Code Blocks

• Every code example must be properly indented (2 or 4 spaces)
• All code must be runnable and error-free
• Add helpful comments in Tagalog to explain complex parts
• Follow Airbnb or StandardJS style guidelines for JavaScript
• Use consistent naming conventions (camelCase for variables and functions)

3. Visual Elements

• Use tables for comparing related concepts (e.g., `var` vs `let` vs `const`)
• Use ordered lists for sequential steps or processes
• Use unordered lists for non-sequential items or options
• Use checkmarks (✔) to highlight positive points or key features

4. Language Guidelines

• Write primary content in Tagalog for better local understanding
• Keep all technical terms in English and format them with backticks
• Use a friendly, encouraging tone throughout the tutorial
• Address the reader directly with second-person perspective (e.g., "mong", "mo")
• Explain complex concepts with simple, clear language

Code Example Guidelines

Example of Well-Formatted JavaScript Code:

/**
 * Class para sa pagkalkula ng properties ng iba't ibang shapes
 */
class ShapeCalculator {
    #name;
    #calculationsCount;

    /**
     * Initialize ang calculator na may pangalan
     * @param {string} name - Ang pangalan ng calculator instance
     */
    constructor(name = "DefaultCalculator") {
        this.#name = name;
        this.#calculationsCount = 0;
    }

    /**
     * Kalkulahin ang area ng rectangle
     * @param {number} length - Ang haba ng rectangle
     * @param {number} width - Ang lapad ng rectangle
     * @returns {number} Ang area ng rectangle
     */
    calculateRectangleArea(length, width) {
        this.#calculationsCount++;
        return length * width;
    }

    /**
     * Kalkulahin ang area ng bilog
     * @param {number} radius - Ang radius ng bilog
     * @returns {number} Ang area ng bilog
     */
    calculateCircleArea(radius) {
        this.#calculationsCount++;
        return Math.PI * radius ** 2;
    }

    /**
     * Kunin ang kabuuang bilang ng calculations
     * @returns {number} Kabuuang calculations
     */
    getCalculationsCount() {
        return this.#calculationsCount;
    }
}

// Gamitin ang ShapeCalculator
const calculator = new ShapeCalculator("MyCalculator");

// Kalkulahin ang mga area
const rectangleArea = calculator.calculateRectangleArea(5.0, 4.0);
const circleArea = calculator.calculateCircleArea(3.0);

// I-print ang mga resulta
console.log(`Rectangle Area: ${rectangleArea}`);
console.log(`Circle Area: ${circleArea.toFixed(2)}`);
console.log(`Total calculations: ${calculator.getCalculationsCount()}`);

Important JavaScript Code Formatting Rules:

• Use ES6+ features where appropriate (e.g., `const`, `let`, arrow functions)
• Add JSDoc comments for classes, methods, and functions
• Use type annotations in comments for clarity
• Include meaningful white space for readability
• Add descriptive Tagalog comments for key operations
• Use proper line breaks and indentation (2 or 4 spaces)
• Break long lines for better readability (120 characters maximum per Airbnb guidelines)
• Maintain consistent naming conventions (camelCase for variables/functions)
• Include runnable examples that work in browsers or Node.js

JavaScript-Specific Guidelines

1. Program Structure

• Use ES modules or CommonJS for modular code where applicable
• Organize code logically with proper function/class declarations
• Use modern JavaScript features (e.g., `async/await`, destructuring)
• Include comments for each function's purpose

2. Environment Compatibility

• Specify the environment (browser or Node.js) for your code
• When using browser-specific APIs (e.g., `document`), include HTML context
• Avoid deprecated methods (e.g., `var` for declarations)
• Test code in modern environments (Chrome, Node.js 18+)

3. Common JavaScript Library Examples

• For DOM manipulation, use standard `document` methods
• For HTTP requests, use `fetch` API by default
• For array operations, demonstrate modern methods (e.g., `map`, `filter`)
• For frameworks (e.g., React), provide basic component examples

How to Submit Your Tutorial

1. Prepare your content following all format guidelines above
2. Test all code examples to ensure they run correctly
3. Format in HTML using the same structure as our existing tutorials
4. Submit via email to doji.adds@gmail.com with subject line "JavaScript Tutorial Submission: [Your Topic]"
5. Or Submit via posting your version on our Facebook group: https://www.facebook.com/groups/cspinas

All submissions will be reviewed for technical accuracy, quality of explanation, and adherence to these formatting guidelines before publication. We may request revisions to ensure consistency with our platform standards.

By submitting content, you agree to allow dojicreates to publish and modify your work as needed while maintaining attribution to you as the original author.