Eyad Syria-lover

This means that you expose only the functionality without any knowledge of how the actual implementation works.

To demonstrate this, let's have an Animal class which is an abstract class:

abstract class Animal {
	public abstract void makeSound();
  	public void sleep() {
    	System.out.println("Zzz");
    }
}

As you see, the Animal class contains one abstract method, the implementation of this method will soon be provided by the subclasses

Let's have a Bird class:

class Bird extends Animal {
    @Override
    public void makeSound() {
        System.out.println("Coo");
    }
}

Let's also have a Cat class:

class Cat extends Animal {
    @Override
    public void makeSound() {
        System.out.println("Meow");
    }
}

Now you can instantiate a subclass of Animal and call the makeSound() method without caring the actual implementation of the method in each subclass:

public class App {
    public static void main(String[] args) throws Exception {
        Animal animal;

        animal = new Bird();
        animal.makeSound(); //  Coo

        animal = new Cat();
        animal.makeSound(); //  Meow
    }
}

Do you notice how you call makeSound() without actually caring what kind of animal you have ?, that's what's meant by hiding certain details and showing only essential information to the user

Unfortunately, in w3schools they don't clarify it enough, this is usually explained even better using a Factory Class.

The idea behind factory class method is to hide the details of object instantiation by creating a mediate class that creates objects for you

Let's have a AnimalFactory class:

class AnimalFactory {
    public static Animal getAnimal(String animal) {
        if (animal == null) {
            return null;
        }
        else if (animal.equalsIgnoreCase("cat")) {
            return new Cat();
        }
        else if (animal.equalsIgnoreCase("bird")) {
            return new Bird();
        }
        return null;
    }
}

Modify the main program:

public class App {
    public static void main(String[] args) throws Exception {
        Animal animal;

        animal = AnimalFactory.getAnimal("bird");
        animal.makeSound(); //  Coo

        animal = AnimalFactory.getAnimal("cat");
        animal.makeSound(); //  Meow
    }
}

Do you notice the abstraction ?, you don't instantiate manually, the instantiation process is hidden from you.

I would like to say one last sentence:

It's always preferable to program to an interface (or maybe an abstract class) rather than an implementation, this means to always create a variable which has a type of the abstract class and assign it an instance of a subclass, just like in the examples above

Since you've added the new Python tutorial , are you planning to add a tutorial for Django framework?

Update The PHP Tutorial To Use PHP 7 And It's Features

Maybe You Can Add This Tutorial And Teach People How To Setup Babel In Order To Compile Down From ES6 To ES5?,Because W3schools Always Does A Great Tutorials,Better Than Any Another Web Development Tutorials Site...

I Think It Would Be An Excellent Decision If You Add A Tutorial About The Sixth Version Of JavaScript To W3schools...

I Can't Open This Page Here:

http://www.w3schools.com/jquery/event_proxy.asp

I'am Getting An HTTP Error 400...

How To Create A Quiz With Radio Buttons And Checkboxes? (Just Like Those Quizzes At W3schools.com)

How To Create The min,max,and mode Options Inside The Function?

I Want To Create A Function With An Options List Inside It's Parameters,I'am Talking About Something Similar To:

counter({

min:0,

max:200,

mode:"increment"

});

Hello.

Let's Say That I Have Two Sites,The First One Is http://site1.com , And The Second One Is: http://site2.com , The First Site index's File Got A <div> Element With id="one" , And The Second Site index's File Got A <div> Element With id="two" ,The Question Is:

How Can I Load div#one Contents Inside div#two ?

I Don't Want To Use Frames.

I've Read About jQuery load() Method On W3schools , But It Doesn't Seems To Give An Example About My Case.

Sorry For The Prolongation.

Hello.

I Was Reading A Stylesheet When I Found A Strange @import Rule,I've Never Faced This Rule.

What Is The Difference Between Including A Stylesheet Using @import Rule,And Doing The Same Using <link rel="stylesheet"/>?,And Do You Suggest Me To Use This Rule?.

Hello Mr.Shohan .

The Problem Is That JavaScript Is A Client-Side Scripting Language,And Can't Does Actions On The Server (ex. Create A File).

You Seems A Little Confused About Server-Side Scripting Languages,But The Bad News Is You Still Need To Learn A Server-Side Language In Order To Control Databases And Create Files On The Server (Or Whatever You Want).

My Suggestion To You Is To Learn PHP,Because PHP Is Easy To Learn And Powerful Server-Side Language.

I Need It For A Project...

So So I'am Thinking Of A Way To Detect CSS3 Browser Support Using Client-Side Scripting (JavaScript),I Know There's A Library Out There To Handle Such Situations,But I Need A Code Or A Hint To Do This Without Any External Libraries.

Any Suggestions Would Be Appreciated...

Okay Sir I'am Sorry If I Made It Look Like An Advertisment,And Honestly I Don't Know Icofont's Developer.

I've Found This Awesome Icons Stylesheet.

It's Name Is Icofont,It Has +2000 Icons,And I Thought It Would Be A Good Idea If You Could Add It To Your Icons Tutorial.

Here's Icofont Website Link: http://icofont.com

A List Of Available Icons Can Be Found Here:http://icofont.com/icons

Is It Safe To Use W3.CSS Together With Bootstrap Without Any Conflicts?

I Know That Parameters In The 2D Matrix Function Are:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()).

But What Does Those (n)'s Parameters Mean In The 3D Matrix Function?

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Hello People.

I'am Using Web Animations API To Create Animations On My Web Page,This API Has A Similar Syntax To This:

element.animate([

{css_property:value},

{css_property_2:value_2},

{css_property_3:value_3} //And So On..

],{

duration:value, //In Milliseconds

iterations:value, //An Integer

easing:value //linear,ease-in,ease-out,cubic-bezier,etc...

});

So I Was Wondering About How To Use These Keyframes In Such A Way That;

/* In CSS */

@keyframes test

{

0% {property_1:value_1}

20% {property_2:value_2}

100% {property_3:value_3}

}

/* If You Know What I Mean About Percentage */

How Can I Make Web Animations API Run The First Keyframe At 0% And The Second At 20% And The Third At 100%?

Thanks For Your Patience...

I've Been Studying XML On W3Schools,I've Arrived To The Section "XML Validator" On http://www.w3schools.com/xml/xml_validator.asp And Tried To Validate Some "Bad Formed" XML Document Like This:

And When I Clicked "Check XML" This Message Appeared:

Validation Isn't Working.

I Can't Understand The Purpose Of That Property,And What Is The Difference Between animation-fill-mode:none; And animation-fill-mode:forwards;?...

I don't think the W3Schools staff visits the forum. But this is the problem with calling something "deep-purple" as a class name. It means that when you want to change the color you have to change the HTML.

 

To work around this, you can change the class name of the element instead:

document.getElementsByClassName("w3-deep-purple")[0].className = "w3-orange";

That Seems Fair To Me,But The Problem Still About How To Manipulate The Color Using JavaScript If There Is No Class Name For That Color In W3.CSS,For Example There's No Class Name ".w3-deep-pink" (hex=#FF1493) For That Color...

In Your Opinion,Should I Contact Them To Fix This?

I've Been Analyzing W3.CSS When I Found A Strange Thing.

I Found That !important Rule Is Used More 90 Times In This Framework,The Problem Here Is That !important Is Paralyzing The Ability To Manipulate Some Of Those Elements Who Carries Some Of The w3-* Classes Using Javascript,For Example:

.w3-deep-purple,.w3-hover-deep-purple:hover
{
color:#fff !important;
background-color:#673ab7 !important;
}

As You Can See,I Can't Manipulate Any Element Which Carries The .w3-deep-purple Class Because The !important Rule Has Disabled Style Manipulation Using JavaScript,This Means That The Following Code Is Useless:

function changeFontColor()
{
document.getElementsByClassName("w3-deep-purple")[0].style.color="orange";
}

Although This Code Is 100% Valid,But This Just Won't Work Because Of !important.

I Suggest Removing This Rule From The Future Versions Of W3.CSS In Order To Give The Ability To The Developer To Add More Interactivity To His Projects.

w3schools.com Is Amazing Resource For Those Who Would Like To Learn Web Development,Adding A Node.js Tutorial To It Will Make The Site Better,Since W3schools Is Presenting The Web Development Ideas In A Simplified Way...

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>

        <script type="text/javascript">
            function color(id, duration, r_start, g_start, b_start, r_end, g_end, b_end)
            {
                var element = document.getElementById(id);
                var i = r_start, j = g_start, k = b_start;
                element.innerHTML = '<h1 style="font-size:4.1vw">wait....wait...</h1>';
                var parameter = setInterval(colorGradually, 50 * duration);
                function colorGradually()
                {

                    /// With original code! This if condition will never be true and never run clearInterval() , because the original variable values (*_start) never change anywhere  in your remaing code? but!  i, j, k do change
                    if (i === r_end && j === g_end && k === b_end)
                    {
                        clearInterval(parameter);
                        element.innerHTML = '<h1 style="font-size:4.1vw">The End</h1>';
                    }
                    else
                    {
                        // for (var i = r_start, j = g_start, k = b_start; i < r_end && j < g_end && k < b_end; i = i + 1, j = j + 1, k = k + 1)
                        // {
                        i = inc_dec_depending_start_and_end(r_start, r_end, i);


                        if (i === r_end) // comment OUT to change rgb value together
                        {
                            j = inc_dec_depending_start_and_end(g_start, g_end, j);
                        }// comment OUT to change rgb value together

                        if (j === g_end)// comment OUT to change rgb value together
                        {
                            k = inc_dec_depending_start_and_end(b_start, b_end, k);
                        }// comment OUT to change rgb value together

                        element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";
                        // }
                    }

                }
                function inc_dec_depending_start_and_end(start, end, value) {
                    if (start < end && value < end)
                    {

                        value += 1;
                    }
                    else if (start > end && value > end)
                    {
                        value -= 1;
                    }
                    else
                    {
                        value = end;
                    }
                    return value;
                }

            }
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div id="test" style="border: 1px solid red;width:100%;height:200px;background-color:rgb(125,255,0)"></div>
        <input type="button" onclick="color('test', 1, 125, 255, 0, 65, 0, 255)" value="Change">
    </body>
</html>

Thank You Very Much Sir...That Worked Just As Expected...