|
JavaScript - Learning Javascript--suggestions?
In order to learn "cool" javascript such as rollovers that you find on websites today; what would any of you guys reccomend me doing. I want to learn how to make my webpage interactive and i know what i want to do;
i just dont know how to do it any suggestions are welcome; thank you Similar TutorialsCode: <HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
//Define Functions
function student(name,age,mother) {
this.name = name;
this.age = age;
this.mother = mother;
this.displayProfile = displayProfile;
}
function grade(math,english,science) {
this.math = math;
this.english = english;
this.science = science;
}
function displayProfile() {
document.writeln("Name: " + this.name + ");
document.writeln("Age: " + this.age + ");
document.writeln("Mother's name: " + this.mother + ");
document.writeln("Math Grade: " + this.grade.math + ");
document.writeln("English Grade: " + this.grade.english + ");
document.writeln("Science Grade: " + this.grade.science + ");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT TYPE="text/javascript">
{
student1 = new student("John",18,"Diane");
johngrade = new grade(100,80,90);
student1.displayProfile();
}
</SCRIPT>
</BODY>
</HTML>
Alright, I am learning javascript and in the middle of experimenting with functions, I don't see why this does not work? So should I be learning javascript, what am I going to achieve by understanding this language? My background: Designed a website for my wifes shop: http://www.eden-flowers.co.uk Enjoyed the html and css design side of things, then we decided to add a shoppping cart, to see if we could sell a few products online. Used opencart by the way, which I thought was a good free product and reasonably easy to implement. Having looked deeper into the opencart noticed that it used PHP, so I'm thinking I would like to understand this better. And here I am now trying to understand Javascript purely because I use w3schools alot for reference and their next logical step seemed to be Javascript. I'm rambling, but if you care to respond to this very open question, then pls feel free to voice your opinion/suggestions. Hello everyone, I am currently going through the process of learning JavaScript and I am enjoying it. I also know enough about HTML & CSS and I am learning more and more each day. I started doing this because I figured that finding a technical co-founder is extremely hard and I have always been interested in web and app development, so why not learn... I was wonding whether someone could direct me? I want to be able to develop websites such as scan.me or gumroad.com (similar concepts). Which code stack are these websites generally made up of (e.g php, HTML CSS and java). I'm hoping to develop my own platform/concept in the future but I am just trying to get a general idea of the direction I am going down. Thanks, Paul Hi, I'm in the process of learning JavaScript. I picked up a "JavaScript for dummies" book at the library and it wasn't going too well. It was poorly written and made it difficult to understand things in the later chapter. What is the best online resource to learning JavaScript? Preferrably one that is good at explaining format ( I often find myself wondering if certain aspects in my script need ()'s or a "=" sign). For example, HTML has tags and that is what forms the mark up. I know JavaScript has multiple aspects (functions, objects), but I want an online resourcethat properly explains the format of these aspects. Thank you Hello all. I have been taking a JavaScript course on Udemy that while has been a very good course as far as I can tell, it has been short on practical exercises. Lots of examples, lots of showing different concepts and methods, etc, just short on the reinforcing and confidence building exercises. Thus, the point to my post here. I wish there were some kind of web developing club here locally but alas if you don't hunt, fish, drink or chew tobacco you are kind of left out, LOL. Well its not that bad, I make fun of it, but sometimes it seems so. At any rate, I'm looking for some kind of resource or something I can participate in that will help me use what I am learning and help me build some experience, etc. I want to get past the 'noob' stage as quickly as I can and as far as I know the quickest way to do that is to start coding even if its really simple stuff and working to more complicated coding. So, does anyone know of such resources? Thanks in advance for your time and help. Hi, as the title states, I'm trying to learn some basic javascript, more particularly, jQuery. I HATE having to "allow" active content to run on my IE browser. Is there a way to allow active content permanantly? Instead of having to click allow each time I refresh or reload my test pages? Also, IE keeps freezing or crashing when I run pages with scripts on them. Is this just my browser? or something to do with the active content permissions? Trying to google my questions, but no luck yet. Ello~ I was just wondering if ^^ anyone could look at this code and tell me where there are errors... or any suggestions so i could clean up the code a bit, so it would work :] that way i could figure it out Thank you for your time~ ^_^ Code: <html>
<head> <title> RETAKES </title>
<script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script>
<script type="text/javascript">
function TakeTest( )
// simulates a student's test taking by generating random values for the grades
// and allowing up to a certain number of retakes displaying the apropriate messages
// algorithm:
// set up: max num of retakes at 3 and passing grade at 70
// generate a random grade between 1-100 and
// IF equal or greater than the passing grade display "Your initial passing grade: ..."
// ELSE: setup the count of retakes at 0
// DO: increment the count for retakes
// generate a random grade between 1-100 and display "Your retake grade: " ..."
// WHILE: the retake count is less or equal to the max number of retakes AND the grade IS NOT a passing grade
// afterwards: either the iteration ended with a passing grade OR not, so check for which condition occurred
// IF after the retakes the grade is a passing grade then display "You Passed with a grade of: ... after ... retake(s)"
// ELSE display "You still failed after " ... " retakes."
{
var retake, passGrade, grade;
retake = 0;
grade = randomInt(1, 100);
passGrade = 70;
if (grade >= passGrade) {
document.getElementById("text").value = document.getElementById("text").value + "Your initial passing grade: " + grade;
}
else {
retake = 0;
do {
retake++;
grade = randomInt(1, 100);
document.getElementById("text").value = document.getElementById("text").value + "Your retake grade: " + grade;
while (retake <= 3 && grade != passGrade)
}
}
if (retake <= 3 && grade == passGrade) {
document.getElementById("text").value = document.getElementById("text").value + "You passed with a grade of " + grade + " after " + + " retake(s)";
}
else {
document.getElementById("text").value = document.getElementById("text").value + "You still failed after " + retake + " retake(s)";
}
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>Student Test taking simulation</h2>
<p> <input type="button" value="Take the Test" onclick="TakeTest()"> </p>
<p> <textarea id="text" rows="60" cols="25">READY TO GO!</textarea> </p>
</div>
</body>
</html>
I am currently trying to learn the <form> object. Now I have done some things within <form> like setting up text fields with submit buttons, etc.. But now on this part of the course it is showing properties I think, within the decleration of the <form> such as shown below Code: <FORM METHOD="POST" ACTION="/cgi-bin/correct.pl" onSubmit="return false;"> Could someone explain to me what that ACTION="/cgi-bin/corrct.pl" is for along with the onSubmit="return false;" ?? I'd like an explanation of the properties of <form> if you could please. Im trying to learn how to code but i'm not getting it can anyone help me with java? <3 -ButterFly<3 You know the deal: you have something (tooltip-like) that pops up on mouseover and disappears again on mouseout. But sometimes, the mouse moves too fast (speedy Gonzalez?), and the event doesn't get trapped. So your tooltip thingy stays popped, and doesn't go away till another mouseover-mouseout happens. Any suggestions for avoiding this scenario?
Hi all! I'm new to the forum and hope to get some help on how to make my javascript shorter then how its now. Now i have 8 functions doing the same thing, but i dont know how to make it to one function, if possible. I have worked much with PHP with the other code on the website, so if u have sugestions with that feel free to make them. It are working with some checkboxes, if u press the first checkbox u will get a textfield after every checkbox exept the first one. If u just press one checkbox u get a textfiled after that one. P.S. All the code bellow are working together. Javascript code Code: <script type="text/javascript">
function showHide1()
{
if(document.getElementById('64bitxref2').style.display == 'none')
{
document.getElementById('64bitxref2').style.display = '';
document.getElementById('64bitxref3').style.display = '';
document.getElementById('64bitxref4').style.display = '';
document.getElementById('64bitxref5').style.display = '';
document.getElementById('64bitxref6').style.display = '';
document.getElementById('64bitxref71').style.display = '';
document.getElementById('64bitxref72').style.display = '';
document.getElementById('64bitxref73').style.display = '';
document.getElementById('64bitxref8').style.display = '';
}
else
{
document.getElementById('64bitxref2').style.display = 'none';
document.getElementById('64bitxref3').style.display = 'none';
document.getElementById('64bitxref4').style.display = 'none';
document.getElementById('64bitxref5').style.display = 'none';
document.getElementById('64bitxref6').style.display = 'none';
document.getElementById('64bitxref71').style.display = 'none';
document.getElementById('64bitxref72').style.display = 'none';
document.getElementById('64bitxref73').style.display = 'none';
document.getElementById('64bitxref8').style.display = 'none';
}
}
function showHide2()
{
if(document.getElementById('64bitxref2').style.display == 'none')
{
document.getElementById('64bitxref2').style.display = '';
}
else
{
document.getElementById('64bitxref2').style.display = 'none';
}
}
function showHide3()
{
if(document.getElementById('64bitxref3').style.display == 'none')
{
document.getElementById('64bitxref3').style.display = '';
}
else
{
document.getElementById('64bitxref3').style.display = 'none';
}
}
function showHide4()
{
if(document.getElementById('64bitxref4').style.display == 'none')
{
document.getElementById('64bitxref4').style.display = '';
}
else
{
document.getElementById('64bitxref4').style.display = 'none';
}
</script>
html code (with possible php help) Code: <form method="post" action="index.php?id=2">
<table border="0">
<tr>
<td colspan="2">
<input type="text" name="search" value="<? echo $keyword; ?>" size="80" maxlength="250" />
<input type="submit" name="send" value="Sök">
<br />
</td>
</tr>
<tr width="100%">
<td>
<input id="checkbox1" type="checkbox" onClick="showHide1()" value="allt"/>
<label for="allt">Allt</label>
</td>
<td width="90%">
<input name="64bitxref1" type="text" value="" id="64bitxref1" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox2" type="checkbox" onClick="showHide2()" value="fotograf"/>
<label for="foto">Fotograf</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref2" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox3" type="checkbox" onClick="showHide3()" value="plats"/>
<label for="plats">Plats</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref3" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox4" type="checkbox" onClick="showHide4()" value="fritext"/>
<label for="fritext">Fritext</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref4" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
</table>
</form>
I hope the code could be to help i put in there, and thanks in advance. /Spikey An intranet site I've been working on is getting demo'd next week and I'm pretty proud of its functionality. It looks pretty good too but the biggest eyesore are the listboxes. The navigation column on the left of the page has 3 large listboxes, each one housing between a dozen and several hundred options related to employees, meeting rooms, etc. For that sort of directory functionality a listbox is pretty much the only way to go. The annoying part is that listboxes haven't really changed in 20 years. I sure wish IE supported listbox background images but since it doesn't I'm left with changing the border or changing the background color. I don't know if you've played with that but a listbox looks just as cheap with a mono blue, red, or purple background as it does with white Does anyone know some code for livening it up? Thanks. I have a search box on my website, that gets users from my database using php. And uses Javascript to display suggestions as the users type. What I'd like to be able to is to use the arrows to toggle down through the different suggestions. Any ideas how I would go about doing this? Here's the javascript part of the code: Code: function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
var response = http.responseText;
e = document.getElementById('results');
if(response!=""){
e.innerHTML=response;
e.style.display="block";
} else {
e.style.display="none";
}
}
}
Hi all How should I be doing this? I am trying to 'learn' how to set more than one value in a cookie. Then get them back out. Obviously i'm on the wrong track. These are my 'test' values: Code: var val = document.getElementById("yrname").value; //peterPan
var val1 = document.getElementById("password").value; //tinkerBell
//send to create cookie factory
createCookie("inbed", val + '~' + val1, "1");
Then from url : alert(cookie) I get: inbed=peterPan~tinkerBell So far so good (well what I expected anyway) now using this function I completely lose tinkerBell. she was inbed with peterPan. Code: function readCookie(name) //name is passed in
{
var cookies = document.cookie.split(/~/g); //split at ~
//alert(cookies);
//results:
//cookies: inbed=peterPan,tinkerBell
//cookies[0]: mytestcookie=peterPan
// cookies[1]: tinkerBell //the last sighting
var arg = name + "=";
for ( var c = 0; c < cookies.length; ++c ) //iterate through the cookie
{
var ck = cookies[c]; //cookie array into an var
//alert(ck); //inbed=peterPan (no tinkerBell -- not what I expected!
//basically i'm now lost!!!
//I don't get what happened to tinkerBell .
if ( ck.indexOf(arg) == 0 )
//if the array at the index of arg 'name=' equal to position 0.
{
var temp = ck.split(/=/); //split the cookie array at =
//alert(temp); //inbed=peterPan
//alert(temp[0]); //inbed
//alert(temp[1]); //peterPan
,
return decodeURI(temp[1]) //bring back array 1
}
}
return "";
}
help on how I should be doing this much appreciated LT Ok guys, i am starting from he http://www.javascriptkit.com/javatutors/primer5.shtml Code: <script type="text/javascript">
var example
example=document.lastModified
document.write("This page was last modified: "+example)
</script>
I am having trouble understanding an actual situation which may require the above coding, can anyone give an example please? Hi there! I'm obviously new to the forums here and don't really know if this is the right place to get help. I've made a small game in an HTA file using JavaScript and HTML (don't laugh, this was a serious learning project for me). The problem I'm having is that, after running the game for a while (having played, like to level 10 say), the HTA begins to slow down HORRIBLY. By level 10, it's almost unplayable... it takes like 3 seconds to register a button click. My messy code is below (yes, it's the entire game... I know it's huge). I don't really care that the math is horrible in calculating hit points and damage and whatnot. All I want to know is, why the hell does this slow down? Any help would be greatly appreciated. (obviously, rename the text file to .hta or .html to load it) As it is, I'm using Walter Zorn's JS Graphics Library in an attempt to write a small screensaver-type-thing for jailbroken iPhones/iPod touches. However, on my mom's AMD Athlon 64 3000+, the drawing gets pretty laggy, so you can imagine how utterly choppy it is on my iPod. The look I'm going for is the Windows XP Mystify screen saver, with corners bouncing around the screen. So, my first question is this: are there any alternatives for this sort of thing, short of manually generating a video, gif, or multiple images to switch through, or is there any way to make my code more efficient for the CPU? (Code below) NOTE: I know I could make it look a lot nicer by making a 'corner' class, and having each corner be an object (and even nicer by using an array of 'corners'). But I'm not sure that would help the CPU's calculations much, and make the code more efficient as a whole. Code: <div id="Mystify">
<script type="text/javascript">
var mystifyCanvas = new jsGraphics("Mystify");
var tetraCorner1x = Math.floor(Math.random()*300) + 5;
var tetraCorner1y = Math.floor(Math.random()*460) + 5;
var tetraCorner2x = Math.floor(Math.random()*300) + 5;
var tetraCorner2y = Math.floor(Math.random()*460) + 5;
var tetraCorner3x = Math.floor(Math.random()*300) + 5;
var tetraCorner3y = Math.floor(Math.random()*460) + 5;
var tetraCorner4x = Math.floor(Math.random()*300) + 5;
var tetraCorner4y = Math.floor(Math.random()*460) + 5;
go1x = true;
go1y = false;
go2x = true;
go2y = true;
go3x = false;
go3y = true;
go4x = false;
go4y = false;
function MystifyJavaScript()
{
mystifyCanvas.clear();
mystifyCanvas.setColor("#ff0000");
mystifyCanvas.setStroke(2);
if (go1x)
{
tetraCorner1x++;
if (tetraCorner1x > 315)
{
go1x = false
}
}
else
{
tetraCorner1x--;
if (tetraCorner1x < 5)
{
go1x = true
}
}
if (go1y)
{
tetraCorner1y++;
if (tetraCorner1y > 475)
{
go1y = false
}
}
else
{
tetraCorner1y--;
if (tetraCorner1y < 5)
{
go1y = true
}
}
if (go2x)
{
tetraCorner2x++;
if (tetraCorner2x > 315)
{
go2x = false
}
}
else
{
tetraCorner2x--;
if (tetraCorner2x < 5)
{
go2x = true
}
}
if (go2y)
{
tetraCorner2y++;
if (tetraCorner2y > 475)
{
go2y = false
}
}
else
{
tetraCorner2y--;
if (tetraCorner2y < 5)
{
go2y = true
}
}
if (go3x)
{
tetraCorner3x++;
if (tetraCorner3x > 315)
{
go3x = false
}
}
else
{
tetraCorner3x--;
if (tetraCorner3x < 5)
{
go3x = true
}
}
if (go3y)
{
tetraCorner3y++;
if (tetraCorner3y > 475)
{
go3y = false
}
}
else
{
tetraCorner3y--;
if (tetraCorner3y < 5)
{
go3y = true
}
}
if (go4x)
{
tetraCorner4x++;
if (tetraCorner4x > 315)
{
go4x = false
}
}
else
{
tetraCorner4x--;
if (tetraCorner4x < 5)
{
go4x = true
}
}
if (go4y)
{
tetraCorner4y++;
if (tetraCorner4y > 475)
{
go4y = false
}
}
else
{
tetraCorner4y--;
if (tetraCorner4y < 5)
{
go4y = true
}
}
mystifyCanvas.drawLine(tetraCorner1x, tetraCorner1y, tetraCorner2x, tetraCorner2y);
mystifyCanvas.drawLine(tetraCorner2x, tetraCorner2y, tetraCorner3x, tetraCorner3y);
mystifyCanvas.drawLine(tetraCorner3x, tetraCorner3y, tetraCorner4x, tetraCorner4y);
mystifyCanvas.drawLine(tetraCorner4x, tetraCorner4y, tetraCorner1x, tetraCorner1y);
mystifyCanvas.paint();
window.setTimeout("MystifyJavaScript()", 10);
}
MystifyJavaScript();
</script>
</div>
Please keep in mind, there's a LOT of repeat code, so you only have to read any one part once. To test/see/use the code, you'll need to download wz_graphics.zip. Then download the attached txt file to the same directory as the unzipped wz_graphics, change it to .html instead of .txt, and open it. I have no js experience or coding experience of any kind other than the last few hours of reading a book called 'object-oriented javascript', and all was well until loops. firstly, this is how he teaches the while loop... var i = 0; while (i <10) {i++;} which results in 9 we move on to for loops... var res =''; for( var i = 0; i <10; i++) {res += 'sometext' ;} which repeats, but I'd like to be able to make that into a sequence of numbers... 123456789. how do I do that? thanks. Hello, I have an existing php contact form which incorporates php validation (required name with only characters, valid email address format, and minimum message length) and re-captcha. I would like to add some "real time" validation to the fields on my form (there are 3 fields - name, email and message) before the "Submit" button is pressed. For example when the user tabs from one text box to the next but hasn't filled in the required information. I am totally new to any type of java, but am I right in thinking I need either JavaScript, Ajax or JQuery to perform real-time validation? If so, which should I be looking into and are there any basic examples of form validation? I want to keep my pup validation as I'm aware that php is client-side but still needed as people can turn Java off in their web browsers. Any tips and pointers will be very much appreciated! Thankyou, Tom |
|||||||