Learn Web Design LIVE On Nairaland!!! - Webmasters (33) - Nairaland
Nairaland Forum / Science/Technology / Webmasters / Learn Web Design LIVE On Nairaland!!! (525536 Views)
Learn Bulk SMS Web Design LIVE On Nairaland!!! Www.buymoresms.com / Web Design Live On Nairaland, Professional / Forum Website (2) (3) (4)
(1) (2) (3) ... (30) (31) (32) (33) (34) (35) (36) ... (121) (Reply) (Go Down)
| Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(m): 1:08pm On Dec 19, 2013 |
brownlord, wisemania and others, thanks for holding this thread down. Na small small we dey learn oh! I'm also learning Ruby. Its my agenda for 2014 oh! God help us sha... 1 Like |
| Re: Learn Web Design LIVE On Nairaland!!! by sunday478(m): 7:16pm On Dec 19, 2013 |
iyenimofe: brownlord, wisemania and others, thanks for holding this thread down. Na small small we dey learn oh!Mr lecturer, Appliedmaths don dey prepare for exam oo, make we the see sha |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 8:35pm On Dec 19, 2013 |
sunday478: Mr lecturer, Appliedmaths don dey prepare for exam oo, make we the see sha Baba no worry I go try drop some useful Js notes. Js to commence anytime from NOW. Keep your Fingers CrosseD. 1 Like |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 8:49pm On Dec 19, 2013 |
INTRODUCTION TO JAVASCRIPT. JavaScript is a client side Scripting Language. A scripting language is a lightweight programming language. By client side I simply mean the user of the web page that has Js running on it. JavaScript is a programming code that can be inserted into HTML pages. JavaScript code can be executed by all modern web browsers, in cases where Js is turned OFF by the user (client) for whatever reason, we solely depend on a Server side scripting language like PHP and co. JavaScript and Java are two completely different languages, in both concept and design. Java (invented by Sun) is a more complex programming language in the same category as C. So hurray! Welcome aboard to the world of web programming. NB: We would denote JavaScript with (Js). As the spirit leads me and also due to my tight schedule I'll be dropping notes at any given and un-given time so always stay tuned and drop questions. My style of lecture is very interactive, I wouldn't move to the next topic if I don't get response from those following. When I drop codes please copy them and try them out then come here to give me feedbacks then I'll proceed. Class continues... 5 Likes |
| Re: Learn Web Design LIVE On Nairaland!!! by 9free(m): 8:55pm On Dec 19, 2013 |
Appliedmaths.:First seat, front row..... |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 9:08pm On Dec 19, 2013 |
Js in HTML must be inserted between <script> and </script> tags. Js can be put in the <body> and in the <head> section of an HTML page. To insert a Js into an HTML page, use the <script> tag. The <script> and </script> tells where the Js starts and ends. The lines between the <script> and </ script> contain the JS:<script>alert("My First JavaScript" ) ; </script> NB: You don't have to understand the code above. Just take it for a fact, that the browser will interpret and execute the Js code between the <script> and <script> tags. The above code is called the alert Function, we'll get there so relax. NB: We would be operating on an HTML 5 level, so that's a double plus. The example below allows you write directly on your web page with Js without using HTML. <!DOCTYPE html> <body> <script> document.write ("<h1>This is a heading</h1>" ) ; document.write ("<p>This is a paragraph</p>" ) ; </script> </body> </html> NB: Don't include the space after the closing bracket next to the semicolon, I only did it so that NL nor go turn am to emoticion. When coding in Js always watch out for the semicolons ";" they are very useful in ending functions, if you fail to insert them the whole code may not function. NB: Unlike HTML Js is a case sensitive language. "myFunction" is different from "myfunction", "getElementById" is different from "getelementbyid" The correct syntax is myFunction and getElementById. NB: When joining two words in Js the next word begins with a capital letter, faliure to do this your script wouldn't work on the web browser. TIP: My user-name as a jS syntax would be written as "appliedMaths". because its a combination of two words, applied and Maths. 1 Like 1 Share |
| Re: Learn Web Design LIVE On Nairaland!!! by wisemania(m): 9:22pm On Dec 19, 2013 |
Me juz reason Front seat stongly!.. |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 9:30pm On Dec 19, 2013 |
@wise my surest guy,you dey wash your guy abi. Na u go tak regExp so get ready. ADVICE: It may get to a point and you'll begin to wonder of what use is Js to you in the 1st place. As for now, just keep calm and learn the language properly you might be surprised how vast this little js is. |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 9:36pm On Dec 19, 2013 |
Js can be placed in either the head, or body sections in our HTML code. All you need do is to use the "script tag" Also we have External Js just like external CSS . In this case I don't advice you to use an external Js, I would give my reasons later when we approach the use of Js Functions properly. Scripts can also be placed in external files. External files often contain code to be used by several different web pages. External Js files have the file extension .js To use an external script, point to the .js file in the "src" attribute of the <script> tag: <!DOCTYPEhtml> <html> <body> <script src= "myScript.js" > </script> </body> </html> NB: myScript.js is the external file where all your Js codes are in. Example: You can build a form using pure HTML and validate that same form using Js through the external page, so you don't need to write your js codes on your HTML page but rather in the external .js file. NB: You can place the script in the <head> or <body> as you like. The script will behave as if it was located exactly where you put the <script> tag in the document. Very Important: The external scripts cannot contain <script> tags. That is to say inside the .js external page don't use "script tags" anymore as if you are coding Js syntax on an HTML page, just continue coding the js syntax on the external js page like that. Ex: alert("welcome" ) ; and that's all. |
| Re: Learn Web Design LIVE On Nairaland!!! by sunday478(m): 9:57pm On Dec 19, 2013 |
Appliedmaths.:ok, me think say u don leave finally finally! |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 10:17pm On Dec 19, 2013 |
Another TWO very Important Js functions are document.getElementById() VS document.write() The first is used to manipulate an HTML tag by entering into the tag and changing it's element. Example: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p id="demo " >My First Paragraph</p> <script> document.getElementById ("demo" ) .innerHTML="My First JavaScript" ; </script> </body> </html> In the above example, document.getElementById as it means got the paragraph element by its I'd and placed "My First Js" as the new message. WHILE document.write() is used to manipulate the entire document. Example: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <script> document.write("<p>My First JavaScript</ p>" ) ; </script> </body> </html> Warning: Do not interchange them. Q1: What is the correct function to use when you want to manipulate an HTML element by its I'd? Q2: what's the correct function to use when you want to manipulate an HTML document directly? Oya abeg, make una confirm all the syntax and drop feedbacks then we move forward. Also drop questions, we have enough teachers in the house. TIP: Js has so many uses, it depends on the intelligence of the webmaster to effectively apply Js to his work, that's were the saying: "man pass man" come to play. So for now don't bother your self on its application, just focus on learning the language first then after that, use your intelligence to apply it anywhere you want. See you guys tomorrow Night by God's grace I'm out. *Make I go jack small*  1 Like |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 10:28pm On Dec 19, 2013 |
sunday478: ok, me think say u don leave finally finally! It wouldn't be easy to leave this thread, I started my web design and development journey from this thread, and is still learning. So it's an honor to give back the little I can. No worry bros! I go try dey show face once once. @Iyenimofe. Boss I'm just keeping the flag flying. |
| Re: Learn Web Design LIVE On Nairaland!!! by Onintegra: 10:36pm On Dec 19, 2013 |
Can I ever sabi this Course? Abi Make I give up on this JAVA101 and block am ni? |
| Re: Learn Web Design LIVE On Nairaland!!! by BoyCoyToy(m): 10:56pm On Dec 19, 2013 |
Where my notebook? Another <p> for JS....... |
| Re: Learn Web Design LIVE On Nairaland!!! by wisemania(m): 8:09am On Dec 20, 2013 |
Emyo: offer still open.stop derailing the thread...thank you! |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 12:43am On Dec 21, 2013 |
I was here to continue the class. Students didn't turn up for class. And moreover, no feedbacks nor questions yet. #Observing |
| Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(m): 8:18am On Dec 21, 2013 |
Appliedmaths.:Maybe they don't have any. In such a case we zoom on the lessons. 1 Like |
| Re: Learn Web Design LIVE On Nairaland!!! by Neduzze5(m): 8:54am On Dec 21, 2013 |
Appliedmaths.: Oga no think am like that oh. Most of us still dey read the beginning of JS. I don read am like four times now yet I never understand shi shi but make I still read am again. Also the major probs I have is the external js method cos I don't even plan to use the internal styling method. Just elaborate more and give real examples so that we can understand better. Thanks Boss! |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 9:55am On Dec 21, 2013 |
Neduzze5: That's the reason why I didn't want to take the next topic, I don't want to pile up the whole thing knowing very well that Js is a new language to most people. The external js is saved with the file extension .js Example: myScript.js Now instead of typing your Js codes in the HTML coding page, you now move all your js codes to the external myScript.js coding page in your notepad+. Test: To test if the external js file is properly linked. Type in the alert function in the myScript.js coding page in your notepad+ like this: alert("Hello world" ) ; When you load the HTML page, a pop up would appear telling you "Hello world." TIP 1: You are linking the external js file with the HTML page. Hope you know how to do that? TIP 2: Js codes using the external scripting sheet would not need the "script" tag anymore. Don't code in the external js file like this: <script> alert("My First JavaScript" ) ; </script> INSTEAD: Code in the external js file like this, alert("My First JavaScript" ) ; END-NOTE: Insert the alert function in the external js page, then link it with the HTML page to confirm that your js and HTML page are now linked and you are ready to go. 1 Like |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 10:08am On Dec 21, 2013 |
In this example. <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p id="demo " >My First Paragraph</p> <script> document.getElementById ("demo" ) .innerHTML="My First JavaScript " ; </script> </body> </html> The js is coded in the HTML page. Observe closely that the js is complementing the HTML paragraph (I'd) element. Now to use the external js pattern on the example above. We move document.getElementById ("demo" ) .innerHTML="My First JavaScript " ; To our external js page let's call it myScript.js and that's all. So when you link, both the Js page and the HTML page all the codes would function properly. |
| Re: Learn Web Design LIVE On Nairaland!!! by Neduzze5(m): 11:19am On Dec 21, 2013 |
Appliedmaths.: What you mean here is that we'll just copy the code above, put it into our .js external file and then link to our HTML codes? That's it  ? |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 11:25am On Dec 21, 2013 |
Neduzze5: My guy that's it oooo!  That's all the technical jargons we have been discussing since. The document.getElementById ("demo" ) .innerHTML="My First JavaScript " ; is the js code so it goes to the js external coding page. It's like the CSS external style sheet, where the CSS codes are used to complement the HTML codes. Oya go and try out the codes and give us your feedbacks. |
| Re: Learn Web Design LIVE On Nairaland!!! by Neduzze5(m): 12:06pm On Dec 21, 2013 |
Appliedmaths.: No changes oh  |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 12:30pm On Dec 21, 2013 |
Neduzze5: Calm down. First of all link the external js file with the HTML page typing <script src= "myScript.js " >< /script> In the head section of your HTML coding page. To test the external js file, type alert("Hello world" ) ; in your external js coding page. Go to your web browser and reload the HTML page you linked the js file with. If the link was properly done, you'll get a pop up saying "Hello world" . If the link isn't correct nothing would show. After this is done, you can now start manipulating HTML using js with the document() functions. |
| Re: Learn Web Design LIVE On Nairaland!!! by IamGodzilla: 1:34pm On Dec 21, 2013 |
Well if you want to learn javascript and your not catching up well with the tutorials on here. I feel a good place to start is w3schools.com or quackit.com It gives you an option to test the codes, as well you can easily understand. 2 Likes |
| Re: Learn Web Design LIVE On Nairaland!!! by IamGodzilla: 1:37pm On Dec 21, 2013 |
Well if you want to learn javascript and your not catching up well with the tutorials on here. I feel a good place to start is http://w3schools.com or http://quackit.com It gives you an option to test the codes, as well you can easily understand. |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 1:55pm On Dec 21, 2013 |
Iam_Godzilla: Well if you want to learn javascript and your not catching up well with the tutorials on here. No wonder they say: "Man pass man." Good luck on your w3school adventure. |
| Re: Learn Web Design LIVE On Nairaland!!! by Neduzze5(m): 7:42pm On Dec 21, 2013 |
Appliedmaths.: Should I put the link of the js file in between the script tags? And what's the main function of the code I inputed earlier on in my external JavaScript file? No vex for my too much questions oh. If I fit overcome this first hurdle, the others won't be too hard for me. Thanks |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 9:33pm On Dec 21, 2013 |
Neduzze5: Create a js file in your notepad++ Save it as myScript.js Inside the myScript.js Type: alert("Hello world" ) ; Then save it. Now open a new HTML file. Put th necessary doctype,head and title tags. In the head section type <script src= "myScript.js " >< /script> Save the HTML file as Java.html Open your web browser and locate java.html file. "Ctrl + O should do the trick" Once you load the java.html page you would see a pop up telling you "Hello world." That's it. Read carefully, this should work. 1 Like |
| Re: Learn Web Design LIVE On Nairaland!!! by Appliedmaths(m): 9:35pm On Dec 21, 2013 |
Neduzze5: The alert() function is to "alert the viewer of the web page, so that he can perform certain functions" Forget about the meaning of the alert function for now, we go still reach there. |
| Re: Learn Web Design LIVE On Nairaland!!! by Neduzze5(m): 6:36am On Dec 22, 2013 |
Yes!! It has finally worked! I put in the alert code and set the script tags in one of my already made sites and the hello world pop up came up. Thank you very much Sir. Also the reason why I ask for their meanings is so that we can know when it has been executed. If we don't know their functions, we may execute it without knowing. Please let's move forward boss. I wonder where others are Abi all of them don learn finish? |
(1) (2) (3) ... (30) (31) (32) (33) (34) (35) (36) ... (121) (Reply)
Domain Name Business; The Easiest & The Most Profitable Online Venture / How To Download Youtube Videos Using The ‘ss’ Trick
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 73 |