Javascript Latest Topics

TypeScript vs. JavaScript - which one is better for the 2023 web applications?

Thu, 03 Aug 2023 05:06:15 +0000

Hi guyz,

TypeScript vs. JavaScript - which one is better for the 2023 web applications?

How headless commerce revolutionized the world of mobile app development?

Mon, 31 Jul 2023 06:07:54 +0000

Hi guys,

How headless commerce revolutionized the world of mobile app development?

Looking for beginner JS project ideas

Wed, 23 Nov 2022 18:43:14 +0000

I finished the Studioweb JS course and completed the JS certification. What are some beginner friendly projects that I should try to brush up on what I've learned and also build my skills?

Thanks!

Change an image on clicking on a text word

Wed, 01 Feb 2023 20:43:00 +0000

Hoping someone can help me with this.

The basis is a single webpage that has a fair amount of text on it but also has a feature thus:
One line of three words: Cardiff | Manchester | Both

Below is an image: Initially when the page loads it will have the cardiff.gif

Then when Manchester is clicked the cardiff disappears and the manchester.gif appears in the same place. Same for when the Both word is clicked.

I just need something simple/

I sourced this from the net

html>
    

         id ="imageOne" src ="circleRed.png" onclick = "changeColor()"/>

This is for clicking an image. to change things.

I tried to edit for my needs but It just isn't working. I don't have a lot of experience with javascript or css.

All help is gratefully received.

Thanks in advance,

How do you fill arrays in Java?

Wed, 26 Oct 2022 04:43:14 +0000

// One of these things is not like the others. 
// One of these things just doesn't belong. 
String[] items = new String[] { 
   "Apple", 
   "Orange", 
   "Spider", 
   "Banana", 
}; 
// Note that you CAN use a comma after the last item! 
// This is a convenience if you need to re-order the items.

How to use jQuery on multiple elements at once?

Tue, 25 Oct 2022 04:33:48 +0000

<script> 
 $( "div, span, p.myClass" ).css( "border", "3px solid red" ); 
script>

What is the most efficient way to create a multidimensional integer array in C++ or Java?

Fri, 21 Oct 2022 04:41:33 +0000

#include  
#include  
#include  
  
int main() 
{ 
  std::vector v = {1,2,3,4,5,6,7,8,9,10,11,12}; 
  
  // View data as contiguous memory representing 2 rows of 6 ints each 
  auto ms2 = std::mdspan(v.data(), 2, 6); 
  // View the same data as a 3D array 2 x 3 x 2 
  auto ms3 = std::mdspan(v.data(), 2, 3, 2); 
  
  // write data using 2D view 
  for(size_t i=0; i != ms2.extent(0); i++) 
    for(size_t j=0; j != ms2.extent(1); j++) 
      ms2[i, j] = i*1000 + j; 
  
  // read back using 3D view 
  for(size_t i=0; i != ms3.extent(0); i++) 
  { 
    std::println("slice @ i = {}", i); 
    for(size_t j=0; j != ms3.extent(1); j++) 
    { 
      for(size_t k=0; k != ms3.extent(2); k++) 
        std::print("{} ",  ms3[i, j, k]); 
      std::println(""); 
    } 
  } 
}

How to map an array of objects in JavaScript?

Wed, 19 Oct 2022 04:37:51 +0000

Code sample using the reduce function:

const myArrayOfObjects = [ 
    { myKey: 1, data: 'some data' }, 
    { myKey: 2, data: 'some data' }, 
    { myKey: 3, data: 'some data' }, 
    { myKey: 4, data: 'some data' }, 
    { myKey: 5, data: 'some data' }, 
    { myKey: 6, data: 'some data' }, 
    { myKey: 7, data: 'some data' }, 
]; 
 
const myMap = myArrayOfObjects.reduce( 
    (accumulator, currentObject) => ({ 
        ...accumulator, 
        [currentObject.myKey]: currentObject, 
    }), 
    {} 
); 
 
console.log(myMap); 
 
// output: 
// { 
//     '1': { myKey: 1, data: 'some data' }, 
//     '2': { myKey: 2, data: 'some data' }, 
//     '3': { myKey: 3, data: 'some data' }, 
//     '4': { myKey: 4, data: 'some data' }, 
//     '5': { myKey: 5, data: 'some data' }, 
//     '6': { myKey: 6, data: 'some data' }, 
//     '7': { myKey: 7, data: 'some data' } 
//   }

Repeated keys will be overwritten, so take into account that if you have repeated keys only the last one will remain.

As a Java programmer, when do you use nested interfaces?

Tue, 11 Oct 2022 04:53:26 +0000

I have never used nested interfaces. The only case I can see where this is sensible is the multi-layered Sealed Interface pattern, e.g.

interface Event { 
    // definitions 
     
    interface Foo extends Event { 
        // Foo-specific event definitions 
    } 
 
    interface Bar extends Event { 
        // Bar-specific event definitions 
    } 
}

How do you add options to a select box in JavaScript?

Mon, 10 Oct 2022 05:07:39 +0000

Add options to a select box in JavaScript:

1) Using the Option constructor and add() method:

First, use the Option constructor to create a new option with the specified option text and value:

let newOption = new Option('Option Text','Option Value'); 
Then, call the add() method of the HTMLSelectElement element:

const select = document.querySelector('select');  
select.add(newOption,undefined); 
2) Using the DOM methods

First, construct a new option using DOM methods:

// create option using DOM 
const newOption = document.createElement('option'); 
const optionText = document.createTextNode('Option Text'); 
// set option text 
newOption.appendChild(optionText); 
// and option value 
newOption.setAttribute('value','Option Value'); 
Second, add the new option to the select element using the appendChild() method:

const select = document.querySelector('select');  
select.appendChild(newOption);

What is the best way to check if a string is valid JSON or not using JavaScript?

Wed, 05 Oct 2022 05:05:27 +0000

Try to parse it and catch any failure. There isn’t a more fool-proof way to check if JSON is valid than that. Something like this would work:

function isValidJSON(s) { 
        try { 
                JSON.parse(s); 
                return true; 
        } 
        catch (e) { 
        } 
        return false; 
} 
 
// Run a few test cases: 
console.log(`isValidJSON("4") = ${isValidJSON("4")}`); // prints true 
console.log(`isValidJSON("[4") = ${isValidJSON("[4")}`); // prints false 
console.log(`isValidJSON("[4]") = ${isValidJSON("[4]")}`); // prints true

What is the difference between “return” and “return value” in JavaScript?

Tue, 04 Oct 2022 04:32:37 +0000

Both do exactly the same if and only if value===undefined. The following example demonstrates the differences.

function f1() { 
} // no return statement returns undefined. 
 
function f2() { 
        return; 
} // returns undefined too.  The undefined is implicit here. 
 
function f3() { 
        return undefined; 
} // explicitly returns undefined 
 
function f4() { 
        return 1; 
} // returns 1.   
 
console.log('f1() === ' + f1()); // prints: f1() === undefined 
console.log('f2() === ' + f2()); // prints: f2() === undefined 
console.log('f3() === ' + f3()); // prints: f3() === undefined 
console.log('f4() === ' + f4()); // prints: f4() === 1

What is the code to use an image as a button using JavaScript?

Mon, 03 Oct 2022 05:46:53 +0000

Here is the example code to use an image as a button using JavaScript:

<html> 
<head> 
<style> 
#mybutton{  
cursor: pointer; 
 }  
style> 
head> 
<body> 
<img src="button_image.png" id="mybutton" onclick="submit();"> 
<form id=”myForm” action=””> 
 
form> 
body> 
<script> 
function submit(){  
document.getElementById("myForm").submit(); 
 } 
script> 
html>

How to get the depth of a recursive array in JavaScript?

Fri, 30 Sep 2022 05:09:30 +0000

/* 
 * Return the depth of recursive array a. 
 * Any array has a depth of at least one. 
 * Non-arrays always have a depth of zero. 
 */ 
function arrayDepth(a) { 
    var depth = 0; 
    if (Array.isArray(a)) { 
        for (var i in a) { 
            depth = Math.max(depth, arrayDepth(a[i])); 
        } 
        depth++; 
    } 
    return depth; 
}

How do you design a website style with CSS or JavaScript?

Wed, 28 Sep 2022 05:33:31 +0000

 
 
 
</span><span class="pln">I AM A WEBSITE</span><span class="tag"> 
 
 
 
This is a Website 
 onclick="myFunction()">click me 
 id="result">This text was generated by javascript

What is the use of joining in JavaScript?

Wed, 28 Sep 2022 05:32:15 +0000

Joining takes an array and turns it into a string. Here is an example: const arr = ["first","second","third"] // add a value to add between values (it can also be a blank string) const str = arr.join(" - ") console.log(str) // "first - second - third"

How do I find a Java assignment answer with a source code?

Sat, 24 Sep 2022 07:44:42 +0000

Answer getAssigmentAnswer(Question question) {

AssigmentAnswererFactory assigmentAnswererFactory = AssigmentAnswererFactory.getInstance();

AssigmentAnswerer assigmentAnswerer = assigmentAnswererFactory .getInstance();

assigmentAnswerer .setProperty(AssigmentAnswerer .WITH_CODE,true);

return assigmentAnswerer.answer(question) ;

}

What is the difference between! == and! = in JavaScript?

Fri, 23 Sep 2022 04:48:43 +0000

When you use “=” you are assigning the value of something like for example a variable to something else.

For example.

let var1 = 'hello' 
 
var1 = 'world' 
 
console.log(var1) 
//outputs 'world', because we reassigned the value from 'hello' to 'world' 
Now == is used to check if two values are the same, but it does not check type, meaning that.

‘1’ is a string, because it’s wrapped in quotes.

1 is a number because it’s an integer and it is not wrapped in quotes.

if we do for example.

‘1’ == 1 
//output would be 'true' because the == operator is checking to see if '1' and 1, have the same value which is the number 1, it is not checking if '1' is a number, or if 1 is a string it's checking if '1' and 1 have the same value which is the number 1. 
To check for type we use the strict equality operator or ===

So in the previous example, == checks for value not for type, === checks for value AND type.

Which means that

‘1’ === 1

would return “false” because ‘1’ is not a number it’s a string, and 1 is a number not a string.

1 === 1 returns ‘true’

‘1’ === ‘1’ returns ‘true’

How do I access nested objects in JavaScript?

Fri, 23 Sep 2022 04:44:49 +0000

Access with index to position in JSON Array

var a = [{"ID":102254,"Name":"obj 1","service_name":["Open  Ticket","Escalation Ticket"]},{"ID":226619,"Name":"DIDE","service_name":["Open  Ticket","Escalation Ticket"]},{"ID":224522,"Name":"CAT","service_name":["Open  Ticket","Escalation Ticket"]},{"ID":122533,"Name":"Mirror","service_name":["Open  Ticket","Escalation Ticket"]}] 
 
 
console.log(JSON.stringify(a[3].service_name[0]))

How do you get an item from JSON in an array (JavaScript, development)?

Thu, 22 Sep 2022 05:14:33 +0000

Array[Position]; myJSON = '["Ford", "BMW", "Fiat"]'; myArray = JSON.Parse(myJSON); CarName =myArray[0];

How do you pass a long value in JSON Java?

Wed, 21 Sep 2022 05:31:56 +0000

You have to know the exact property name that is already typed as long e.g. 1L

        var url1 = UrlFetchApp.fetch('http://www.google.com/'); 
        JSONObject jsonObject = new JSONObject(urlFetch(url1)); 
//at this point we have ALL the json properties wrapped in a JSONObject called data1 
        long height = jsonObject.getLong("longValue"); //longValue has to be one of the properties in

How do you add to the beginning of string Java?

Tue, 20 Sep 2022 07:47:43 +0000

String prefix=”prefix”; String suffix=”suffix”; StringBuilder str = new StringBuilder(prefix); str.append(suffix); // print string System.out.println("String = " + str.toString());

Submit form on Dialog Save. Form contained inside an iframe. "Save" button is not triggering the form Submit

Thu, 18 Mar 2021 16:31:35 +0000

I am playing with a simple example where I have a 2 pages

Working code in Plunker

One page is a simple Form page. That uses jQuery submit() to fire up an alert ("yayyy for summitted") when the form is submitted.

Page two, places this form in an iframe and loads it into a jQuery Dialog that has a SAVE and CLOSE button

I want to be able to trigger the form Submit using the SAVE BUTTON in the Dialog.
Since the form is in a iframe, I have no idea how to successfully fire up that alert ("yayyy for summitted").

Been stuck on this for a couple of days. So some help would be nice, thanks...

Dialog Page




    </span><span class="pln">iframe in Dialog</span><span class="tag">
     rel="Stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
      type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js">    
     type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">    

     type="text/javascript">

        $(document).ready(function () {

            $('a#pop').on('click', function (e) {
                e.preventDefault();
                var pagetitle = $(this).attr("title")
                var page = $(this).attr("href")

                var iframe = $(' + page + '" width="100%" ' +
                    'height="100%">');

                var dialog1 = $('
').append(iframe).appendTo('body').dialog({
                        autoOpen: false,
                        modal: false,
                        height: 625,
                        width: 500,
                        title: pagetitle,

                        close: function (e, ui) {
                            alert('pressed');
                            $(this).remove();
                        },
                        buttons: {
                            "Save": function () {
                                alert('Dialog SAVE pressed but for has not yet been subbmitted');
                                var commentForm = '#commentForm';
                                var iFrameDOM = $("iframe#myiframe2").contents();

                                // NOT WORKING
                                iFrameDOM.contents().find('form').submit();
                            },
                            "Close": function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                dialog1.dialog('open');
            });
        });

    


	
     /> /> id="pop" href="http://localhost/test/formtest" title="Hello World!!!">click me for the Form

Form Page




     src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    
    



A very Simple Forrm
On Submit we use jQuery submit() Method and pop up an alert
 id="commentForm" name='commentForm' method="get"  action="/">
    Your Name:  type="text" name="name" value="Santa Clause">

    Your Age:  type="text" name="age" value="35">


     type="submit"  name="submit" id="mybutton"  value="Submit">

Continually Updating A HTML Element In Vanilla JavaScript

Sun, 06 Jun 2021 22:47:00 +0000

Doing some great work to finally understand how to insert data into a database using JavaScript AJAX and PHP

But the problem I'm having is this, when inserting say a post (a basic commenting system is what I am doing just for a kind of proof of concept sort of thing so I can understand whats going on as such) it inserts the post but needing to refresh the page to see the new comment/post/data

Is there any better way of say doing this like so when inserting it automatically appears in the feed, have this essentially right now:

function getComments() {
  
  var comments = document.getElementById('comments');
  
  xmlHTTP.open('GET', 'server.php?getcomments');
  
  xmlHTTP.onreadystatechange = function() {
    if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
      comments.innerHTML = xmlHTTP.responseText;
    }
  }
  xmlHTTP.send(null);
}

function postComment() {

  var user = document.getElementById("user").value;
  var comment = document.getElementById("comment").value;
  var data;
  
  if(user.length == 0) {
    document.getElementById('server-response').innerHTML = 'User field can not be empty';
    return;
  }
  
  if(comment.length == 0) {
    document.getElementById('server-response').innerHTML = 'Comment field can not be empty';
    return;
  }
  
  // xmlHTTP.open('GET', serverScript);
  xmlHTTP.open('POST', 'server.php?postcomment');
  xmlHTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  xmlHTTP.onreadystatechange = function() {
    if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
      // document.getElementById('server-response').innerHTML = xmlHTTP.responseText;
      var response = xmlHTTP.responseText;
      if(response == 'Comment added successfully') {
        getComments();
        document.getElementById("user").value = '';
        document.getElementById("comment").value = '';
      }
    }
  }
  
  data = 'user=' + user + '&' + 'comment=' + comment;
  xmlHTTP.send(data);
}

function deleteComment(id) {
  // alert('Delete post with id' + id);
  var postID = id;
  
  if(Number.isInteger(postID)) {
    xmlHTTP.open('GET', 'server.php?deletecomment=' + postID);
    
    xmlHTTP.onreadystatechange = function() {
      if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
        var response = xmlHTTP.responseText;
        if(response == 'Comment was deleted') {
          getComments();
        }
      }
    }
  } else {
    // if not a valid value to be sent to server!
  }
  xmlHTTP.send(null);
}

  
    User  type="text" id="user" name="user">
    

    Enter a comment
    

     cols="40" rows="10" id="comment">
    

     type="submit" id="post-comment" name="post-comment" onClick="postComment();">Post Comment
    

     id="server-response">
  
   id="comments">
    Comments

Essentially all the responseText is the results of all data from the database in a nutshell nothing complicated, a kind of guestbook of sorts, tried putting it in a while loop thats infinite but that keeps crippling the tab in the browser or nothing appears

Like I was thinking of doing it so that yeah just updates once until a post is made to the database, but then thought would it be possible to make it sort of live updating

Any helps much appreciated
Jeremy.

Passing data to database after jQuery form validation

Sat, 30 Apr 2022 19:47:22 +0000

Hello everyone I wanted you all to look at this jQuery code to see how can I pass the data to the php file after the validation.

form.js