musicman

No. no error, console just tell the result that it is false and you're right, this method is not efficient.

But I found another way and it works well.

I create a regexp obj like this:

var regex = /\bab\b|\babc\b|\babcd\b/gi;

regex has more than 20k items, this replacing the dictionary array on the above code.

And then, to match the obj.txt with dictionary items, I'm looping a conditional function like this:

if ( arr.txt.match( regex ) ){

arr.isRoot = true;

} else {

arr.isRoot = false;

}

console.log( arr[1].isRoot ); // finally true

It works now. Maybe the problem was something to do with the recursion on previous code but I'm not sure.

Thanks @justsomeguy!

Thanks @justsomeguy and Happy New Year!

now I've found a little bit strange fact that the code above is actually works!

However, in my original javascript file, the 'dictionary' has more than 20k items.

It won't work if the item of the 'dictionary' is more than 20 items.. ???

how is that happen? is it the browser or my pc spec maybe?

/* Merry Christmas everyone! */

I have an array of objects:

arr = [ obj1, obj2 ];

Each object has prototypes:

obj1.txt = "az";
obj2.txt = "abc";
obj1.isRoot = false;
obj2.isRoot = false;

And there's an array called dictionary, it formed like this:

var dictionary = 
[
    ["a","(n)"],
    ["ab","(n)"],
    ["abc","(n)"],
    ["abcd","(n)"]
]

What I try to achieve is when obj.txt is similar to dictionary[x][0], then obj.isRoot turn to TRUE.
I've made the function below so far but it doesn't work.

function go(){
   
   for ( i=0; i<arr.length; i++ ){
       
        txt_source = arr[i].txt.replace( /\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\_|\-|\+|\=|\{|\}|\[|\]|\:|\;|\"|\'|<|\>|\,|\.|\?|\/|\\|(0-9)/g, "" );
        
        ori = txt_source.toLowerCase();
        
        regex = new RegExp( '\\b' + ori, 'gi');
       
        for ( m=0; m<dictionary.length; m++ ){
           
            if ( dictionary[m][0].match(regex) ){
               
                arr[i].isRoot = true; // I want this happen for obj2.txt = "abc".
           
            } else {
               
                arr[i].isRoot = false;
               
            }
           
        }
       
    }
   
    console.log( ahoc_arr[x].isRoot ); // all objects always FALSE
   
}

Please help!

Thanks!

Specify the decimal number using toFixed():

var dec= 9.999 * 9.999;

var specdec = dec.toFixed(6)
console.log( specdec ); //99.980001

but the value will be a string.

Oh I see. It said that :

D is the vertical midpoint between the maximum and minimum of a sinusoidal function.

so balls originY = D or can we have more descriptive sentence for this..

Thanks for pointing this.

Yes, I agree. It's just the same sine equation. The y1 is required on the canvas to have the center point of the ball, if y1 is not defined, the ball always start at (0,0) of the canvas.

You guys rocks! I'm going to need a lot of beer discussing this with a math teacher. lol

The period is a multiplier, so the higher the multiplier the faster the animation goes. Period looks like it's actually the frequency in hertz, so the value of the period looks like the number of cycles per second.

I understand now! html canvas animation can interpret the frequency very nicely on screen.

Thanks, @justsomeguy!

Hi,

I added some workaround for sine and ellipse motion to CODY. I used another math equation of sinusoidal function:

y = A sin [b (x - C)] + D

In my case:

y = y1 + A sin [b (x - C)] + D

Please find the html here; once you're there, please click Snippets (the book icon) and choose "Animation Motion".

Both sine and ellipse motion looks great. But I still have question about relationship between Math and js/html canvas.

How the 'Period' value (x) affect the speed of the animation in the canvas?

also, do you have suggestion to improve the animation snippet, please drop some advice here.

Thanks!

Using Date is more accurate, since incrementing time by a fixed number relies on the time interval always being the same (which it is not, it varies by a few milliseconds)

I tested it, it made the motion awkward. I will play around with this and find more math! this is great.

Calling a function to convert radians on every frame is a waste of processing, do calculations before you begin the animation loop.

Once again, you're mixing the mathematical + with the concatenation +

I'll remember that, thanks!

how about the t, should we use Date() or we can use fixed number and increment?

Thank you for your time for this @Ingolme!

Awesome! thanks @Ingolme. This is great for animation understanding base.

How would you write the Angular Velocity and the "t", like this?

Math.radians = function(degrees) { return degrees * Math.PI / 180; };
A * Math.sin( Math.radians( av ) * t ) + k + "px";

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

You have a variable "start" that is not being created or modified anywhere.

My bad, it should be the "c" variable I found this on the web.

Hi,

I saw following function:

var banner = document.querySelector( '.stage div' ), 
a = 50,
b = 50,
c = 0;

function sine(){

    banner.style.top = a * Math.sin( start ) + b + 'px';
    banner.style.left = c + "px";

    c += 0.1;

}

window.setInterval( sine, 50 );

It is to make a sine motion in js; it works. Does anyone know the original equation of this in math that similar to:

y = a sin c + b, x = c ?

Thanks!

You can use Tooltip or set an input placeholder attribute like:

<input type="text" placeholder="this is place holder" /> 

That works very well! Thanks again. Now I shall create some designs.

Thank you @dsonesuk! I will try that method.

When we change the href attribute of the stylesheet with a click, will the style changed immediately or we should refresh/reload the page first?

Hi,

I'm thinking of some methods to use CSS file/s to give user options to change the web page style. For example, find the "Change Theme" link on the right-bottom corner of this forum page. Once user click an option, the web page style will changed to another CSS file.

Some ways came up in mind:

way 1:

// on the HTML head: <link id="theme" rel="stylesheet" href="style1.css">

function change_style(){
  theme.removeAttribute( "href" );
  theme.setAttribute( "href", option.value + ".css" );
}

way 2:

<!-- on the CSS file -->

.style1 {  }
.style2 {  }

/* on JS file */

button.onclick = function(){

// add or remove class to change elems style
$( elem ).addClass( "style1" );

}

What would you do to achieve this?

note: this to change almost all elements on the page. This could also be a new trend where website automatically change its appearance randomly whenever user refresh/load the web page.. (nah)

Thanks!

I decide to create a social site and want to income from my site

Careful, sometime it's hard to differ Social and Commercial term

Hi,

Update on Wepro. Wepro is CODY now!

- Style developed

- Instruction/Help added

Feedback are still welcome.

ps: the statistic grow up to 84 from 12 in my Google analytic. Thank you for visiting WePro....... oops, CODY

hmm, then this case is a bit weird.

on my app, WePro, I'm using an iframe to show snippets html files. When the snippet html files use <br>, I got error message and the html file won't show on the iframe. It says: "mismatched tag. Expected: </br>". (Mozilla)

Thanks guys!

hr tag seems doesn't require closing at all (?)

Hi,

why the html5 checker required <img /> instead of <img></img> while both works..?

Nu HTML Checker

I sent an email both to support@w3schools.com and forum@w3schools.com.

I hope I can get a reply.

WePro Beta version

Hi,

I've just updated WePro (my TryIt editor). I think the app is ready for a 'beta' version.

Idea

WePro was meant to be a learning tool. We can also use it for fast coding experiment.

Buttons

Run - Execute the code you typed on the input area (right-side).

Reset - Clear the output (left-side area) and set default html on the input area.

Template - Well, it was to help me creating snippets.

Clear - Clear the output and input area.

Snippets - Leads to snippets list that can be displayed and modified by user.

About - Information about the app.

Save - Open Save dialogue. You can save your code to .html, .js and .css file... as requested by Dominic on the other thread in this forum.

Any feedback are STILL welcome.

Thanks!

We can do that with Javascript.. have no idea with pure CSS.

Hi,

thanks for the kind words, Dominic!

1. yes, it's doable.

2. I agree, their position is awkward indeed. I will think something to change that.

3. You can see the timer snippets result on the browser console. I will change that as well.

thanks again!