JavaScript

, , , No comments

JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform.


<html>
   <body>
  
      <script language="javascript" type="text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>
     
   </body>
</html>

What is JavaScript ?

Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.
·        JavaScript is a lightweight, interpreted programming language.
·        Designed for creating network-centric applications.
·        Complementary to and integrated with Java.
·        Complementary to and integrated with HTML.
·        Open and cross-platform

Client-side JavaScript

Client-side JavaScript is the most common form of the language. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-side scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid, they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user initiates explicitly or implicitly.

Advantages of JavaScript

The merits of using JavaScript are −
·        Less server interaction − You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
·        Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something.
·        Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
·        Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language. It lacks the following important features −
·        Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
·        JavaScript cannot be used for networking applications because there is no such support available.
·        JavaScript doesn't have any multithreading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages.

JavaScript Development Tools

One of major strengths of JavaScript is that it does not require expensive development tools. You can start with a simple text editor such as Notepad. Since it is an interpreted language inside the context of a web browser, you don't even need to buy a compiler.
To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Some of them are listed here −
·        Microsoft FrontPage − Microsoft has developed a popular HTML editor called FrontPage. FrontPage also provides web developers with a number of JavaScript tools to assist in the creation of interactive websites.
·        Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very popular HTML and JavaScript editor in the professional web development crowd. It provides several handy prebuilt JavaScript components, integrates well with databases, and conforms to new standards such as XHTML and XML.
·        Macromedia HomeSite 5 − HomeSite 5 is a well-liked HTML and JavaScript editor from Macromedia that can be used to manage personal websites effectively.

Where is JavaScript Today ?

The ECMAScript Edition 5 standard will be the first update to be released in over four years. JavaScript 2.0 conforms to Edition 5 of the ECMAScript standard, and the difference between the two is extremely minor.
Today, Netscape's JavaScript and Microsoft's JScript conform to the ECMAScript standard, although both the languages still support the features that are not a part of the standard.

JavaScript can be implemented using JavaScript statements that are placed within the <script>... </script>.
You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these tags as a script. A simple syntax of your JavaScript will appear as follows.
<script ...>
   JavaScript code
</script>
The script tag takes two important attributes −
·        Language − This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.
·        Type − This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript".
So your JavaScript segment will look like −
<script language="javascript" type="text/javascript">
   JavaScript code
</script>

Your First JavaScript Script

Let us take a sample example to print out "Hello World". We added an optional HTML comment that surrounds our JavaScript code. This is to save our code from a browser that does not support JavaScript. The comment ends with a "//-->". Here "//" signifies a comment in JavaScript, so we add that to prevent a browser from reading the end of the HTML comment as a piece of JavaScript code. Next, we call a function document.write which writes a string into our HTML document.
This function can be used to write text, HTML, or both. Take a look at the following code.
<html>
   <body>
      <script language="javascript" type="text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>
   </body>
</html>
This code will produce the following result −
Hello World!

Whitespace and Line Breaks

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You can use spaces, tabs, and newlines freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand.

Semicolons are Optional

Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if each of your statements are placed on a separate line. For example, the following code could be written without semicolons.
<script language="javascript" type="text/javascript">
   <!--
      var1 = 10
      var2 = 20
   //-->
</script>
But when formatted in a single line as follows, you must use semicolons −
<script language="javascript" type="text/javascript">
   <!--
      var1 = 10; var2 = 20;
   //-->
</script>
Note − It is a good programming practice to use semicolons.

Case Sensitivity

JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
So the identifiers Time and TIME will convey different meanings in JavaScript.
NOTE − Care should be taken while writing variable and function names in JavaScript.

Comments in JavaScript

JavaScript supports both C-style and C++-style comments, Thus −
·        Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
·        Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
·        JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a single-line comment, just as it does the // comment.
·        The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->.

Example

The following example shows how to use comments in JavaScript.
<script language="javascript" type="text/javascript">
   <!--
   
      // This is a comment. It is similar to comments in C++
   
      /*
      * This is a multiline comment in JavaScript
      * It is very similar to comments in C Programming
      */
   
   //-->
</script>




Share:
Read More

HTML5 & CSS3 Questions

, , , , No comments
HTML & HTML5 Questions

Q. What is HTML?
HTML stands for HyperText Markup Language. It is the most popular markup language for creating websites that can be viewed in a web browser.

Q. What is the difference between HTML elements and tags?
HTML elements communicate to the browser how to render text. When surrounded by angular brackets <> they form HTML
tags, which come in pairs and surround text.

Q. What does DOCTYPE mean?
The term DOCTYPE means Document Type Definition and tells the browser which type of HTML is used on a webpage. Browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE will load your page in Quirks Mode.

Q.What are the limitations when serving XHTML pages?
The main limitation is the poor browser support of XHTML. Internet Explorer and other user agents cannot parse XHTML as XML. Thus, it is not that extensible language as one might think.

Q. What is the syntax difference between a bulleted list and numbered list?
Bulleted lists use the <ul> tag, which stands for “unordered,” whereas <ol> is used to create an ordered list.

Q. What is the difference between a <div> and a <frame>?
A <div> is a container element for grouping and styling, whereas a <frame> creates divisions within a web page and should be
used within the <frameset> tag. The use of <frame> and <frameset> are no longer popular and are now being replaced with the more flexible <iframe>, which has become popular for embedding elements from other websites (ie. Youtube videos) into a page.

Q. What is the difference between the application model of HTML and HTML5?
There is not a big difference between the two. HTML5 is a continuum of HTML. There has been no major paradigm shift. From a broader viewpoint, HTML was a simple language for laying out text and images on a webpage, whereas HTML5 can
be viewed as a development platform that does what HTML does that and more, including better support for audio, video, and interactive graphics. It has a number of new elements, supports offline data storage for applications, and has more robust exchange protocols.

Q. What are some new HTML5 markup elements?
Among several:

  • <article>, 
  • <aside>, 
  • <bdi>, 
  • <command>, 
  • <details>, 
  • <figure>, 
  • <figcaption>, 
  • <summary>, 
  • <header>, 
  • <footer>,
  • <hgroup>, 
  • <mark>, 
  • <meter>, 
  • <nav>, 
  • <progress>, 
  • <ruby>, 
  • <rt>, 
  • <section> and 
  • <time>.


Q. What are the new image elements in HTML5?
The new image elements in HTML5 are Canvas and WebGL. <canvas> is a new element that acts as a container for graphical elements like images and graphics. WebGL stands forWeb Graphics Language, a free cross-platform API that is used for creating 3D graphics in web browsers.

Q. What are data- attributes good for?
data- attribute is used to assigns custom data to an element. The stored (custom) data can then be used in the page’s JavaScript to create a more engaging user experience.

Q. Describe the difference between cookies, sessionStorage, and localStorage.
Cookies are small text files that websites place in a browser for tracking or login purposes, and hold a modest amount of data. Meanwhile, localStorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Futher more, is it permanent. sessionStorage only lasts as long as the duration of the longest open tab.

Q. What are some of the major new API’s that come standard with HTML5?
Among others: Media API, Text Track API, Application Cache API, User Interaction, Data Transfer API, Command API, and the History API.

Q. What is the difference in caching between HTML5 and the old version of HTML?
An crucial new feature of HTML5 is the Application Cache which creates an offline version of a web application. and stores website files such as HTML files, CSS, images, and JavaScript, locally. Obviously, that speeds up site performance.

Q.What is image map?
An image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different
destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination).

Q. What is the advantage of collapsing white space?
White spaces are blank sequences of space characters, which is actually treated as a single space character in HTML. The browser
collapses multiple space into a single space, so we can indent lines of text without worrying about multiple spaces. This enables us to organize the code into a much more readable format.

Q. Do all HTML elements need both opening and closing tags?
Not really, elements like <img src=""/> or <input type=""/> don’t need a closing tag.

Q. What is a marquee?
A marquee is used to enable scrolling text in a web page. To do this, just place whatever text you want to appear scrolling within the <marquee> and </marquee> tags.

Q. How do you create links to sections within the same page?
Links can be created using the <a> tag, with referencing through the use of the # symbol. For example, we can have:
<a href="#top">BACK TO TOP</a>
which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named top. We can then
create a separate tag like:
<a name=top></a>
somewhere on the same webpage so that the user will be linked to that place when clicking on

CSS Questions

 Q. What are the possible ways to apply CSS styles to a web page?
CSS can be applied in the following three ways:
   • Linked: Create a separate .css file and add all the style for the web page there. Make sure the file is linked to the HTML document(s) using the link tag
   • Embedded: Inside the HTML document, open a style tag and inside that, add all styles just like you’d do on a linked file.
   • Inline: This is done by adding a style attribute inside an HTML element.

Q. Explain the CSS box model.
CSS box model is made up of margins, borders, padding, and content. The box model provides a more structured way to space elements in relationship to each other in web pages. In your browser’s developer tools, the CSS box model is found at the end of the CSS section and it looks like this:

Q. What is the difference between inline and block elements?
Basically, a block element will take up the whole width available, and comes with a line break before and after. Examples of block level elements are: headings (i.e <h1>), paragraphs (<p>), divisions (<div>) etc. In contrast, inline elements take up only
the space they need, and do not force line breaks. Examples of inline elements are: anchors (<a>), spans (<span>) etc.

Q. What is grouping used for in CSS?
Grouping allows several elements of HTML to have the very same styles applied. It uses a single declaration and selectors and
separated by commas.
For example:
       h1, h2, .my-class {
                   font-weight: light;
                   }

Q. What is a Class selector and how does it differ from an ID selector?
Class selectors are used to apply style to multiple HTML elements identified with the same class. Class selectors are called
within the CSS document by a ‘.’, followed by the class name, like this:
.class {
color: black;
}

Q. What is the difference between visibility:hidden and display:none?
Although these two properties seem similar, there is quite an important difference between the two:
   • visibility: hidden hides the element, but it will still takes up space, this way affecting the layout of the document.
   • display: none also hides the element, but will not take up space and the page will appear as if the element is not present.

Q. What are CSS preprocessors and why do we use them?
CSS preprocessors convert code written in a preprocessed language like SASS or LESS into the same old CSS we’ve been using
for such a long time now. The main advantages of using preprocessors are:
   • Ability to define variables
   • Ability to use nested syntax
   • Ability to create and use mixins (functions)
   • Use of mathematical and operational functions
However, there are also some disadvantages like updating issues and debugging difficulties.

Q. What are child selectors in CSS?
Child selectors represent a way of grouping (for styling) a set of elements that descend from a parent element. Example:
section > span {
background-color: #eee;
}

Q. What are grid systems and why do we use them in web pages?
Grid systems are structured rules that enable content to be stacked horizontally and vertically in a consistent and sustainable way. They find heavily usage in today’s websites because they offer increased producitvity while coding, they’re versatile and ideal for responsive layouts.

Q. How do we use shorthand properties and why?
Shorthand properties cannot be applied to any css property but only a few like: border, outline, padding, background etc. Shorthand properties reduce file size thus improving page load time. The trick stands for listing all property values on a single line, in a pre defined order that must be respected. An example would be:
div {
background-color: #ccc;
background-image: url("img.png");
background-repeat: no-repeat;
background-position: right top;
}
This would be exactly the same as:
div {
background: #ccc url("img.png") no-repeat right top;
}

Q. What is the purpose of the z-index and how is it used?
The z-index property specifies the stack order of an element within the document area (or a part of it). An element with greater stack order will always be in front of an element with a lower stack order. However, z-index only works on positioned elements
(position:absolute, position:relative, or position:fixed).
It can have four kind of values:
   • Auto: Sets the stack order equal to its parents.
   • Number: Orders the stack order.
   • Initial: Sets this property to its default value (0).
   • Inherit: Inherits this property from its parent element.

Q. List some of the new CSS propertied introduced with CSS3?
The following is a list of new properties added in CSS3:
   • border-radius
   • box-shadow
   • text-shadow
   • text-stroke
   • background-size
   • text-overflow
   • resize
   • transition
Also, other features like multiple backgrounds which allows you to have two or more background in the very same selector and flexible box model which ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Q. Explain what pseudo-classes are and their usage.
Pseudo clasess are used to define a special state of an element. Do note that pseudo classes are not defined in the markup.
They can be used for:
   • Styling an element on mouse over (hover)
   • Styling an element when it gets focus
   • Styling visited/unvisited links

Q. What is the CSS selector which allows you to target every element in a web page?
Called the universal selector and signed with an asterix (*), it sets all HTML element the same styling rules as defined in the property declarations. For example:
* {
margin: 0;
padding: 10px;
}

Q. What are media queries and how are they used?
A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. The usage of media queries is similar to this:
@media (max-width: 768px) {
.problem-class {
property: smaller;
}
}
Share:
Read More

Popular Posts

  • Interview Questions
    Adobe Photoshop Interview Questions and Answers:  Q.1: What is the Adobe Photoshop? Adobe Photoshop is an image editing software dev...
  • Nalanda University
    Nalanda was associate degree acclaimed Mahavihara, an oversized Buddhist cloister within the ancient kingdom of Magadha (modern-day Bihar)...
  • Adobe photoshop
    Adobe Photoshop is a formation graphics editor developed and printed by Adobe Systems for macOS and Windows. Photoshop was created ...

Featured Post

JavaScript

JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is compliment...

Search This Blog

Blog Archive

About


We are committed to excellence where students are encouraged to achieve their ideas, develop their full potential and make the best use of their skills and aptitudes.

Facebook Page

Recent Posts