PHP Revolution: javascript

Showing posts with label javascript. Show all posts

Friday, September 21, 2018

Determining the Element Clicked on in jQuery

In jQuery, you can easily find out when an element itself is clicked on, but binding with the click event, like so...

$('#MyElement').click(function(event) { console.log("I just clicked the element with the id of Myelement!"); });

But in more complicated scenarios, several elements will trigger a shared function, and you need to know which element was clicked from that shared function.

That would be like this...

$('#MyElement').click(function(event) { return doSomething(event);} $('#MyOtherElement').click(function(event) { return doSomething(event);}

In this case, you could find out which element was clicked by using the event object...

function doSomething(event) { console.log("Just clicked the element with an id of..." + event.target.id); }

The event.target object will tell you almost everything you need to know about what was clicked.

Tuesday, September 18, 2018

How do I create an Iframe and insert it into my webpage with only JavaScript?

There are times when you will want to create and insert an Iframe page onto the current page the user is on.

This gives you a number of advantages, like allowing you to load a whole new webpage or website in the iframe (though some sites disallow others to use them through iframes, such as Google).

In JavaScript, the code to create the iframe is this simple..

var iframe = document.createElement('iframe'); iframe.src= "http://www.earthfluent.com";

You'll notice that, it won't be a very useful iframe unless you define some basics, like width and height...

iframe.width = "200"; iframe.height = "200";

Then you append it to your document with JavaScript...

document.getElementById("PlaceIframeHere").appendChild(frame);

Or with jQuery...

$("#PlaceIframeHere").append(frame);

Thursday, September 13, 2018

Detect a CheckBox's Checked Status in JavaScript or jQuery

Checkboxes are an important part of forms, and knowing whether they are checked, in JavaScirpt and jQuery, can be very useful.

Standard checking in JavaScript is very simple...

console.log("Checked status?" + document.getElementById('MyCheckBox').checked);

Checking in jQuery is similarly not very difficult...

console.log("Checked status?" + $('#MyCheckBox').is(":checked"));

If you have a newer version of jQuery (v. 1.6+), the following will also work...

console.log("Checked status?" + $('#MyCheckBox').prop('checked'));

Make sure not to mix these up, or you will get bad results. jQuery selectors return an array of matched elements. If you try to look at $('#MyCheckBox').checked, you will always see false, whereas $('#MyCheckBox')[0].checked would be more likely to work.

Friday, September 7, 2018

How do I change an Element's Class in JavaScript?

You can manipulate an element in jQuery by selecting it by its class, like so...

$(".SomeElementClass").SomeAction(...)

The period here indicates that "SomeElementClass" will match on elements like this...

<element class="SomeElementClass">

If you want to change the class, things can become a bit more tricky, but it is very possible...

const element = $('.SomeElementClass'); element.classList.remove('SomeElementClass'); element.classList.add('BrandNewClass');

Now, when looking at the DOM, your element will now be...

<element class="BrandNewClass">

The same approach can be used to change an element's id attribute, as well.

Wednesday, September 5, 2018

Importing or Including Other JavaScript Files from Your JavaScript Code

You may have multiple JavaScript files, and you want them all to be included within one page. Normally, that would be several script tags at the head of the document, like so...

But, you may need to determine the name of the JavaScript file you need using JavaScript ocde itself. For instance, you may not be certain that you need MyScript.js, unless the user is logging in through a certain service.

With jQuery, you can include the file very cleanly and with high browser-compatibility. From your JavaScript source library, run this command...

$.getScript("MyScript.js", function() { console.log("Script loaded!); });

If you just want to use JavaScript, and nothing else, then you can get away with adding an element of the script type...

var script = document.createElement('script'); script.type = 'text/javascript'; script.src = "MyScript.js"; document.appendChild(script);

Then MyScript.js will have been loaded and is then available for use in the local, calling script.

There are a number of other options for handling this: ES6 options, AJAX query options, Node.JS packages, etc., but these are the simplest approaches.

Monday, September 3, 2018

Why is document.write() a bad coding decision in JavaScript?

If you want to send content to a browser, there are many options. But one of them that you should avoid is document.write(), which may appear as...

document.write("<html><body>Hello!</body></html>");

This is considered poor form for a number of reasons.

First, it completely overwrites all content on the page with whatever is given to the write() function. So, if you have any other HTML on the page, it will disappear.

That means that all future coding and development needs to be done with this document.write("") function, and that's just an unnecessary complication.

The real problem is that it's difficult to work with. A coder using document.write()'s all over their script will take much longer to finish than one who is using proper DOM manipulations (like using element.innerHTML(), jQuery's append(), etc.).

There are also technical problems: XHTML does work with document.write("").

There are also security problems: Google Chrome will refuse to run document.write("") if it contains anything in the write("") which was from a POST or GET query, or if it suspects that any cross-site scripting injection is taking place.

There are also performance problems: Google Chrome itself will give the warning that document.write("") may slow down your webpage by "tens of seconds," according to the Google Developers blog (https://developers.google.com/web/updates/2016/08/removing-document-write).