Menu
I'm getting more into jQuery and so have set up a HTML/Javascript/CSS base site which I use for all my tests.
Since these tests will eventually turn into PHP and ASP.NET MVC websites, I want to use this opportunity to get the basics down right again for modern browsers and web standards before building the scripting languages on top of it.
I've selected to use:
Is there anything else I need to consider?
Here is an example of one of my test websites:
index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Text XHTML Page</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="javascript/main.js"></script>
</head>
<body>
<h1 class="highlightTitle">Text</h1>
<p class="main">First</p>
<p>Second</p>
<p id="selected" class="regular">Third</p>
<p>Fourth</p>
<form action="">
<div>
<input type="button" value="highlight it" onclick="highlightIt();countThem()" />
<input type="button" value="highlight title" onclick="highlightTitle()" />
<p>here is another paragraph</p>
</div>
</form>
</body>
</html>
main.cs:
p.highlighted {
background-color:orange;
}
h1.highlightTitle {
background-color:yellow;
}
h1.deselected {
background-color:#eee;
}
p.regular {
font-weight: bold;
}
main.js:
google.load("jquery", "1.3.2");
function highlightIt() {
$('#selected')
.toggleClass('highlighted');
}
function countThem() {
alert("there are " + $("p.main").size() + " paragraphs");
}
function highlightTitle() {
$("h1").toggleClass("deselected");
}
373
1. Adobe Dreamweaver. Adobe Dreamweaver is a web design software tool that allows you to edit HTML, CSS, and JavaScript code in a live environment. You can see your changes as you make them in the tool's preview pane and save them automatically as you go.
HTML and CSS are relatively 'old' coding languages. However, they are still highly relevant for coders in 2022. Knowledge of HTML and CSS not only helps professional programmers, but also helps individuals in a variety of professions by giving them basic web page development knowledge.
Overall, yes — developers do still code HTML and CSS by hand, but we definitely feel that there are times when this is more appropriate than others. One of the benefits of website themes and templates is the ability to massively reduce the time spent in code for site builders and web developers.
Ideally you'll learn HTML first, then CSS, and then finish with JavaScript, as they build on each other in that order.
Personally I would bind to the click event via jQuery to ensure nice separation, like this:
$("#yourId").bind("click", highlightIt);
This way you can bind to multiple event handlers. If you just use onclick AFAIK you can only ever use one handler.
BTW you can also use custom event and event namespaces:
$("#yourId").bind("beforeHighlighting", doSomething);
is triggered by
$("#yourId").trigger("beforeHighlighting");
and
$(".hasAHelptext").bind("helptext.click", showHelptextFct);
$(".hasAHelptext").bind("click", otherFct);
// will only remove the showHelptextFct event handler
$(".hasAHelptext").unbind("helptext.click");
HTH Alex
163
Move the <script> blocks to the bottom of the page.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
