Jump to content

Raktim

Members
 View Profile  See their activity

  • Posts

    42

  • Joined

  • Last visited

 Content Type 

Posts posted by Raktim

    this value in object method creating with object literal vs ES6 class syntax

    in JavaScript

    Posted

    I'm asking about the 'this' binding in the arrow function of an object created by object literal syntax vs ES6 class syntax. 

    Case 1: Object literal 

    const obj = {
     method: ()=>{
       console.log(this)
   }
}
obj.method();

    Output 

    Window {window: Window, self: Window, document: document, name: "result", location: Location, …}

    Case 2: ES6 class syntax 

    class obj{
  method = ()=>{
      console.log(this);
  }
}
(new obj).method();

    Output 

    obj {method: ƒ}


    I know arrow functions do not bind their own this, instead, they inherit the one from the parent scope then Why the result is different on the above two cases. 

    Thanks in advance. 

    TypeScript type checking is really usefull?

    in JavaScript

    Posted

    Yes, sir. But, the question is browser can only understand JS. As a result of output TS generate executable JS code. But, my question is when TS type checking features got loss in JS code then is this features really useful? Because, at the end JS will finally execute on  browser and it is dynamic type checking. 

    TypeScript type checking is really usefull?

    in JavaScript

    Posted

    Okay, first I want to say you I'm very new in TypeScrpt. Now I have a question. TypeScript is a static type checking language. But, when TS code is transpile  to JS code this features got loss. Here is my code.

    demo.ts
      

    function add(x:number , y:number)
{
    return (x+y);
}
add(5,"Raktim");

    In the above TS code x and y only capable to accept number and it will perform addition.

    But, I callback this function and pass number and string intentionally to the function. So, TS compiler obviously give error as a result. But, now look the generated JS code.

    demo.js
      

    function add(x, y)
{
    return (x + y);
}
add(5,"Raktim");

    So, in the JS code x and y are capable to accept any value. So, here this code perform string concatenation not addition. 

    My question is when TypeScript type checking features got loss on JS then why we use it? 

    Then, what the actual benefit behind of TypeScript type checking? Is It really useful?

    JS error

    in JavaScript

    Posted

    This code gives an error that x[m] is undefined when it calls show(i) but it works fine if I call like show(0).

    What happens? I already declare x and m then why it gives an error?

    My code... 

    <html>
    <head>
        <style>
            .myslides{margin: 0px;}
        </style>
    </head>
    <body>
        <div class="myslides"></div>
        <div class="myslides"></div>
    </body>
       
    <script>
        
            var x = document.getElementsByClassName("myslides");
            var i = -1;
            function show(m)
            {
                x[m].style.display = "block";
            }
            function hide(n)
            {
                x[n].style.display = "none";
            }
                  
           while(i<x.length)
            {
                i = i+1;
                show(i);
                setTimeout(hide(i), 3000);
                if(i==x.length){i = -1;}
            }
            
    </script>
</html>

     

    Animated Modal Box

    in CSS

    Posted

    I create a modal box that when the user clicks on the button the modal will appear with animation.

    When the user clicks on the close button ( located on the right side of the header area ) or anywhere of the screen except modal box it will disappear without animation.

    I want that the modal will disappear/hide with animation. 

    I create two CSS animation. One is animatetop which I already used when modal will open and another is animatedown which I want to use when modal will disappear. But, I can't understand how to do that? 

    See the code on JSFiddle 

    <html>
<head>
    <style>
        .background{
            display:none;
            position: fixed;
            z-index: 1;
            height: 100%;
            left: 0;
            top: 0;
            width: 100%;
            padding: 100px;
            background-color: rgba(0,0,0,0.4);
        }
        .modal{
            background-color: white;
            position: relative;
            border: 1px solid #888;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
            animation-name: animatetop;
            animation-duration: 0.4s;
            width: 80%;
        }
        .header{
            width: 100%;
            padding: 8px 20px;
            background-color: crimson;
            color: white;    
        }
        .footer{
            width: 100%;
            padding: 8px 20px;
            background-color: lime;
            color: white;
        }
        .middle{
            width: 100%;
            padding: 2px 20px;
            background-color: white;
            color: black;
        }
        h2{
            margin: 0px;
        }

        @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
        }
        
        @keyframes animatedown {
        from {top:0; opacity:1}
        to {top:-300px; opacity:0}
        }
        
        span{
            float: right;
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            padding: 2px 5px;
        }
    </style>
</head>

<body>
    <button onclick="modal()">Open Modal</button>
    <div class="background" id="MyModal">
        <div class="modal" id="modal">
            <div class="header">
                <span onClick="a()">&times;</span>
                <h2>Header</h2>
            </div>
            <div class="middle">       
                <h1>Modal</h1><br>
                <h1>Popup Box</h1>
            </div>
            <div class="footer">
                <h2>Footer</h2>
            </div>
        </div>
    </div>
</body>
    
<script>
        background = document.getElementById("MyModal");
        function modal()
        {
            document.getElementById("MyModal").style.display = "block";
        }
       function a()
        {
            document.getElementById("MyModal").style.display = "none";
        
        }
       window.onclick = function (event)
       {
           if(event.target == background)
               {
                 document.getElementById("MyModal").style.display = "none";
               }
       }
</script>
</html>

     

    RegExp (Password Validation)

    in JavaScript

    Posted · Edited by Raktim

    I want to make that input take only 2 number at least one lowercase, one uppercase and at least 8 characters except number.

    I tried this pattern... 

    (?=(.*\d){2})(?=.*[A-z])(?=.*[a-z])[A-z!"#$%&'()*+,-.\/:;<=>?@[\]^_`{|}~]{8,}

    But it totally fails. Then what should be my correct pattern to do that?

    I want Like...

    Abc4k9h2L ->FALSE

    Abc4k9hL+ ->TRUE

    Abc4l@s$kl4 ->TRUE

    RegExp (Password Validation)

    in JavaScript

    Posted · Edited by Raktim

    13 hours ago, justsomeguy said:

    For your other pattern, I do get matches for those 2 strings.

     

    But, those 2 string does not full match.

    1 string only charecter 5 is matched and 2nd string only F8 are matched. But I want to do match the complete string. How to modify that?

     

    Tested string.JPG

    RegExp (Password Validation)

    in JavaScript

    Posted

    I also have another question 

    (?=(.*\d){2})(?=.*[A-Z])(?=.*[a-z])

    If I use this pattern then I think it takes a total of 4 characters ( 2 number + 1 lowercase + 1 uppercase letter ) to match.

    Tested Data:

    Ab45 ->Not Match

    a4F8-> Not Match

    What actually happens? What is the meaning of this pattern?

    RegExp (Password Validation)

    in JavaScript

    Posted · Edited by Raktim

    Okay.

    I already use the following pattern which takes At least two number, one lowercase letter one uppercase letter and at least 8 characters. 

    (?=(.*\d){2})(?=.*[A-z])(?=.*[a-z]).{8,}

    Means, 4 characters (2 number + 1 lowercase + 1 uppercase letter)  are must need and other characters can be anything .

    Now, I want that other charecter can be anyhthing except number. I replace * with [^0-9]. 

    (?=(.*\d){2})(?=.*[A-Z])(?=.*[a-z])[^0-9]{8,}

    But, it does't work. Why?

    RegExp (Password Validation)

    in JavaScript

    Posted · Edited by Raktim

    Sir, I want to make another regex that accepts any character at least 8 characters long except (0-9). How to write that?

    I try it like... 

    [A-z!"#$%&'()*+,-.\/:;<=>?@[\]^_`{|}~]{8,}

    Can I write this same regexp in another way?

    RegExp (Password Validation)

    in JavaScript

    Posted

    I try a RegExp for validation which Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters. 

    <input id="name" pattern="(?=.*\d)(?=.*[A-z])(?=.*[a-z]).{8,}">

    Now I want to modify it which input must contain two number instead of one number. I tried that like... 

    <input id="name" pattern="(?=.*\d{2})(?=.*[A-z])(?=.*[a-z]).{8,}">

    It works fine if I input two numeric digits Consecutive. Mean if I input 87aBcdfgf, then it is right. But 8aBcd7dfg input is wrong.

    Please, modify my RegExp. which can take input 8aBcd7dfg like that.

    JS Datatype of HTML input type="number"

    in JavaScript

    Posted

    I write an HTML code that takes input from the user which type="number". I also keep the user input value into a js variable. But when I check the data type of that variable it shows string...WHY? 

    <html>
    <head>
    </head>
    <body>
        <input type="number" id="mynumber" value="2"><br>
                
        <p id="demo"></p><br>
        
        <button type="button" onclick="foo()">click here</button>
        
        <script>
             
           function foo ()
            {
                
                var c = document.getElementById("mynumber").value;
                
                document.getElementById("demo").innerHTML = typeof c ;
            }
            
        </script>
  
    </body>
</html>

     

    Loop execution process (Python vs C)

    in Python

    Posted

    11 hours ago, justsomeguy said:

     

     

    No, you're not right.  There is no condition, and there is no increment.  It is looping through members of a set.  In this case, the set is the set of integers from 0 through 9.  Maybe it will help you understand if you look at it in array syntax instead of using the range function:

      

    
for i in [0,1,2,3,4,5,6,7,8,9]

     

    Looking at that, why would i ever be 10?  Look at another example:

      

    
for i in ["A", 3, 9, "Cat", 4, 100]

     

    Would you look at that, and say that after the loop i is going to be 101?  Because that doesn't make sense.  i is not going to be set to a value that is not in the set.  The only thing that range does is return an array of numbers within a range.  There is no condition in the loop, and there is no increment (other than changing an internal array pointer to point to the next element in the array).

    Okay sir , thanks for your helping hand

    Loop execution process (Python vs C)

    in Python

    Posted

    19 hours ago, justsomeguy said:

    Range just returns a list of numbers from min to (max - 1).  Or, 0 through 9.  So, i is each number from 0 through 9.  You're not telling it to keep adding 1 to i, you're just telling it to loop for each number from 0 through 9.

    Sir, Range() concept is somewhat difference than  For Loop in C? or Same?

    Loop execution process (Python vs C)

    in Python

    Posted · Edited by Raktim

    18 hours ago, justsomeguy said:

    Range just returns a list of numbers from min to (max - 1).  Or, 0 through 9.  So, i is each number from 0 through 9.  You're not telling it to keep adding 1 to i, you're just telling it to loop for each number from 0 through 9.

    okay, So, i make a little change to my python code... 

    for i in range (0,10):
   print(i)
print ("value of i after exit from loop",i)

    The loop will execute until the condition became FALSE. So, the loop will execute from 0 to (10-1) mean 0 to 9 and condition become FALSE when i become 10...(10<10-->False)...am i right? Let me to show that what i thinking...

    First it print,

    Loop Body (value of i)        Increment (i=i+1)        Condition (i<10)              Status (T/F)

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

                  0                                           1                                    1<10                              TRUE

                  1                                           2                                    2<10                              TRUE   

                  2                                           3                                    3<10                              TRUE  

                  3                                           4                                    4<10                              TRUE

                  4                                           5                                    5<10                               TRUE

                  5                                           6                                    6<10                               TRUE

                  6                                           7                                     7<10                               TRUE

                  7                                           8                                     8<10                               TRUE

                  8                                           9                                     9<10                               TRUE

                  9                                           10                                   10<10                             FALSE  

    So, the last value of i became 10 but when i print it show 9...Why? The process is also follows by C, am i right? But in the case of C it shows the result is 10...Why?   

     

    Loop execution process (Python vs C)

    in Python

    Posted

    Sir, I wrote the same code on Python and C. But the same code give two different result...my C code is... 

    for (i=0;i<10;i++)
  continue;
printf ("%d",i);

    and the my python code is... 

    for i in range (0,10):
    continue
print (i)

    The c code give 10 and python give 9 as result. So, what is loop execution process...what is the difference between loop execution process between Python and C?

×
×
  • Create New...