Tutorialspoint

JavaScript Convert a String into an Integer

<!DOCTYPE html>
<html>
   <body>
      <button onclick = "display()">Check</button>
      <p id = "demo"></p>
      
      <script>
         function display() {
            var val1 = parseInt("50") + "<br>";
            var val2 = parseInt("52.40") + "<br>";
            var val3 = parseInt(" 75 ") + "<br>";

            var res = val1 + val2 + val3;
            document.getElementById("demo").innerHTML = res;
         }
      </script>
   </body>
   
</html>

JavaScript Octal Number Character

<html>
   <head>
      <title>JavaScript Regular Expression</title>
   </head>
   
   <body>
      <script>
         var myStr = "Secure and Responsive!";
         var reg = /\123/g;
         var match = myStr.match(reg);

         document.write(match);
      </script>
   </body>
   
</html>

JavaScript Flexible Item, Relative to the Rest

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 1px solid #000000;
            width: 420px;
            height: 150px;
            display: flex;
         }
         #box div {
            height: 80px;
            width: 80px;
         }
      </style>
   </head>
   
   <body>
      <div id = "box">
      <div style = "background-color:orange;" ID ="myID1">DIV1</div>
      <div style = "background-color:blue;" id = "myID2">DIV2</div>
      <div style = "background-color:yellow;" id = "myID3">DIV3</div>
      </div>

      <button onclick = "display()">Set</button>

      <script>
         function display() {
            document.getElementById("myID1").style.order = "3";
            document.getElementById("myID2").style.order = "1";
            document.getElementById("myID3").style.order = "2";
         }
      </script>
   </body>
</html>

JavaScript Structs

<!DOCTYPE html>
<html>
   <body>
      <script>
         function displayStruct(str) {
            var str = str.split(' ');
            var count = str.length;

            function constructor() {
               for (var i = 0; i < count; i++) {
                  this[str[i]] = arguments[i];
               }
            }
            return constructor;
         }

         var Item = displayStruct("player country");

         var res = new Item('Sachin', 'India');
         alert("Country: "+res.country);
      </script>
   </body>
   
</html>

JavaScript userSelect property

<!DOCTYPE html>
<html>
   <body>
      <button onclick = "myFunction()">Click me</button>

      <div id = "box">
         Click the above button. This won't allow you to select this text. Shows ths usage of userSelect property.
      </div>

      <script>
         function myFunction() {
            var a = document.getElementById("box");
            a.style.userSelect = "none";

            // Works in Chrome and Safari
            a.style.WebkitUserSelect = "none";

            // Works in Firefox
            a.style.MozUserSelect = "none";
         }
      </script>
   </body>
   
</html>

JavaScript Set the padding

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px solid #FF0000;
            width: 150px;
            height: 70px;
         }
      </style>
   </head>
   
   <body>
      <div id = "box">This is demo text.</div>
      <br><br>
      <button type = "button" onclick = "display()">Add Padding</button>

      <script>
         function display() {
            document.getElementById("box").style.padding = "20px 30px 10px 50px";
         }
      </script>
   </body>
   
</html>

JavaScript ctrlKey Property

<!DOCTYPE html>
<html>
   <body>
      <input type = "text" onkeydown = "funcCtrlKey(event)">
      <div id = "res">Press any key</div>

      <script>
            function funcCtrlKey(event) {
            var val = document.getElementById("res");

            if (event.ctrlKey) {
               val.innerHTML = "CTRL key: Pressed";
            } else {
               val.innerHTML = "CTRL key: NOT Pressed";
            }
         }
      </script>
   </body>
   
</html>

JavaScript ondragstart

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         .drag {
            float: left;
            width: 100px;
            height: 35px;
            border: 2px dashed #876587;
            margin: 15px;
            padding: 10px;
         }
      </style>
   </head>
   
   <body>
      <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)">
         <p ondragstart = "dragStart(event)" ondragend = "dragEnd(event)" draggable = "true" id = "dragtarget">Drag!</p>
      </div>

      <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)"></div>

      <div id = "box"></div>
      <p>Drag the left box to the right or drag the right box to the left.</p>
      <script>
         function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
         }
         function dropNow(event) {
            event.preventDefault();
         }
         function dragEnd(event) {
            document.getElementById("box").innerHTML = "Dragging ends!";
         }
         function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("box").innerHTML = "The element dropped successfully!";
         }
      </script>
   </body>
   
</html>

JavaScript Object Definitions

<html>
   <head>
      <title>JavaScript Array Object</title>
      <script>
         function book(title, author) {
            this.title = title;
            this.author = author;
         }
      </script>
   </head>
   
   <body>
      <script>
         var myBook = new book("Java", "John");
         book.prototype.price = null;
         myBook.price = 300;

         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>
   </body>
   
</html>

JavaScript array filter()

<html>
   <head>
      <title>JavaScript Array filter Method</title>
   </head>
   
   <body>
      <script>
         if (!Array.prototype.filter) {
            Array.prototype.filter = function(fun /*, thisp*/) {
               var len = this.length;

               if (typeof fun != "function")
               throw new TypeError();

               var res = new Array();
               var thisp = arguments[1];

               for (var i = 0; i < len; i++) {
                  if (i in this) {
                  var val = this[i]; // in case fun mutates this
                  if (fun.call(thisp, val, i, this))
                  res.push(val);
                  }
               }
               return res;
            };
         }
         function isBigEnough(element, index, array) {
            return (element >= 10);
         }

         var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
         document.write("Filtered Value : " + filtered );
      </script>
   </body>
   
</html>

1 2 3 4 5 6 7 ... 53 Next
Advertisements
Loading...