Posts Tagged ‘Scripting language’

DebuggingPHP a well-known scripting language used for web development or we can say PHP is the most used scripting language in today’s web industry. Even most of popular CMSs are also developed and support PHP which makes PHP more popular as well. As the users increases respectively (to use PHP language for web development) there is need of PHP debuggers also increase. Because everyone wants that their code should be fine and error free. Debugger tool helps you in debugging errors in web applications and scripts by which makes innovative web development easy. In This post I have mentioned top 10 widely used PHP debuggers by developer, have a look.

Read More »

Object-Oriented Programming Influence Graph

In this article you learn the basics of JavaScript and create your first JavaScript program.

What is Object Oriented Feature
The ASP.NET and Visual Studio 7.0 are making important contributions to improvement of the web development experience. Unfortunately, this is also a tendency created among developers to limit their interaction with JavaScript. it is Clearly JavaScript is valuable for adding client-side functionality to the web pages. However the ASP.NET programming models suggest that developers produce page layout while emitting client-side JavaScript from ASP.NET controls. As a consequence, this model tends to limit JavaScript to procedural adjuncts. This is rather unfortunate because it severely limits the power of an object-oriented scripting language that developers can be use to write rich and reusable client-side components. JavaScript  object oriented will be presented in a series of  three type article. The first installments provided background on  JavaScript supports the main principles of object-oriented programming. The second  part demonstrates how JavaScript constructs can be used to build a class inheritance framework and write scripts supporting in JavaScript class hierarchy. The third and final installment  to use the JavaScript class framework to build object-oriented client-side abstractions of ASP.NET user controls.

There are Some reasons of way JavaScript Object Oriented Capability are not utilized:
There are tendency of client-side operations to be discrete favorite procedures.
The ASP.NET programming model are controls suggests limiting JavaScript to the functional adjuncts.
Legacy JavaScript lacked key features such as exception handling and inner functions and JavaScript its supported for object- oriented programming .
 

 Example:

<html>
<head>
<Script language=”JavaScript”>
function MyClass()
{
this.myData = 10;
this.myString = “my frist program”;
}
var myClassObj1 = new MyClass();
var myClassObj2 = new MyClass();
myClassObj1.myData = 20;
myClassObj1.myString = “Obj1: my second program”;
myClassObj2.myData = 30;
myClassObj2.myString = “Obj2: last program”;
alert( myClassObj1.myData );
alert( myClassObj1.myString );
alert( myClassObj2.myData );
alert( myClassObj2.myString );
</script>
</head>
</body>
</html>

Object-Oriented Programming
The Object Oriented programming is a computer programming paradigm. Object Oriented programming is that computer program may be seen as comprising a collection of individual units and objects, that is on each other, as opposed to a traditional view in which a program may be seen as a collection of functions or procedures, or simply as a list of instructions to the computer. Each object is capable of receiving messages, processing data, and sending messages to other objects. The Object-oriented programming is claimed to promote greater flexibility and maintains in programming, and is widely popular in large-scale software engineering. Further the more proponents of OOP claim that Object-Oriented programming  is easier to learn  those new to computer programming than previous approaches and that the OOP approach is often simpler to develop and to maintain, lending itself to more direct analysis or coding, and understanding of complex situations and procedures than other programming methods.

Object:
The Object an instance of a class and object is the run-time manifestation of a particular exemplar of a class. The class of dogs which contains breed types, an acceptable exemplar would only be the subclass ‘collie’; “Lassie” would then be an object in that subclass. Each object has own data, though the code within a class a subclass or an object  may be shared for economy. Thus, object-oriented languages must allow code to be reentrant. 

Encapsulation
The Object-Oriented program using the myclass as defined permits accessibility of its internal data representation as well as this methods and variable names global in scope increasing the risk of name collisions. The Object-Oriented program Encapsulation supports data hiding and the concept of viewing objects as self-contained entities providing services to consumers. The principle of information hiding is the hiding of  The design decisions in a computer program that are most likely to change, thus protecting other parts of the program from change if the design decision is changed. Protecting is a design decision involves providing a stable interface which shields the remainder of the program from the implementation . Encapsulation is a  modern programming languages of  the principle of information hiding itself in a number of ways, including encapsulation and polymorphism.

Example: 

<html>
<head>
<Script language=”JavaScript”>
function MyClass()
{
var m_data = 15;
var m_text = “indian”;
this.SetData = SetData;
this.SetText = SetText;
this.ShowData = DisplayData;
this.ShowText = DisplayText;
function DisplayData()
{
alert( m_data );
}
function DisplayText()
{
alert( m_text );
return;
}
function SetData( myVal )
{
m_data = myVal;
}
function SetText( myText )
{
m_text = myText;
}
}
var Obj1 = new MyClass();
var Obj2 = new MyClass();
Obj1.SetData( 30 );
Obj1.SetText( “Obj1: my cuntry” );
Obj2.SetData( 60 );
Obj2.SetText( “Obj2: my first javaScript progarm” );
Obj1.ShowData();
Obj1.ShowText();
Obj2.ShowData();
Obj2.ShowText();
</script>
</head>
</body>
</html>

One of the most handy (and cool) tricks a web developer could learn to use is collapsible DIVs. This allows you to make a page that will only show the user what they want to see. If they’re interested in some part of content, such as a “mail to friend” or an expanded definition, they could click a link or image and make the page dynamically grow in size to show that added bit of content.

This was inspired by some comments in a post on Aaron’s SEO Buzz Box, and while I think he might be looking for a slightly more advanced solution, it gave me the idea to type up this post.

There’s a few different bits of code we’ll use in this. First we’ll create a div we want to expand or contract. For example:

mydiv” style=”display:none”>

This is a test!
Can you see me?

Notice our tagging the div with a unique id. This allows our Javascript to be able to find it when we alter it’s visibility. We also added a style property, setting it’s display attribute to “none”, which makes that DIV hidden when the page loads originally.

Next we’ll create a link with some inline Javascript to hide or show our div. It’s quite a bit to take in at once, but don’t worry I’ll explain it in depth in a second. Here it is:
mydiv').style.display == 'none'){ document.getElementById('mydiv').style.display = 'block'; }else{ document.getElementById('mydiv').style.display = 'none'; }">Toggle Div Visibility Whew! It’s so complicated because it’s done with inline Javascript. I’ll show an alternate method that’s much cleaner a bit later. But first, let’s tackle this. It’s a simple anchor tag, but you’ll notice the href is “javascript:;”. The purpose of this is to basically do nothing. You don’t want to direct to any other page, and if you put everything in the onmousedown property in the href property, it would work the exact same, but the user would see a mess of javascript in his status bar when he moused over the link, so this keeps it cleaner. Another common do-nothing insert to use for the href property is a pound sign (#), and while that will work, it’ll also move the user’s scroll bar to the very top of your website, which can get quite annoying.

Note, the following explanation is very detailed and assumes virtually no knowledge of Javascript… so if this seems basic to you, feel free to skip it.

Now, we have the href property clean so there’s nothing ugly in the status bar on mouseover, but we still need to actually do the hiding or showing of the div. We call this through the onmousedown property of the anchor tag. We can find the DIV we created earlier by document.getElementById(‘mydiv’), so we decide to first check if it’s already visible or hidden by running a simple if-statement of if(document.getElementById(‘mydiv’).style.display == ‘none’){. If this returns true, meaning the display property is set to none (hidden), we continue past the first bracket and change it’s display property to “block”, which means visible. This will also create a line break before and after our div, so if you want it to appear in the middle of your text or other content, without line breaks, change “block” to “inline”. Following that setting statement, we have our else block, which it run if the first clause isn’t met (the display is NOT set to ‘none’). If it’s not set to none, we assume the div is visible, so we toggle it and hide the div, setting it’s display property to “none” (hidden) again.

An alternative which is a bit cleaner than that inline anchor tag (above) is creating a javascript function for toggling the DIV’s visibility. For this method, use the following anchor tag:
mydiv');">Toggle Div VisibilityThis anchor tag behaves like the above inline javascript, except instead of executing the change in the anchor tag itself (inline), it instead calls the toggleDiv function, passing the div name as a parameter.

This anchor tag above calls the following function. Simply insert this text (the function) somewhere in your document above the link in the body tag, or in the HEAD tag of the HTML itself:
<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
This function does exactly what the above inline javascript does, only it’s a bit cleaner. When it’s called by the anchor tag, it checks the div with the name passed to see if it’s currently not visible (display set to “none”), and if so, it shows it by changing the display to “block”. If the original if statement fails (display is not set to “none”), then it assumes the DIV is visible and hides it again (sets the display property to “none”).

Finally, here’s an example of it in action:

Toggle Div Visibility

Also note, search engines WILL read and index the content in these DIVs, so don’t worry about using collapsible DIVs hurting your SEO.