|
JavaScript - Just Wanting Your Personal Opinion
Been working my *** off on this for a few days trying to keep updating it to make it most efficient with everything I learn... I'm quite proud of it so far considering I'm not actually the best coder lol most JS and PHP confuses the crap outa me unless I do it from scratch.
So anyways here is the link. Tell me what you think. Suggestions would be amazing. I'd love to know what I screwed up as long as you explain in detail as to why and how to fix it. I really hate when people hand me a huge snippet and expect me to understand it -_- Thanks Shelby LINK http://opentech.durhamcollege.ca/~in...rittains/labs/ (Its an interface to display my school web design labs... the interface it self has almost NOTHING to do with school work as my labs are mostly based off php and we don't even touch JS till the third year =[ so its safe ^.^ so don't worry I'm not asking you to do my school work ^.^) Similar TutorialsI have been trying to learn javascript for the last few weeks and have come to a brick wall in my thinking. Could you look at this code and tell me where I am going wrong? I would prefer for you to point out what type of an issue I have and the basic syntax of what I am trying to do. This enables me to look at the problem, digest the type of problem and put together an idea of the way to fix the code. my code (with errors on purpose) Code: <html> <head> <title> <script type=text/javascript src=blah.js></script> </head> <body> (and so on) The response type of response I would like to see is - (from the helper) check to see if you have closed all your lines with the </sectiontype> you need to double check your format on line 4. The correct format would be <script type="type of script" and the src="scriptname.js">. I really appreciate any help you can provide. I just cannot figure a few things out and am getting confused as to how to fix my problems. Code: <!DOCTYPE html>
<html>
<head>
<title>The Italian Job</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" > //src="italianjob.css">
//Set up array that represent the car storage space in cubic inches
var car_type = new Array();
car_type["2door"]=41446;
car_type["4door"]=52776;
//Set up array that represents the metal_type weight
var metal_type= new Array();
metal_type["selectmetal"]=0;
metal_type["Aluminum"]=4.3512;
metal_type["Gold"]=30.9912;
metal_type["Platinum"]=34.09692;
metal_type["Silver"]=16.8276;
// getCarStorage() finds the storage based on the car storage space.
function getCarStorage()
{
var carStorageArea=0;
//refers form id="carForm"
var theForm = document.forms["carForm"];
var selectedCar = theForm.elements["selectedCar"];
//Here since there are 2 radio buttons selectedCar.length = 2
//We loop through each radio buttons
for(var i = 0; i = selectedCar.length; i+)
{
//if the radio button is checked
//if(selectedCar[i].checked)
{
//by using the car_type array
//We get the selected item value such as car_type["4door".value]"
carStorageArea = car_type[selectedCar[i].value];
//If we get a match then we break out of this loop
break;
}
}
//We return carStorageArea
return carStorageArea;
}
//This function finds the metal bar weight
function getMetalDensity()
{
var carStorageSpace=0;
//Get a reference to the form id="carForm"
var theForm = document.forms["carForm"];
//Get a reference to the select id="metal"
var selectedmetal = theForm.elements["metal"];
//equal to value user chose such as metal_type["Aluminum".value] would be equal to 4.3512
carStorageSpace = metal_type[selectedmetal.value];
//finally we return carStorageSpace
return carStorageSpace;
}
function calculateTotal();
{
//Here we get the total by calling our function
//Each function returns a number
var carUsed = getCarStorage() / 440;
var howMany = carUsed * .33;
var fit = car_type / 44.4;
var weightBars = 1800 / metal_type;
var total = weightBars * metal_type;
var barLimit = carUsed - howMany;
var weightLimit = howMany - weightBars;
var divobj = document.getElementById('total');
if (barLimit <0)
{
document.write("<This will not work.");
}
else if (weightLimit <0)
{
document.write("This will not work.");
}
else
respond = 'With the total cargo area of the chosen car, you are able to fit ' +carUsed.toFixed(0) +
' bars in it. Due to weight limit of 1800 lbs, you are limited to ' + weightBars.toFixed(0) +
' bars in the cargo area. The weight of the bars you want to have onboard the car is ' + total.toFixed(2) +
' \n';
return respond}
</script>
</head>
<body style="background-color:burlywood" > <!-- onload="hideTotal()" -->
<p>In <em>The Italian Job</em>, theives were able to steal bars of gold by loading them into Mini Coopers and driving away.</p>
<p>
It is now your turn to pull your own version of <em>The Italian Job</em>. You are able to choose what model of Mini you use and the type of metal bar you want to steal.
Thes rules a
<ul>
<li>You can only load the cargo area of your Mini 1/3 of the way full</li>
<li>The cargo area used cannot weigh more than 1800 lbs.</li>
</ul>
<form id="carForm" onsubmit="return false;">
<label>What car do you want to use?</label>
<br />
<label class="radiolabel">
<input type="radio" onclick="calculateTotal()" value="2door" name="selectedCar" />
2 Door Mini - 25.4 cubic inches of cargo space
</label>
<br />
<label class="radiolabel">
<input type="radio" onclick="calculateTotal()" value="4door" name="selectedCar" />
4 door Mini - 35 cubic inches of cargo space
</label>
<p>Now you get to choose which metal you wish to steal.
</p>
<select id="metal" onchange="calculateTotal()" name="metal">
<option value="selectmetal">Select the metal bar type</option>
<option value="Aluminum">Aluminum</option>
<option value="Gold">Gold</option>
<option value="Platinum">Platinum</option>
<option value="Silver">Silver</option>
</select>
<br />
</form>
<div id="total" style="display: selectmetal;">
</div>
</body>
</html>
So I'm picking up on a project that was left off by another developer. He developed the search engine for this website using mustache.js as a templating plugin. However, I have this giant if/else statement in the Javascript to implement it in the template.. but it's ugly in my opinion so I'm curious on if anybody has a better way of going about this. Here is my template in the view: Code: <script id="search_result_item" type="x-tmpl-mustache">
<div id="Box_Book1" class="clearfix search-result-item">
<a href="{{encore_url}}">
<img id="Image1" src="{{ image_url }}" onerror="this.src = 'http://origin.syndetics.com/index.php?upc=x/MC.gif&client=stlip&type=hw7';" class="image {{material_type}}" />
<span class="{{ label_class }}">{{ label_text }}</span>
</a>
<div class="title-container">
<span id="textspan5" class="more-details">
<a href="{{ encore_url }}" target="_blank">+ More Details</a>
</span>
<div class="text-title1-container">
<p class="title">
{{ title }}
</p>
</div>
</div>
<p id="Text_Author1">
{{ author }}<br />
</p>
</div>
</script>
Here is my Javascript that is rending into the template: Code: // this is gnarly i know..hopefully temporary
var item_type = result.material_type;
var label_class;
var label_text;
// This needs rewritten too once search is written in different format
if(item_type == 'z')
{
// EBook
label_class = 'ebook';
label_text = 'EBook';
}
else if(item_type == 'w')
{
// EAudio
label_class = 'eaudio';
label_text = 'EAudio';
}
else if(item_type == 'x')
{
// EVideo
label_class = 'evideo';
label_text = 'EVideo';
}
else if(item_type == 'h')
{
// EMagazine
label_class = 'emag';
label_text = 'EMag';
}
var css_image_class = args.material_type;
if (css_image_class == '24_7_online_library') {
css_image_class = 'online_library';
}
var template_args = {
'image_url' : image_url,
'error_image_url' : error_image_url,
'author' : result.author,
'title' : result.title,
'year' : '(' + result.year + ')',
'encore_url' : encore_url,
'material_type' : css_image_class,
'label_class' : label_class,
'label_text' : label_text
};
div.html(Mustache.render(result_item_template, template_args));
Thank you for any ideas on how to make it prettier.. the item_type is what's terrifying ugly to me. Visitors enter information in textarea's and form fields and I wish to allow them to have this spell checked before submitting. What methods are open to me to do this. Hi, I managed to make a jquery drop down navigation system. I'm needing an opinion on the code as I suspect it could be alot cleaner and more efficient. A couple of niggling usability problems bug me - when a main link is in its active state and it is clicked on again it will slide up and then down again - I'd prefer it if it just stayed down and didn't move anywhere. The major thing that bugs me is if you think it breaks usability etiquette becuase the buttons move everywhere. If you think this is the case I will not use it. I understand there are forums for usability testing but if anyone has their opinions I'd be happy to hear them. You can view the navigation system he http://www.jrcreativedesign.co.uk/nav.html Thanks very much for your time and consideration. |
|||||||