Tuesday, July 27, 2010

parseInt() Function, JavaScript

You can use the parseInt(), Function from JavaScript to  parse a string / variable or other value and get in return an integer.
In the example below, you will see a practical application of this built in Function.

Syntax:
parseInt("String" or VariableName)

See the example below.









<script type='text/javascript'>
var b='34.54354'
var t='11 at this table.'

document.write('This example uses parseInt() Function and returns' + '<hr>' +parseInt(b) +'<hr>')

document.write('This example does not and returns' + '<hr>' + b +'<hr>')
document.write('This example uses parseInt() Function and returns' + '<hr>' +parseInt(t) +'<hr>')
document.write('This example uses parseInt() Function and returns' + '<hr>' +t)

</script>






Tuesday, July 20, 2010

JavaScript, match() Method

The match(), Method from JavaScript it's used to find a match between a String or Regular Expression and a String and returns the matches, (could be an array or just one match, depending on the given instructions and the content of the string), or null if none it's found. In the example below, you'll see a practical application of this Method.

Syntax:
string.match(/RegExp/ or "String")

See the example below.









<script type='text/javascript'>
var h='Who do you LOVE more?'

document.write(h.match(/o/gi))
</script>



In this Script the the match() method returns the an array of "o" letter.


Friday, July 16, 2010

toggleClass(), jQuery

The toggleClass(),  from jQuery adds or removes the specified class. In the example below, you'll see a practical application.

Syntax:
selector.toggleClass("ClassName")

See the example below.









<head>
<style type='text/css'>
.line{
color:orange;
font-weight:bold;
border:solid 1px green;
}

.alter{
color:white;
font-style:italic;
border:solid 2px blue;
background:orange;
}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var num=0
$('.line').click(function(){
$(this).toggleClass('alter')

})


})

</script>
</head>

<body>
<p class='line'>Click! This is the first Line...</p>
<p class='line'>Click! This is the second Line..</p>
<p class='line'>Click! This is the third Line..</p>
<p class='line'>Click! This is the fourth Line..</p>
</body>
</html>




Click on of the lines once, twice...and see what happens.








Click! This is the first Line...
Click! This is the second Line..
Click! This is the third Line..
Click! This is the fourth Line..


Thursday, July 15, 2010

replace(), JavaScript Method

The replace(), Method from JavaScript has various uses. In the example below, you'll see a practical application of this Method.

Syntax:
string.replace("WhatToReplace","Replacement")

See the example below.









<head>
<style type='text/css'>


</style>

<script type='text/javascript'>
function inlocuiesc(){
tre=document.getElementById('inl').value
var guc=tre.replace(/s/g,"WOW")
document.getElementById('inl').innerHTML=guc

}

</script>
</head>

<body>
<textarea id='inl' cols='32' rows='8'>this frienship is special to us...</textarea><br>
<input type='button' value='Replace' onclick='inlocuiesc()'>
</body>
</html>




When you will click the Replace button, the "s" letter will be replaced by "WOW".








Wednesday, July 14, 2010

removeAttr(), jQuery

Html Tags can have various Attributes.  You can use removeAttr() Method from jQuery to to remove one or more attributes .

Syntax:
$("Selector").removeAttr("AttributeName");

See the example below.









<head>
<style type='text/css'>


</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#da').click(function(){
$('a').removeAttr('title')
})

})

</script>
</head>

<body>
<a href='http://interactivefrench.blogspot.com/' title='Learn French Language Free and Interactively'>Free French</a>
<br>
<button type='button' id='da'>Click to Remove Title Attribute</button>
</body>
</html>




By positiong the mouse over the link a description will appear,(Tittle attribute). After you click the button, the description will disappear.



Free French




Thursday, July 8, 2010

jQuery, class Selector

You create a Html Tag and with jQuery you can manipulate it.

Syntax:
$(".className").css(propertyName', 'propertyValue');

See the example below.









<html>
<head>
<style type='text/css'>


</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.fer').css('width','220px').css('height','110px')
.css('border','outset 6px red').css('background','green')

})
</script>
</head>

<body>

<div class='fer'>This is a div tag with a class</div><br>
<span>This is a span tag not affected by jQuery</span>
<p>This is a p tag not affected by jQuery</p>
</body>
</html>








This is a div tag with a class


This is a span tag not affected by jQuery

This is a p tag not affected by jQuery


jQuery, element / Html Tag Selector

You create a Html Tag and with jQuery you can manipulate it.

Syntax:
$("element / Html TagName").css(propertyName', 'propertyValue');

See the example below.









<html>
<head>
<style type='text/css'>


</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('div').css('width','220px').css('height','110px')
.css('border','inset 6px aqua')

})
</script>
</head>

<body>

<div>This is a div tag </div><br>
<span>This is a span tag not affected by jQuery</span>
<p>This is a p tag not affected by jQuery</p>
</body>
</html>





This is a div tag


This is a span tag not affected by jQuery
This is a p tag not affected by jQuery