PART 2: JavaScript
Why do I need to learn JavaScript if I manage a WordPress site?
- By learning the basics of JavaScript and PHP, you can go beyond customizing the appearance of your WordPress website. You can modify the way it works. Even if you just take the first step: being able to recognize JavaScript and PHP (and tell them apart), you will be able to better manage your site.
- You may need to copy and paste some JavaScript or PHP code into your WordPress site. But, JavaScript and PHP are not as forgiving as HTML and CSS. Sometimes, just forgetting to include something as simple as a semicolon (;) can mess up the code and lead to hours of troubleshooting.
- It’s good to know the basics. It’s good to recognize the syntax. It’s great to be able to write a simple script and know what to do with it in your WordPress site.
- JavaScript is going to become a major component in future WordPress sites. You’ll learn more about that in a minute.
What is JavaScript (JS)?
- JavaScript (JS) is a scripting language that can run in your browser.
- JavaScript allows immediate feedback to visitors.
- It helps make web pages more dynamic and interactive.
- You can use JavaScript for calculations. HTML can’t do that.
- It is commonly found embedded in HTML code.
- JavaScript has often been used to create web animations such as image sliders. But, you can also build entire sites with it.
Adding JavaScript into an HTML Document
You can add JavaScript code in an HTML document by using the tag <script> that wraps around JavaScript code.
JavaScript Example:
window.alert(5 + 6);
</script>
(This script can be placed in an HTML page or a PHP page.)
You can place a whole bunch of JavaScript scripts in an HTML document, if you really want to. Scripts can be placed in the the <head>, the <body> or <footer> section of a web page.
Scripts that are small can be included in an HTML file.
The most common way to include JavaScript is to put JavaScript scripts in a separate file and link to them from a web page. JavaScript files end with the extension .js.
You can add script tags in your HTML document which point to your javascript files.
Example Script Tags Pointing to an External .JS File
JavaScript Compared to PHP
- Your web browser executes JavaScript code. Your browser does all the processing.
- PHP runs on the server where your website is stored. The server computer does all PHP processing and it sends the result to your browser.
- It is not hard to learn JavaScript or PHP, but it’s harder than learning HTML and CSS.
- All the arithmetic operators are the same. Loops, arithmetic logic, variables and functions and assignments are all terms used for both languages.
- The syntax signs are one of the major differences between JS and PHP.
- JavaScript and PHP are both case-sensitive.
Contact Forms: Example of how HTML, CSS, JavaScript and PHP are commonly used together
A contact form can be created with HTML. Then CSS can be used to make it look nice. Form validation can be done on the client-side (web browser) and on the server-side (PHP). Client-side validation can be done with JavaScript and also HTML5 (the newest version of HTML). The form can then be sent with PHP.
How to recognize JavaScript (syntax)
- JavaScript statements are separated by semicolons (;).
- JavaScript uses the var keyword to declare variables.
- The var keyword tells the browser to create variables.
- An equal sign is used to assign values to variables.
Hyphens, camelCase and Underscores
- The common convention around naming variables in JavaScript is to use camelCase, (without any dashes or underscores). camelCase consists of combining words while removing spaces, capitalizing the beginning of each new word except for the initial word.
- Hyphens are not allowed in JavaScript names.
- On the other hand, hyphens are commonly used in CSS. Underscores are often used in PHP (ex. date_of_birth), especially in SQL databases.
Adding JavaScript to Your WordPress Site
Don’t try to add JavaScript in your VISUAL/TEXT editor. WordPress by default strips out any code in posts and pages that may be considered malicious. It may also add <p> tags around your <script> tags in the TEXT editor, preventing your script from working.
JavaScript and Page Speed
NOTE: Adding JavaScript (and Plugins) to your website can affect your site’s speed. Javascript that is located towards the top of an HTML document can block page rendering, slowing down a web page. In order to defer parsing of Javascript, it is best to call these scripts at the end of an HTML document and link to your external JavaScript files in the FOOTER sections of your pages.
Combine and Minify JavaScript files
Having “multiple” JavaScript files can also hurt a website’s load time. These scripts can often be combined for better website performance. JavaScript can be compressed (minified) to speed up page loading time. Minification removes all the white space from the code before serving it to visitors.
Helpful Links:
- How to Eliminate Render-Blocking JavaScript and CSS
- JavaScript for WordPress Developers: Learning the Basics
JavaScript and the Future of WordPress
JavaScript will play a key role in the future of WordPress. You may have heard about or seen the new interface, Calypso. ( It’s currently in use on WordPress.com.)
- Unlike the traditional WordPress Admin interface, Calypso uses JavaScript.
- Calypso provides a more streamlined way to create posts and pages.
- Rather than connecting directly to the MySQL database, Calypso manages content over the web using a special language known as a REST API. It eliminates the need to login to the WordPress admin section (dashboard) from a browser to manage content. In the future, it may eliminate the need for the dashboard altogether.
If you aren’t super comfortable with JavaScript, it would be a great time to start learning.
Visit: JavaScript For Cats.
It’s a helpful tutorial for JavaScript beginners, not for real cats.
Return to Top