Javascript To Jquery Conversion

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Javascript To Jquery Conversion

#1 Monie

Professional Squeeze

Group: Members
Posts: 1,516
Joined: 13-February 08
Gender:Male
Location:Borneo

Posted 23 June 2009 - 08:08 PM

I have this old way of doing thing's in JavaScript...

Can someone help me CONVERT them into JQuery code?
I know this is as simple as ABC but I just could not make it to work, damn!!!
Now I know I am bad in JQuery

	 <html>
	 <head>
	 <title>Input Joining</title>
	 <script type="text/javascript">
	 
	 function FillIn() {
	   document.getElementById('fullname').value = 
		 document.getElementById('fname').value + ' ' + document.getElementById('surname').value; 
	 }
	 </script>
	 </head>
	 <body onLoad="FillIn()">
	 <input id="fname" name="fname" value="William" onblur="FillIn()" />
	 <input id="surname" name="surname" value="Shakespeare" onblur="FillIn()" />
	 <input id="fullname" name="fullname" value="" />
	 </body>
	 </html>

This post has been edited by Monie: 24 June 2009 - 03:35 AM

Join me via Facebook | Twitter

#2 japh

Squeeze Machine

Group: Team Leaders
Posts: 932
Joined: 07-October 08
Gender:Male
Location:Australia

Posted 24 June 2009 - 12:33 AM

Monie, on Jun 24 2009, 11:08 AM, said:

I have this old way of doing thing's in JavaScript...

Can someone help me CONVERT them into JQoery code?
I know this is as simple as ABC but I just could not make it to work, damn!!!
Now I know I am bad in JQuery

	 <html>
	  <head>
	  <title>Input Joining</title>
	  <script type="text/javascript">
	  
	  function FillIn() {
		document.getElementById('fullname').value = 
		  document.getElementById('fname').value + ' ' + document.getElementById('surname').value; 
	  }
	  </script>
	  </head>
	  <body onLoad="FillIn()">
	  <input id="fname" name="fname" value="William" onblur="FillIn()" />
	  <input id="surname" name="surname" value="Shakespeare" onblur="FillIn()" />
	  <input id="fullname" name="fullname" value="" />
	  </body>
	  </html>

Hey Monie,

Just to be clear, using straight-up javascript is almost always going to be more efficient than using a framework (i.e. jQuery). jQuery should really only be used to make complex javascript coding tasks simpler to write, and more accessible for those who don't know advanced javascript. The other benefit would be cross-browser compatibility.

So really, if your current code works fine cross-browser, there is no reason to use jQuery here. You'd just be adding some performance and bandwidth penalties for no real reason.

Are you having issues getting the code to work cross-browser?

Follow me: @Japh
Read my blog: http://japh.com.au/
Hire me: Satellite | International Web Development

#3 Monie

Professional Squeeze

Group: Members
Posts: 1,516
Joined: 13-February 08
Gender:Male
Location:Borneo

Posted 24 June 2009 - 12:48 AM

Yes, the code works fine at the moment and I don't really know why the hell I wanted to have the JQuery version of it ^_^

Perhaps to gain the knowledge on how to do it I guess..

Anyway, the page that I am designing will be used by a specific user, meaning to say I control who can access them and who don't. That give me a complete control on the version of their browser as well...

Actually, this is the system I develop for my departmental use ^_^

This post has been edited by Monie: 24 June 2009 - 12:50 AM

Join me via Facebook | Twitter

#4 japh

Squeeze Machine

Group: Team Leaders
Posts: 932
Joined: 07-October 08
Gender:Male
Location:Australia

Posted 24 June 2009 - 01:06 AM

Ok, well totally for the sake of showing you how you would do it in jQuery (even though on this occassion you probably shouldn't

<html>
	<head>
		<title>Input Joining</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript">
			function FillIn() {
				$('#fullname').val($('#fname').val() + ' ' + $('#surname').val());
			}
			$(document).ready(function () {
				$('#fname').bind('blur', function () { FillIn(); });
				$('#surname').bind('blur', function () { FillIn(); });
				FillIn();
			});
		</script>
	</head>
	<body>
		<input id="fname" name="fname" value="William" />
		<input id="surname" name="surname" value="Shakespeare" />
		<input id="fullname" name="fullname" value="" />
	</body>
</html>

Should do it!

Follow me: @Japh
Read my blog: http://japh.com.au/
Hire me: Satellite | International Web Development

#5 Monie

Professional Squeeze

Group: Members
Posts: 1,516
Joined: 13-February 08
Gender:Male
Location:Borneo

Posted 24 June 2009 - 02:16 AM

It's a lot more complicated than I thought

Thanks Japh!

This post has been edited by Monie: 24 June 2009 - 02:19 AM

Join me via Facebook | Twitter

#6 MikeHopley

Professional Squeeze

Group: Mentor
Posts: 1,382
Joined: 15-February 08
Gender:Male
Location:UK

Posted 24 June 2009 - 02:55 AM

Notice that, as part of the process of converting your javascript to jQuery's syntax, Japh removed the inline event handlers and put them in the javascript instead (a good practice, which helps to separate behaviour from content). This makes the code look more complicated than it actually is.

japh, on Jun 24 2009, 06:33 AM, said:

Just to be clear, using straight-up javascript is almost always going to be more efficient than using a framework (i.e. jQuery).

Theoretically, yes; but the difference in speed is hardly a significant issue. In real performance terms, downloading the library file is by far the biggest penalty; code execution is not going to be much different. Note also that jQuery has benefitted from staggering performance improvements in version 1.3.

Quote

You'd just be adding some performance and bandwidth penalties for no real reason.

Well, the "bandwidth" (download) penalty is boolean: either you include the jQuery library, or you don't. Once you've incurred that (small) download penalty, it's actually more efficient to use jQuery's syntax (in most cases), as it's much more terse.

If you have an extremely large javascript file, it's worth switching to jQuery just so you can reduce your overall file size!

But I don't imagine this scenario occurs often.

#7 japh

Squeeze Machine

Group: Team Leaders
Posts: 932
Joined: 07-October 08
Gender:Male
Location:Australia

Posted 24 June 2009 - 03:32 AM

It really depends on the case at hand. In some cases you would be quite correct, in others, not so much. As with my own statements also.

Thankfully, either way, Monie's question has been answered

Follow me: @Japh
Read my blog: http://japh.com.au/
Hire me: Satellite | International Web Development

#8 MikeHopley

Professional Squeeze

Group: Mentor
Posts: 1,382
Joined: 15-February 08
Gender:Male
Location:UK

Posted 24 June 2009 - 04:07 AM

japh, on Jun 24 2009, 09:32 AM, said:

It really depends on the case at hand. In some cases you would be quite correct, in others, not so much.

I suppose that for a complicated web app, the difference in speed between jQuery and plain javascript could become significant.

Take Google Analytics. I suspect it's written using their Google Web Tookit framework, and then compiled into javascript for speed. This is a more sophisticated approach to javascript development, but is overkill for most ordinary websites that just want minor DOM access and the occasional show/hide effect.

(Well actually, they need to compile the GWT code anyway, as it's written in Java.)

#9 Monie

Professional Squeeze

Group: Members
Posts: 1,516
Joined: 13-February 08
Gender:Male
Location:Borneo

Posted 26 June 2009 - 08:09 PM

How do you guys know this things ^_^

Thanks anyway guys for that extra information...

Join me via Facebook | Twitter

#10 Jack

Squeeze Machine

Group: Members
Posts: 682
Joined: 16-February 08
Gender:Male

Posted 27 June 2009 - 04:50 AM

japh, on Jun 24 2009, 07:06 AM, said:

Ok, well totally for the sake of showing you how you would do it in jQuery (even though on this occassion you probably shouldn't

<html>
	 <head>
		 <title>Input Joining</title>
		 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		 <script type="text/javascript">
			 function FillIn() {
				 $('#fullname').val($('#fname').val() + ' ' + $('#surname').val());
			 }
			 $(document).ready(function () {
				 $('#fname').bind('blur', function () { FillIn(); });
				 $('#surname').bind('blur', function () { FillIn(); });
				 FillIn();
			 });
		 </script>
	 </head>
	 <body>
		 <input id="fname" name="fname" value="William" />
		 <input id="surname" name="surname" value="Shakespeare" />
		 <input id="fullname" name="fullname" value="" />
	 </body>
 </html>

Should do it!

Can I ask why you use .bind() instead of just .blur()?

Also, could you not do this?

$('#surname').bind('blur', FillIn());

(or something along those lines)?

[url="http://"http://www.jackfranklin.co.uk"]www.jackfranklin.co.uk[/url]

#11 Monie

Professional Squeeze

Group: Members
Posts: 1,516
Joined: 13-February 08
Gender:Male
Location:Borneo

Posted 27 June 2009 - 06:08 AM

Hey Jack!
You mean you have other version better than what Japh suggested to me??

Join me via Facebook | Twitter

#12 Jack

Squeeze Machine

Group: Members
Posts: 682
Joined: 16-February 08
Gender:Male

Posted 06 July 2009 - 05:11 AM

Afraid not

I was asking Japh why he chose to do it the way he did - I would stick to his solution

[url="http://"http://www.jackfranklin.co.uk"]www.jackfranklin.co.uk[/url]

#13 Rakuli

Community Director

Group: Community Director
Posts: 1,378
Joined: 13-February 08
Gender:Male
Location:Catching the squeezed drips downunder.

Posted 06 July 2009 - 05:16 AM

@Jack -- There is no particular reason (so far as I can tell), as to why Japh's used bind() instead of blur() -- at the heart of it, blur is one extra function call as jQuery uses the bind() function for all of it's shortcut bind functions.

As to being able to bind the FillIn() function straight to the event, that would work.

Luke Dingle . com

@Rakuli

#14 japh

Squeeze Machine

Group: Team Leaders
Posts: 932
Joined: 07-October 08
Gender:Male
Location:Australia

Posted 06 July 2009 - 05:23 AM

Ah, basically I just prefer to use bind() as it seems not ALL events have an alias. So if I use bind(), I can change the event that's being bound quickly and easily

Follow me: @Japh
Read my blog: http://japh.com.au/
Hire me: Satellite | International Web Development

#15 Jack

Squeeze Machine

Group: Members
Posts: 682
Joined: 16-February 08
Gender:Male

Posted 06 July 2009 - 05:24 AM

Thanks guys, I was just wondering if there was any major benefit from the methods.

This post has been edited by jackfranklin: 06 July 2009 - 05:25 AM

[url="http://"http://www.jackfranklin.co.uk"]www.jackfranklin.co.uk[/url]

Share this topic:

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Page 1 of 1

Trackbacks
Trackback URL	Trackback Date	Total Hits
No trackbacks were found

Page 1 of 1

Similar Topics
Topic	Started By	Stats	Last Post Info
Seo And Javascript	marSoul	2 Replies 1,111 Views	1203781933 By: marSoul
Basic Javascript.	Jason	2 Replies 973 Views	1207220252 By: Jason
Measuring With Javascript?	Jason	13 Replies 2,131 Views	1208411743 By: Ryan
Jquery - Set Css Element	Jason	2 Replies 4,656 Views	1210077208 By: Rakuli
Jquery Examples	unitedcraig	8 Replies 2,793 Views	1221015790 By: Monie

The Web Squeeze: Javascript To Jquery Conversion - The Web Squeeze

The Web Squeeze

Forum

Javascript To Jquery Conversion

#1 Monie

#2 japh

#3 Monie

#4 japh

#5 Monie

#6 MikeHopley

#7 japh

#8 MikeHopley

#9 Monie

#10 Jack

#11 Monie

#12 Jack

#13 Rakuli

#14 japh

#15 Jack

Share this topic:

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users

Delete Post

The Web Squeeze: Javascript To Jquery Conversion - The Web Squeeze

Forum

Javascript To Jquery Conversion

Share this topic:

1 User(s) are reading this topic 0 members, 1 guests, 0 anonymous users

Delete Post

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users