• (2 Pages)
  • +
  • 1
  • 2

Beginning JavaScript How to integrate simple JS into HTML Rate Topic: ***** 3 Votes

#1 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Posted 27 June 2009 - 02:34 PM

*
POPULAR

What is JS?
Javascript was at first used to embed applets into webpages. Hence the name "Java"Script. Learning JS is really easy, you just need a little experience in HTML.
Go!
To start, we need our HTML document:
<html>
   <head>
	  <title>JS tester</title>
   </head>
   <body>
   </body>
</html>


This is the basic form that we'll use. Now, JS code goes between the <script> tags. The script tags can go either between the head tags or the body. For example, JS in the head elements:
<html>
   <head>
	  <title>JS tester</title>
	  <script>
//Code
	  </script>
   </head>
   <body>
   </body>
</html>


See? Now, notice my //Code? The double slashes shows that the string after it is a comment. The web browser that views the page won't process the comment.
Basics
There are many statements that execute things in the browser window. However, there are a few that I want to cover here.
The first is the document.write("String"); statement. That writes the "String" string to the page. Notice that after that statement, I placed a semi-colon. That signals to the web browser to execute the next line of code.
The next is the window.alert("String"); code. This sends the string to the browser and it pops up as a window alert with the exclamation point in the left part.
Lets try this:
<html>
   <head>
	  <title>JS tester</title>
   </head>
   <body>
	  <script>
document.write("My first actual JS statement!");
	  </script>
   </body>
</html>


This should write "My first actual JS statement!" to the page.
Now YOU try the window.alert statement. Did it work?
Functions
Functions are containers for JS code. An example:
function new_function() {
   //Code
}


Functions can be called to be executed when you use executors like onclick or onload. The executors are placed inside HTML elements like so:
<html>
   <head>
	  <title>JS tester</title>
   </head>
   <body onload="greetings()">
	  <script>
function greetings() {
   window.alert("Greetings!");
}
	  </script>
   </body>
</html>


When the page loads, a pop up box will show saying "Greetings!". See the executor in the body element?
Variables
Variables are... variable. They can be anything from a object to a string. A variable is declared like so:
var new_variable = "New variable string!";


So now, lets use what we've learned all together:
<html>
   <head>
	  <title>JS tester</title>
   </head>
   <body onload="say_name()">
	  <script>
var my_name = "Kewl";
function say_name() {
window.alert("My name is " + my_name + ".");
}
//Look at how I used the window.alert statement. First I said My name is, then I used + to use my variable.
	  </script>
   </body>
</html>


This should say "My name is Kewl."
Now that you've ran this, try building a program that says your name and writes your name to the page. Have fun!
Resources
http://www.w3schools.../JS/default.asp

Is This A Good Question/Topic? 9
  • +

Replies To: Beginning JavaScript

#2 Eetu  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 09-September 10

Posted 16 September 2010 - 10:06 PM

Thanks!
I wanted to learn that POP-UP thingy ;))

Wow, it is awesome code!
Keep it up :P
Was This Post Helpful? 0
  • +
  • -

#3 Harlen  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 40
  • Joined: 08-February 10

Posted 11 March 2011 - 10:51 AM

Thanks, I now understand how functions work. :^:
Was This Post Helpful? 0
  • +
  • -

#4 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Posted 03 May 2011 - 07:02 AM

Nice little introduction to Javascript! Easy to understand too, well done. Will be looking forward for some more JS tutorials.
Was This Post Helpful? 0
  • +
  • -

#5 Emce  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 17-May 11

Posted 17 May 2011 - 02:07 PM

Thanks! It was a very helpful introduction.
Was This Post Helpful? 0
  • +
  • -

#6 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Posted 17 May 2011 - 05:58 PM

Because JS is dynamic and unique as to what its purpose is
i absolutely love it for that fact , and is a stepping stone to
PHP usually or ASP.net somewhat.

I done some crazy stuff with JS :)
Was This Post Helpful? 1
  • +
  • -

#7 sss1234  Icon User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 6
  • Joined: 14-May 11

Posted 18 May 2011 - 07:48 PM

wow its awsome
thak you
Was This Post Helpful? 0
  • +
  • -

#8 richmund12  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 38
  • Joined: 10-October 09

Posted 07 June 2011 - 09:25 AM

Great intro...

Thanks! :)
Was This Post Helpful? 0
  • +
  • -

#9 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Posted 08 June 2011 - 12:37 AM

To begin with HTML\Javascript\CSS etc. just go to W3Schools.
Was This Post Helpful? 0
  • +
  • -

#10 brianarn  Icon User is offline

  • New D.I.C Head

Reputation: 11
  • View blog
  • Posts: 27
  • Joined: 02-October 09

Posted 12 July 2011 - 05:08 PM

Ugh, no, don't go to w3schools. There are tons of known issues (see http://w3fools.com/ for details).

This tutorial is a decent starting point. :) That being said, I'd advise people to avoid document.write if possible. It lets you manipulate things in the page right then and there, but it makes for very brittle code that isn't easily portable or reusable.
Was This Post Helpful? 1
  • +
  • -

#11 Creative Ginger  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 11-July 12

Posted 30 July 2012 - 05:48 AM

Thanks this was really simple and straightforward great for beginners. I noticed when I put more than one alert box in and then opened it up in Mozilla that every box after the first one had a checkbox underneath it to disable any further alert boxes. Is this just to make it easy for people to avoid any checkbox spam they might come across? and can you remove it because it looks ugly. If not can you at least remove the text next to the box?
Was This Post Helpful? 0
  • +
  • -

#12 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Posted 30 July 2012 - 06:12 AM

Quote

Is this just to make it easy for people to avoid any checkbox spam they might come across?

Yes, basically. Alerts and prompts block the user from using the site until they are dealt with. This feature allows the user to avoid having to deal with any more of them.

Quote

and can you remove it because it looks ugly.

No. The feature is meant to give the user a choice whether or not to block more alerts. Your code doesn't get a say in the matter.

Quote

If not can you at least remove the text next to the box?

No. We have no control over this feature.


Effective as they may be to demonstrate the basic functionality of Javascript, alert boxes are best avoided in production code. They are a very intrusive way to show your users messages, and will quickly become very annoying. Especially if you are opening them repeatedly. - You would do better to show messages on the page itself, using HTML and CSS to present the message in a more user-friendly manner. That makes it far less disruptive for the user.
Was This Post Helpful? 0
  • +
  • -

#13 Binkysdaddy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 09-May 12

Posted 19 August 2012 - 03:28 PM

Instead of w3 schools... I use codecademy.com. Its an awesome interactive learning environment. Constantly growing it seems.. When i first discovered it i only saw javascript... Now when looking for more to learn i found out they teach HTML, css, Javascript, jquery, And python!
Was This Post Helpful? 0
  • +
  • -

#14 James_Smith  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 20-July 12

Posted 22 August 2012 - 05:59 AM

Most useful and really understanding what is javascript? and how is it work? which give us basic idea for all new beginner web designers and developers.

I like the way of representation of basic learning javascript. It will be better if you provide all important resources about javascript to understand it better.
Was This Post Helpful? 0
  • +
  • -

#15 annaharris  Icon User is offline

  • New D.I.C Head

Reputation: -4
  • View blog
  • Posts: 38
  • Joined: 03-May 12

Posted 04 January 2013 - 05:26 AM

Really, you have shared such a great & useful information about Javascript. Keep up this type of information in a future.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2