CS270 - Javascript

The semester is almost over, friends, and that means this JavaScript adventure is ending, for now. At the beginning, I was pretty intimidated by this language blog project. The idea that I would be able to teach myself enough about JavaScript to write a whole program seemed daunting, but I'm really happy with the amount of knowledge that I was able to gain in a short period of time. What really helped me get through this was learning to rely on the JavaScript documentation over a Google or Stack Overflow search. Don't get me wrong, those are great resources, but you can fall down a pretty big rabbit hole chasing an answer that could easily be resolved by going to the source. Unless you find an exact duplicate solution to the function you are trying to write, you could end up wasting more time trying to adapt someone else's code than just writing your own. Also, there are so many opinions on the best code to solve a problem that I found it better to search the API and...

It's the final week of our coding project and the Date Calculator I have been working on the past couple weeks is complete. This week I added functionality to the radio buttons and the calculate button. The radio buttons not only select the calculator the user wants, but they control which elements are visible on the page. The second calendar picker is only needed when comparing the number of days between two dates, so it is hidden when not in use. The same goes for the Number of Days input box which corresponds to adding/subtracting a number of days from a selected date. Previously, I hard coded a specific date calculator's function to the CALCULATE button for testing, but now it needs to call the correct function based on the selected radio button. Let's dive in on wiring up the radio buttons. Control Visibility Using Radio Buttons In order to access the radio buttons using JavaScript, I needed to make sure the form had a distinctive id, that each button ...

In this week's adventure in creating a JavaScript Date Calculator I'm delving into inserting a date picker. In my research, I discovered quite a few calendar pickers already in existence, so instead of re-inventing the wheel I used one from the YUI library . Installing and Instantiating the YUI Calendar The YUI Calendar files, including CSS stylesheets and skins, can be downloaded from GitHub . I added the CSS files to my project's CSS file folder and referenced the .js file by linking it as a source before the closing body tag in the HTML document. By doing so, I had to write the script to instantiate the calendars in the HTML document instead of the project's .js file. Note: There are methods to reference an external JS file in another using AJAX, jQuery or Node.js but, that is beyond the scope of what I'm doing here. We create the calendar by specifying in the use() method which parameters we need from the original .js file. Since YUI's JS sourc...

Welcome back, everyone! As I mentioned in my last post, I'm creating a Date Calculator for my JavaScript project. My first task is to the create the three main functions that will calculate the results for the users; Days Until, Days Between and Add/Subtract Days. Add/Subtract Days I started with Add/Subtract Days since I could combine both calculators into one function based on the radio button selected. I will code my radio buttons with values (0-3), like an index, so if the user selects Add the value of 2 will be passed into the function, and 3 will be passed in with Subtract . I named my function incrementDays with parameters (dateString, incrementDayNum, operationType). It outputs the date you get from adding or subtracting that number of days from the selected date into a text field. dateString - The date the user selects from the Calendar, passed as a String ('April 8, 2017') incrementDayNum - The integer entered into the text box, passed as a String (...

I've been going through the torturous joyous process of interviewing for summer internships and most of the companies I met with included some sort of technical challenge as part of the second round of interviews. Everything from a barrage of questions to a whiteboard problem to a coding challenge. The company I will be working for this summer gave me a coding challenge to create a date calculator using the framework/language of my choosing. Since they create web apps in Visual Studio that's what I used to complete the task. The bonus of VS is the drag and drop GUI, ease of programming controls, and use of a Script Manager to update the page without a post-back. JavaScript Date Calculator Program Description For my JavaScript project, I want to recreate the same program using JS with HTML and CSS. To give you an overview of what I'll be writing, here are the requirements the program will fulfill. Take a date as input Allow the user to select from the following ca...

Welcome back, friends! My previous posts have covered the origins of JavaScript and the basics of the language. As we've discussed, JavaScript works hand-in-hand with HTML and CSS to create dynamic, interactive websites. While HTML delivers the content and CSS delivers the styling JavaScript interacts with the user. The benefit of JS is that it can perform its tasks without calling back to the server. Thinking of the work we did in VisualStudio, the UI was created with HTML and CSS and every time a control was clicked, it caused a post-back to the server in order to access the functionality. This is what sets JS apart from other languages. It can perform tasks without the post-back. It transforms a static page into something much more interesting, and because all modern web browsers are already compatible with JS, there are no plugins required to run scripts. Because JavaScript is such a popular language, it has a ton of libraries and frameworks available to extend its capabili...

In this week's JavaScript lesson we're going to look at how to create a Binary Search function. What is Binary Search? Binary search is an algorithm that locates the index of a value in a sorted list, like an array. It accomplishes this task by splitting the list in half and comparing the value at the mid-point index to the search value. If a match is found, the mid-point index is returned. If the value is not located in the middle position of the list, the middle position becomes the new start or end for the search, based on if the search value is higher or lower than the value stored in the middle index. If the search value is higher, the mid-point index becomes the new start index. If it is lower, it becomes the end index. The search continues, looping until the search value is found in the list. If the search value is not found, a statement indicating this is returned. Binary Search Syntax In JS, we define a function (binarySearch) that takes a list and valu...