Shawn Wildermuth

Stories

Tagged with Javascript


JavaScript for the C# Guy: The Global Object

codeThis is another in my series about (hopefully) interesting JavaScript constructs that might surprise most C# developers. You can see others here: JavaScript for the C# Guy.

Back in the day I was doing some scripting in classic ASP sites (no, not classic ASP.NET) and we screamed and yelled about putting too much in the global scope. We wanted encapsulation and such and that is true today. In my C# work pretty much everything is in a class (static or otherwise) so I don't have to concern myself with it much.  But in JavaScript I know there is an easily accessible global object...but it occurred to me that I don't see the "Global" object accessed much; even though it is used a bit (to hold other containers that have encapsulated code). "Why not?" I wondered.

In JavaScript you can certainly create things in the global space. In fact, in my Architecting JavaScript post from my Modern Web Development series, I show that using an 'app' object for your site can simplify a lot of things. But the app object needs to be in the global space (e.g. in the "Global" object) so everyone can get to it:

Read...


Modern Web Development - Part 8

shawnsouthparkThis is the eighth of ten parts of this blog post. The topics will be:

Oh Facebook…how do you becoming so insistent on integrating you into every website? Well anyway, let’s show you how it actually works. In this post, I’ll show you how to authenticate an app using Facebook.

When you want to integrate with Facebook, you’ll need the Facebook SDK. Unlike other JavaScript APIs, the Facebook API isn’t a download. The API has some specific peculiar patterns that it requires. But if you obey Facebook, it will (usually) bend to your will. To get started you’ll want to visit the Facebook developer site:

https://developers.facebook.com

Read...


JavaScript for the C# Guy: Scopes

roach

Another day in JavaScript land for this  C# guy. I am reading the excellent Professional JavaScript for Web Developers and I am finding more and more that separates the two languages. I know everyone will mention it, but I did read JavaScript: The Good Parts and I liked it but it isn’t as comprehensive as this book.

This time I ran into the fact that JavaScript scopes are handled very different from what C# developers should expect. In C#, we have block scoping. What this means is that any block (e.g. {}) defines a variable scope so that outer scopes can’t see the variables created inside. For example:

Read...


From my Web Dev for XAML Devs Talk

SpaghettiBabyI had the opportunity tonight to do a talk for the Atlanta XAML Meetup on Web Development for XAML Developers. I had fun explaining how XAML developers can use their existing skills with markup, design, data binding and data access on web page development. You can see the slides from the talk here:

If you’re interested in the code from the talk, you can get it here:

Read...


JavaScript for the C# Guy: Function Overloads

dreamstime_1087355089A3Ib17I’ve been writing a lot of JavaScript lately. As a C# guy, I noticed that try and take my knowledge from my time in C# (and C++ and even a little Java) and try to apply it. They are curly braces after all…but alas it doesn’t always work. I’ll learn my lesson one day ;) (though I doubt it).

Lesson for today? Function overloads. Coming from that world I wrote simple code like this:

function myFunction(one) {
}

function myFunction(one, two) {
}

myFunction("a parameter");

Naively I assumed the calling to myFunction will execute the first function but of course it doesn’t work that way. The execution of the myFunction with one parameter calls the second function. Why? The 2nd function declaration replaces the first with the same name. So that no matter what you call as parameters, the 2nd function will be called. This is because functions in JavaScript do not have signatures, just names. In fact, I could have written the function without any parameters:

Read...


Modern Web Development - Part 6

mortarpestleThis is the sixth of ten parts of this blog post. The topics will be:

The Problem

As you develop HTML apps, one of the issues you’ll face is that your application doesn’t come to the browser in one fell-swoop. A typical web page receives content from a number of sources. Below you can see the first bun of requests from a site (in this case MSNBC.com) as shown in Firebug:

Read...


Modern Web Development - Part 5

This is the fifth of ten parts of this blog post. The topics will be:

jQuery Plugins

As I read on the web, the easy way to get lots of comments is to just point out the jQuery plugins I used…the blogosphere seems rife with those. But I am going to avoid that.  So what am I going to talk about? How about how to find the right plugin for the right job.

Read...


Modern Web Development - Part 4

This is the fourth of ten parts of this blog post. The topics will be:

Debugging

I’ve had Visual Studio open constantly on a laptop for the better part of ten years (and fifteen if you count Visual C++). I am used to setting breakpoints inside of the Visual Studio editor and pressing F5 to see what is happening.

Read...


The Web Workshop: Client-Side Dev Training

I am excited to announce that I’ve refactored (and renamed) my web-centric training course. The old “ASP.NET MVC/HTML/CSS Workshop” was just too long. It’s now called “The Web Workshop”.

This course is concentrating on client-development for the browser. The course will cover client-side development for HTML/JavaScript/CSS development including browser-based sites and mobile browser development. While the course will cover using ASP.NET MVC 3 for doing the server-side code, the focus of the course will be in the client development. This means most of the course will cover the new skills that web developers need including:

Read...


Modern Web Development - Part 2

SpaghettiThis is the second of ten parts. The topics will be:

Working with JavaScript can be daunting. In the past, I’ve seen some projects with just a handful of huge files that become difficult to manage. So in architecting what I needed to build, I wanted to adhere to the idea that there was common code and there was view-specific code. There are two different classes of JavaScript that I care about: libraries (i.e. not my code) and site code (i.e. my code).

For now, let’s segregate these two types of code into separate directories as shown below:

Read...


Modern Web Development - Part 1

This is the first of ten parts of this blog post. The topics will be:

In the past year I’ve had a side project. FirstInked’s Beta recently shipped and I wanted to share with you what I’ve learned. To start out, I want to specifically thank two people who were really great in helping me formulate the strategies I’ll talk about. They are:

Where I Came From

Read...


The Case of the ModelBinding Failure

I wasted an evening last night on a simple bug of mine. I was writing a simple HTML data entry page. I was using JSON + $.ajax to POST data to a ASP.NET MVC controller and it used to work. But for the life of me I couldn’t figure out what was wrong. Let’s start with some background.

In ASP.NET MVC3, they made a change to make the JsonValueProviderFactory part of the ValueProviderFactories so that data that comes in as JSON can be mapped to model classes automatically. See this Phil Haack post for how that works:

Read...


Using MVVM on the Web with KnockoutJS

As most of you know, I have been in the Silverlight space for quite a while. (And to be clear to the chicken-little amongst you, no I am not leaving the Silverlight community.) I’ve been building a web application for consumers so that HTML + JavaScript represents the right solution to building a project like we’re building (more on what I am building in the near future). 

One of the things I wanted to be able to do is to build longer-lived pages where it made sense without having to resort to post-backs or hacked together JavaScript. In fact, what I really wanted was a client-side ViewModel (e.g. MVVM) for my web page. After looking at several of the existing frameworks for the job, I settled on KnockoutJS as a great solution. The currently released version (1.21) is a good solution, but the developers of the framework have released a Beta (1.3Beta) version that greatly simplifies what I needed. If you want to follow along, make sure you download that version here.

To get started, I simply have a database of Xbox games (yeah, I know). I am using ASP.NET MVC3 for the web part. I’ve got a single page that contains a drop down of genres and a REST-call from the MVC Controller that returns the games for a particular genre. You can look at the code if you’re interest in that part of the story. I am going to focus on the client-side JavaScript.

Read...