musicman

Please visit WePro. Click the 'book' icon (snippets). A list of some titles will show up, click one of the titles.

I want to get permission to include w3schools TryIt editor codes as snippet or a template for users to begin experiment.

I will try to contact w3schools author for this. Meanwhile, you can join me to improve WebPro or contribute some snippets.

WebPro was designed to be a learning tool for beginner programmers.

Any advice?

Thanks!

UPDATE: New look, address and functions. The link was moved to: Here

--------------------------------------------------------------------------------------------

No help/doc pages yet..

Hi,

I had same issue. My solution was to use entities with the XML DTD like:

<!ENTITY trademark "™">

so we can use it in XML document like:

<brand>Coca Cola &trademark;</brand>

it's like create your own entity syntax.

I'm trying to discuss about samples code license at w3school.com.

Thanks! I got it now.

Hi,

what is w3schools email address?

office mail address, perhaps?

function playAudio(playThis) { 


var audio = new Audio(playThis);

audio.play();


}

playAudio( source );

var audio1 = new Audio( "sounds/ObamaOnVideo.mp3" );

var audio2 = new Audio( "sounds/oops.mp3" );

switch(this.idTag) {


case "truth01": 

    audio2.play(); 

    break ;

case "lies01": 

    audio1.play(); 

    break ;


}

the audio is still there. you can play the audio continuously by providing buttons: Play and Pause.

<button id="ply">Play</button>
<button id="stp">Stop</button>
    
<script>
    
    var mySound = new Audio( "Always.mp3" );
    
    document.getElementById( "ply" ).onclick = function(){
        
        mySound.play();
        
    };

    document.getElementById( "stp" ).onclick = function(){
        
        mySound.pause(); // pause the audio, it will play again from the last time where it stopped
        mySound.currentTime = 0; // reset the audio to the first time
        
    };    
    
</script>

anyway, what you're trying to achieve?

function playAudio(){ } belong to Javascript. Audio tag is HTML element.

to play audio from audio tag in HTML with Javascript, set an id for the HTML audio tag:

HTML

<audio id="myAudio">

  <source src="sounds/ObamaOnVideo.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.

</audio>

var myAudio = document.getElementById("myAudio"); 

function play_my_audio() { 
    myAudio.play(); 
}

play_my_audio();

Alright, I was lost! I've just found out that I had an account in w3schools forum as dustcomposer.

I posted WePro topic as dustcomposer, will continue as musicman

Hi,

the src attribute should be a string, url to the audio file.

and.. it looks like you put HTML code into a Javascript function?

wow! that simple. thanks Ingolme!

Hi,

I made a constructor function and wrap it like in IIFE (immediately invoke) style. I create addPerson as a command to call the function. All works fine. But when I use var to create addPerson, it returned undefined. What is the difference between using var and not?

(function (){

            function Person( firstname, age, place ) {
                var elem = this;
                this.firstname = firstname;
                this.age = age;
                this.greeting = { Hello: function(){ console.log( "Hello " + firstname ); }, 
                            YouAre: function(){ console.log( "You are " + age + " years old"); }
                          }
                this.greeting2 = {
                Hello: function(){ console.log( "2. Hello " + elem.firstname ); }, 
                YouAre: function(){ console.log( "You are " + elem.age + " years old" ); }
              }
                
            }

            addPerson = function(firstname, age){ 
                var ab = new Person(firstname, age); 
                return ab;
            };
            
            /*
            
            // If I use "var" to create a new variable,
            // the "addPerson" returned undefined when I call it.
            // Why this happened?
            
            var addPerson = function(firstname, age){ 
                var ab = new Person(firstname, age); 
                return ab;
            }; // Not working!
            
            */
            
        }());

Calling the Person function:

var Clara = addPerson( 'Clara', '20' );
var Jason = addPerson( 'Jason', '24' );

Clara.greeting.Hello();
Jason.greeting.Hello();

Thanks!

If I may ask another basic question, I read this article and I couldn't get Step #4.

I just couldn't get when it say:

When our _() function returns this , it is actually returning the entire window, or the global scope. Therefore, when we call _().toggle() , we are asking the browser to call the toggle() method which belongs to the window. Obviously this fails.

This problem can be solved by recursively creating another _ object using the new keyword.

 

why would we use this condition in a constructor like shown in the article (Step #4)..?

if (window === this) {
      return new _(id);
   }

Thanks!

When I check this constructor, this came from the function:

Person.prototype.greeting3 = {   Hello: function(){ console.log( this.constructor ); },   YouAre: function(){ console.log( this.constructor ); }}// function Object() { [native code] }// function Object() { [native code] }

Thanks @justsomeguy!

this return [object Object] in greeting3. I think this represents the key-value (?).

And one thing I have learned from this study is how to add methods into a constructor as object array.

It seems like we shouldn't use methods in object array to modify a constructor prototype.

oh you're right. So the best way to do this is to keep the methods inside its constructor.. are you agree?

function Person( firstname, age, place ) {
    var elem = this;
    this.firstname = firstname;
    this.age = age;
    this.greeting = { Hello: function(){ console.log( "Hello " + firstname ); }, 
                YouAre: function(){ console.log( "You are " + age + " years old"); }
              }
    this.greeting2 = {
    Hello: function(){ console.log( "Hello " + elem.firstname ); }, 
    YouAre: function(){ console.log( "You are " + elem.age + " years old" ); }
  }
}

var Clara = new Person( 'Clara', '20' );
var Jason = new Person( 'Jason', '25' );

Clara.greeting.Hello(); // Hello Clara
Clara.greeting.YouAre(); // You are 20 years old

Clara.greeting.Hello(); // Hello Clara
Clara.greeting.YouAre(); // You are 20 years old

Jason.greeting2.Hello(); // Hello Jason
Jason.greeting2.YouAre(); // You are 25 years old

Jason.greeting2.Hello(); // Hello Jason
Jason.greeting2.YouAre(); // You are 25 years old

Clara.greeting2.Hello(); // Hello Clara
Clara.greeting2.YouAre(); // You are 20 years old

Thank you, Ingolme! All works well now. Just an additional remark, have to make global var with the 'self' object, so we can use it in greeting3 as well.

var elem;

function Person( firstname, age, place ) {
    elem = this;
    this.firstname = firstname;
    this.age  = age;
    this.greeting = { Hello: function(){ console.log( "Hello " + firstname ); }, 
                YouAre: function(){ console.log( "You are " + age + " years old"); }
              }
    this.greeting2 = {
    Hello: function(){ console.log( "Hello " + elem.firstname ); }, 
    YouAre: function(){ console.log( "You are " + elem.age + " years old" ); }
  }
}

Person.prototype = { 
  greeting3: {
    Hello: function(){ console.log( "Hello " + elem.firstname ); }, 
    YouAre: function(){ console.log( "You are " + elem.age + " years old" ); }
  }
}

var Clara = new Person( 'Clara', '20' );

Clara.greeting.Hello(); // Hello Clara
Clara.greeting.YouAre(); // You are 20 years old

Clara.greeting2.Hello(); // Hello Clara
Clara.greeting2.YouAre(); // You are 20 years old

Clara.greeting3.Hello(); // Hello Clara
Clara.greeting3.YouAre(); // You are 20 years old

Thanks again!

Hi,

I'm studying a constructor function pattern. I have made this constructor:

function Person( firstname, age, place ) {
    this.firstname   = firstname;
    this.age  = age;
    this.greeting = { Hello: function(){ console.log( "Hello " + firstname ); }, 
                YouAre: function(){ console.log( "You are " + age + " years old"); }
              }
    this.greeting2 = {
    Hello: function(){ console.log( "Hello " + this.firstname ); }, 
    YouAre: function(){ console.log( "You are " + this.age ); }
  }
}

Person.prototype = { 
  greeting3: {
    Hello: function(){ console.log( "Hello " + this.firstname ); }, 
    YouAre: function(){ console.log( "You are " + this.age ); }
  }
}

var Clara = new Person( 'Clara', '20' );

Clara.greeting.Hello(); // Hello Clara
Clara.greeting.YouAre(); // You are 20 years old

Clara.greeting2.Hello(); // Hello undefined
Clara.greeting2.YouAre(); // You are undefined

Clara.greeting3.Hello(); // Hello undefined
Clara.greeting3.YouAre(); // You are undefined

On the greeting2.Hello and greeting2.YouAre methods, 'this' name and age result is undefined, the same with greeting3 method.

The question is: How do we get a property value through a method inside an object array?

and who is 'this' in greeting2 and greeting3 functions?

Thanks!

Hi,

yes @dsonesuk, I found similar cases on the Internet, some of them losing their js files after restore their system. HTML, CSS and PHP are fine, but javascript changed or gone.

 

That happens unfortunately and because of that and anything else, I usually make/keep back ups of everything on external hard drives. Yes that's hard drives with an 's' because you never know...

That's a great idea! I'm also thinking to save them on cloud.

A full week of work and now I don't even know where to start with my js code.

Hi,

This just happened to me. I needed to use Windows (7) Restore Point in safe mode. The system config back to a week ago setting. Unfortunately, my javascript files changed to the 'last week' version too. Now I have to start all over again some work.

So be careful when you use Windows Restore Point! They said Restore Point tool change script files too, looks like it's including javascript files.

Why you put the href attribute in a div anyway? should it linked to something?

EDIT

oops, you mentioned the reason.

Hi,

@dsonesuk said that the href value already defined with class attribute. But since we don't use href attribute in a div, and if the href value needed, I suggested to put the value in the element's data.

And you right, it supposed to be like $("div.aaa") my bad.

Anyone,,?

Hi,

The getPositionData is a function to store an element data of its dimension and offset.

A function has been added to #slider so when #slider value has changed, it will get a value and then set the rotation CSS with this value as angle. It will also get the rotated element new data with getPositionData() and display the data (top, left and slider value).

The last lines are to store first (original) element's data and display the data.

Personally I think the script is too complex (?) could be more simpler. Does it "calculate" the new position? when the element rotated, does it just display the new top value with elem.top?

the elem.top is to show element distance from the top limit of the page. and as for the 'position', the calculation should start with parametric equation to find element's corner (x,y) coordinate?