[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

JavaScript

121K

Solutions

42K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

Share tech news, updates, or what's on your mind.

Sign up to Post

MVC applications have a rather unintuitive way to handle date and times within the default scaffolding views of MVC. This article shows the process of changing these to proper date and time pickers using Editor Templates and a rather nice extension library of JQuery UI written by Trent Richardson.
1
OWASP: Threats Fundamentals
LVL 12
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

A look at six new Cloud Class® courses: CompTIA Network+ (Exam N10-007), Build an E-Commerce Site with Angular 5, Bootstrap 4: Exploring New Features, JavaScript Best Practices, SQL 2014 Developer P1: T-SQL and .NET Code, and Exploring SQL Server 2016: Fundamentals.
1

Expert Comment

by:Jennifer Wagner
Comment Utility
Super excited to check out some of these web development courses, to help me edit my portfolio website.
1
Do you want to use Dependent or Cascading dropdowns in SharePoint but don't want to buy a 3rd party tool? This script will allow you to do that. Can be used for State\Capital, Building\Room, or any other dependent relationship. Some development\debugging experience is probably helpful.
0
AngularJS
AngularJS web development a very simple procedure. So, to put it, in short, AngularJS’ stand out features are – Two-way data binding, MVC structure, directives, templates, dependency injections and testing.
0

Expert Comment

by:Hanna Frenk
Comment Utility
Hi, advantages and disadvantages that you have mentioned are so true. Here i also want to add some advantages that you missed:
Angular analyses the page DOM and builds the bindings based on the Angular-specific element attributes.
Angular modifies the page DOM directly instead of adding inner HTML code.
Extended features such as dependency injection, routing, animations, view orchestration, and more
Supported by IntelliJ IDEA and Visual Studio .NET IDEs.
All-over i really appreciate your work. Thanks for sharing and keep going.
0

Expert Comment

by:Bhim Singh
Comment Utility
Agree by Hana

Angular analyses the page DOM and builds the bindings based on the Angular-specific element attributes.
Angular modifies the page DOM directly instead of adding inner HTML code.
Extended features such as dependency injection, routing, animations, view orchestration, and more
Supported by IntelliJ IDEA and Visual Studio .NET IDEs.
All-over I really appreciate your work. Thanks for sharing and keep going.

https://metadesignsolutions.com
0
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to many relationship happen, this project was born...
1
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
0

Originally, this post was published on Monitis Blog, you can check it here.



In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer technologies such as mobile and social media, customers are the ones who “shop with their voice” so to speak. The world of blog, forums, and numerous other social media channels over the past decade have provided consumers with unheard of power to determine their choice of products, brands, and services. Because of this power customer expectations have also gone through the roof. Continuing advances in technology, along with the “consumerization of IT,” has meant that companies are now expected to offer real-time, 24/7 service to meet the demands of mobile savvy customers.

 

Today, it’s all about meeting the customer needs and getting them to buy your products. And in order to do so, companies need to ensure their applications and websites are in tip-top shape. Customers simply will not have any patience for a website or application that is error prone or buggy or one that takes forever to load. This is why website performance and application monitoring is so central to your business strategy.

 

We talk about this subject a lot because it’s really so critical to the bottom-line of a business. And it’s even becoming more incumbent today as the demands of new technologies like the Internet of Things and wearables mean that customers are interacting with companies and their products through more endpoints than ever before. All of these channels require performance monitoring to ensure that things run as efficiently and optimally as possible. At the end of the day, web performance is really about keeping the customers happy.

 

In what follows, we want to do a reality check by discussing 7 “sure fire” ways to improve your web performance and make sure your customers keep coming back. After all, your business ROI really depends on it!

 

1. Keep Things Fast!

 

Research shows a clear relationship between web load speed and customer conversions. The faster a page loads the more likely customers will be to visit and do business on your site. The inverse is also true. The slower a page the less likely customers will be willing to wait around and engage with your brand. While this seems fairly straightforward, it’s surprising how few business owners really get the importance of website performance and the role it plays in their business strategy. It might be nice to have a trendy looking website, but if it takes 10 seconds to load visitors won’t hang around long enough to appreciate all the bells and whistles anyway.

 

 

2. Make Your Central Message Crystal Clear

 

From the moment visitors hit your page you want to give them a clear reason for why they should stick around. To do this you need to deliver your central message as quickly, clearly, and convincingly as possible. Don’t make your home page so convoluted that folks don’t know what action to take. Use large font, go generous on the content, and create clear pathways to the channels they need to purchase your product . . . period, end of story.


3. Give Visitors a Reason to Return

 

So you’ve got some visitors, now what? Well, that’s only half the battle. Studies show that most will not purchase on the first visit. So you need to give visitors a solid reason to return to your website. Do this by providing them with something useful, something they can’t refuse. Provide practical articles, a regularly updated blog, a newsfeed, or other user-generated content . . . anything that will engage your visitors and provide them with something of value.

 

4. Check Your Web Hosting

 

When reviewing web performance one of the first things to check is your web hosting service. It’s surprising how many times this gets overlooked. Even though your provider may offer you unlimited bandwidth, does that mean shared service with other sites that end up affecting your own web performance? Are you frequently experiencing downtime or bandwidth issues? If so, it’s worthwhile to review your hosting options to ensure you’re getting the most efficient service. Don’t be afraid to insist on 99.99% uptime.

 

5. Use Web Analytics & Gather Metrics

 

To some, this sounds like a well-worn cliché by now, but it needs to be drilled in more and more. If you’re not tracking the behavior of your visitors with metrics then you’re leaving money on the table. There are many web analytics tools on the market today that can help you closely monitor your customer’s online behaviors. The ability to track a single customer across your site and across multiple devices will ensure that you can tailor your brand to their needs. For instance, you want to learn more about when and where they’re visiting from, what devices they’re using, what are their online activities, and other key demographics such as age. Gaining these insights will help your organization better understand what’s important to your visitors and how to personalize their experience.

 

6. Take It Easy on Design ‘Best Practices’

 

Increasing the size of your website images, third-party scripts, and style sheets come with a heavy price and can adversely affect performance. This is especially true in the world of mobile. Over 50% of all time consumers spend on retails site is on mobile devices and more than 50% of consumers multiscreen during the purchasing. According to this slide deck, some of the worst practices are web pages that are initially blank and then populate, pages where the call to action is the last thing to render, popups that block the rest of the page, and designing and testing in a way that the user experience is completely overlooked.

 

7. Adopt Cloud-Based Website Monitoring

 

There are significant advantages to offloading your website monitoring to a cloud-based host – cost, scalability, efficiency, to name a few. Not to mention, this frees you up to focus on growing your business, which matters the most anyway.

 

If you’d like to get onboard with the latest in cloud-based monitoring then you should try a 24/7 monitoring service like Monitis. With its first-class global service, Monitis allows organizations to monitor their network anytime and from anywhere. For instance, with Monitis you can load test your website to determine at what point it starts creating traffic issues. They’ll also send you timely alerts by every possible means (live phone messages, text, email, Twitter, etc.) to keep you apprised about your site performance. If your web hosting services go down then Monitis will be first to let you know.

 

When it comes to monitoring your website, you don’t want to shortchange yourself. Get the peace of mind you deserve by entrusting your business to a proven industry leader. Go to Monitis and sign up for a free trial today and let them help boost your bottom-line. You’ll be glad you did!

1
Article Header
This article discusses how to implement server side field validation and display customized error messages to the client.
6
computer code editor
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
6

Expert Comment

by:Gina Lofaro
Comment Utility
Well bless your cotton socks, Ryan! Thank goodness someone else can do the jobs I can't fathom. I've been writing websites for clients for 11 years and I like to stick to my lane (writing quality copy). The thought of trying to code/design/build a website does my head in. We all have our strengths, don't we? For me, it's words ... not graphics, not design, not accounting. I know from working with you that your level of service is outstanding so there's no question about you being a "successful web developer"! I enjoyed your post (even if it did make my head spin a bit)!
1

Expert Comment

by:umairhp
Comment Utility
Thanks for sharing such nice resources for Web Design. I also found some courses on Webemployed that teach front-end and back-end development separately. Some of them also offer free certificates of completion. The main thing is to know which Web technologies you want to master. There are many options like PHP, Mode.js, React.js etc but you need to do some research beforehand.
0
canva_image
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
2
Determine the Perfect Price for Your IT Services
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
4

Expert Comment

by:Carine Lawson
Comment Utility
Great. I'm going to try this now.THanks so much. I had a hard time googling for what I wanted specifically. This was it. Here goes....
0

Expert Comment

by:Alouani Younes
Comment Utility
Great and simple solution. The styling is basic and therefore simple to customize.
0
This article discusses how to create an extensible mechanism for linked drop downs.
0
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to use "screen scrapers" to attack web forms.
5
LVL 1

Expert Comment

by:BR
Comment Utility
it's a great article. I wish I had read it earlier.
Thank you very much Ray Paseur
0
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
0
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript and form good habits that can make your life easier in the long run. (Note: examples in this article use jQuery for simplicity.)


Start with Descriptions


Start by writing comments which describe in plain language what you’re trying to do. Outline where you will need variables, functions, and events. You can always add more complexity like loops and data later on. For example after document ready, whenever someone clicks on a specific button, increment a counter on the page.


Learn Events Other than Document Ready


Half of JavaScript is knowing what you can do, while the other half is knowing when you can do it.

Document ready is not the only trigger. It’s very common to re-run the same function on document.ready, ajaxComplete, and window.resize. Modern JavaScript frameworks may use something like componentReady instead of documentReady. You can also run functions on scroll, click, touch, change, etc.
JavaScript-GetStarted1.jpg


Learn How to Use Parameters


You will want a technique for running the same function with different options. Parameters facilitate reuse by allowing variables to be passed into a function.


Make All Functions Reuseable

1
JavaScript
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand.
Self-Executing functions are just one good example that I'll try to demystify here.
1
LVL 75

Expert Comment

by:käµfm³d 👽
Comment Utility
It should be noted that these are often called "IIFEs":  Immediately Invoked Function Expressions.
0
LVL 31

Author Comment

by:Alexandre Simões
Comment Utility
HI käµfm³d,
you're right, thanks!

I've added it to the article.

Cheers!
Alex
0
Java functions are among the best things for programmers to work with as Java sites can be very easy to read and prepare. Java especially simplifies many processes in the coding industry as it helps integrate many forms of technology and different display functions to keep the overall setup running more care and control.
However, there is always plenty of room for improvement when getting any kind of Java process running right. There are many things that can be done to make it easier for Java functions to be run the right way.
 
Don’t Create Unnecessary Objects

First, it is important to ensure that the objects being created through Java are absolutely functional to the success of a website. A website must be designed with an organization that is doesn’t include anything unnecessary. Unnecessary objects can make it harder for a website to operate and load up. Keeping and unnecessary items out will help keep the coding setup shorter and therefore easier to load.

Avoid Wrapper Classes

Wrapper classes can store information on everything within a site and may be too complicated. It can take a long time to load up some of these classes. A primitive class may be used instead as this focuses on values above all else.

Avoid Null Collections

Some arrays, collections and other features may end up being empty. You have to return them as being empty instead of being null. This is to keep the testing process from being hurt by a slow setup that is far…
1
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
2
You have this traditional web application that refreshes the whole page each time you navigate and you think it's a good time to convert it to a Single-Page approach. What should you know in advance? Read on, I'll guide you through it.
2

Expert Comment

by:Pari B
Comment Utility
Thanks for the article. It explains quite a bit. I am new to Angular and what i understood from my basic reading is that you cannot keep some views in Angular (latest is 5 ) and have other views and controller in existing architecture. Is there a workaround to this?
0
LVL 31

Author Comment

by:Alexandre Simões
Comment Utility
Hi Pari,
Angular changed quite a bit since it's v1 and meanwhile I started other projects, with other techs, and haven't been hable to catch up.
All this to say that I'm not able to give you experieced advice here regarding Angular 5.

By "existing architecture" you mean AngularJS 1.* way of doing things?
If so, you might find this page very usefull: https://angular.io/guide/upgrade.

Cheers!
Alex
0
Exploring SQL Server 2016: Fundamentals
LVL 12
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

Introduction
JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more efficient and more widely supported, JSON has become the dominant technology for use in AJAX applications, APIs, and other data interchange applications where data structure and data elements must be communicated between applications and web services.

JSON is frequently found in combination with RESTful APIs, where XML has rightly fallen into disuse.  This article will examine some of the ways XML and JSON are similar and different, and will show ways of using JSON to our advantage.

Some code examples will show how to create and interpret JSON strings, and detect JSON errors.

A Bit of Test Data
Since the most important thing a programmer can have is a good test case, let's start with some good test data.  Here is the information we will use for all of our code examples.  This information will represent people, giving their names and ZIP codes.  While the example is truly minimalist, it's sufficient to illustrate the principles.
firstName lastName zipCode
John      Doe      20007
Mary      Doe      20016

Open in new window


A Bit of Test Data Organization
Both XML and JSON can represent the data structure.  Here is how our data will be organized.
People (with a date attribute)
|_ Person
   |_firstName
   |_lastName
   |_zipCode

Open in new window


The Old School Way: XML
XML, or Extensible Markup Language, is a text-string data transport mechanism.  It was popularized in the 1990s when SOAP
11
LVL 43

Expert Comment

by:Rob
Comment Utility
Ray,

Great article (as always) :).  I just wanted to address the "Using JSON Strings in JavaScript" section of your article.

I'd like to see the distinction between JavaScript and jQuery/AngularJS to show that jQuery & AngularJS are frameworks of the JavaScript language. In otherwords, they are just JavaScript. They do not implement their own version of the ECMA-262 standards.  Node.js on the other hand DOES have its own version but being only a server side language, that's a different story.

On another note, JSON in the browser still needs to be decoded from a string to be a useful JavaScript native object. Any data that PHP returns in JSON format will need to be decoded using the JSON.parse() native JavaScript function.  jQuery will do this automatically when the getJSON() or ajax() with the dataType set to "json" but vanilla JavaScript will not.  For your reference: http://www.w3schools.com/js/js_json.asp

Following on from this, the example you go on to give isn't a string, but a JS object.  I'd like to see an example of using the native functions for converting JSON strings to objects as indicated here: http://www.w3schools.com/js/js_json.asp
0
LVL 111

Author Comment

by:Ray Paseur
Comment Utility
Hey, Rob.  Thanks for your comments.  Why not add your clarification examples to the comment thread here, or post a new article about this?  Especially if any of my old code and data examples are overtaken by current events... technology is always advancing!
0
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
11
LVL 11

Expert Comment

by:Ackles
Comment Utility
Awesome!!!
Simple Beautiful
0

Expert Comment

by:Eduardo Fuerte
Comment Utility
Mario

Very good example and good foods!!!

Thanks
0
We will take a look at the d3.js library for visualizations.  I will provide a walkthrough of a short bar graph example as well as introduce you to the d3.js API.  We also will explore links of other examples and further information regarding SVG's.
3
Introduction
If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entries by using the typographical error.  This is somewhat annoying, and if you're paying attention, you can visually identify the error.  You can usually get past this issue by telling the browser to forget your recent history.  But have you ever begun typing your password or passphrase into an online form and thought, "Did I get that right?"  You can't visually check your work because the browser is showing you a form input field with something like this: ········· The browser is "helpfully" hiding the password from prying eyes by masking the input control field.

This article teaches three ways to allow your clients to show or hide the password fields as they type them into your forms.  In my experience, the default behavior that hides the password input is only marginally useful.  Most of the time nobody is looking over your shoulder and the real risk of lost passwords does not rest with the human client or the client browser, but with the servers where passwords are stored.  We can't change the server's security, but we can choose to make life easier for our (human) clients!

How HTML <input type="password"> Works
HTML defines several different input types for different kinds of input controls
5
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX.

The logical flow for the problem should be:
  1. Write an event handler for the first drop down box to get the user's selections.
  2. Send the user input to the server
  3. At the server, retrieve the data from the client side and process it; then send the result to client side.
  4. At the client, use Javascript to parse the server response and update the other drop down box.


Write an event handler for the first drop down box to get the user's selections:

It sounds difficult. What is an "event handler"?  In fact, every user action performed on the web page triggers an event. To handle those events, we need to write a Javascript function, and we call these javascript functions "event handlers". To handle the user's selection of an item in drop-down box, we need to capture the onchange event. Here is a sample code:
 
 <select id=type name="type" onchange="updateData(this)">

Open in new window


The above code means that a function named "updateData" would be triggered when user selects an item from this drop down box. Here the variable "this" means the dropdown box itself. Let's see what happens in the "updateData" function:
function updateData(dropDownBox)
{
  var value=dropDownBox.options[dropDownBox.selectedIndex].value;
  if (value!="") //Ensure no empty value is submitted to server side
  {
    jQuery.post("getResult.php","type="+value,updateNumber);
  }
}

Open in new window


Send the user input to the server

The statement:

var value=dropDownBox.options[dropDownBox.selectedIndex].value;

Open in new window

retrieves user input from the first drop down box. The following statement mean user input is sent to server side php script "getResult.php".
 
jQuery.post("getResult.php","type="+value,updateNumber);

Open in new window

1
google-analytics-logo.png

The Challenge

I was developing a new website for a client the other week in WordPress and they asked me if it was possible to track the clicks of the sponsor images they include on their home page. My first port of call was to use the Yoast Google Analytics plugin but for some reason, it didn't work and I wanted finer control of how my events were presented in the Google Analytics (GA) dashboard.

So, I was left wondering how difficult it would be to write some JavaScript to dynamically assign the event push to Google Analytics using the onclick event.

This article describes how I solved that and as it's JavaScript, the solution can be used in any website design.

The Solution

The method relies on the addEventListener() method which attaches an event handler to the chosen document element. A good introduction to this method can be found at w3schools:
http://www.w3schools.com/js/js_htmldom_eventlistener.asp

The syntax for adding the event listener is:
 
document.addEventListener(event, function, useCapture)

Open in new window


So the starting point of the solution creates the event in the bubbling phase:
if (document.addEventListener)
    document.addEventListener('click', callback, false);
else
    document.attachEvent('onclick', callback);

Open in new window

Note that the attachEvent method is used to create a cross-browser compatible solutuion for browsers that don't support the addEventListener method eg. IE8 and earlier.

Once this is done, whenever a user clicks on the page the function callback will be executed.

So we next need to define what the callback function will do.

The first thing to do is to pass the user's event to the function:
 

Open in new window

3
LVL 15

Author Comment

by:Jamie Garroch
Comment Utility
Hi Jim. I saw that weird hyperlink thing after posting the draft. I didn't put it in there and it appears to be a link to nothing when I checked the source of the page:

<a href="http://" target="_blank">

So, as I don't know how it got there I'm not sure how to delete it but I'll give it a go now.
0
LVL 15

Author Comment

by:Jamie Garroch
Comment Utility
Thank you Team EE :-)
0

JavaScript

121K

Solutions

42K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.