web technology

Dynamic HTML:

Dynamic HyerText Markup Language (DHTML) is a combination of Web development technologies used to create dynamically changing websites. Web pages may include animation, dynamic menus and text effects. The technologies used include a combination of HTML, JavaScript or VB Script,
CSS and the document object model (DOM).

Designed to enhance a Web user’s experience, DHTML includes the following features:

  • Dynamic content, which allows the user to dynamically change Web page content
  • Dynamic positioning of Web page elements
  • Dynamic style, which allows the user to change the Web page’s color, font, size or content.

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.

JavaScript Variables

Like many other programming languages, JavaScript has variables. Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container.

Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows.

<script type = "text/javascript">

      var name = "Ali";

      var money;

      money = 2000.50;

</script>

JavaScript variables have only two scopes.

  • Global Variables − A global variable has global scope which means it can be defined anywhere in your JavaScript code.

  • Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.


Strings / String manipulation in javascript:

The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.

As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.

  • concat() - Combines the text of two or more strings and returns a new string.
  • indexOf() – Returns the starting index of a substring within another string. A –1 is returned if no match is found.
  • charAt() – Returns the character at the specified location.
  • lastIndexOf() - Returns the index within the string of the last occurrence of the specified value, or -1 if not found.
  • match() - Used to match a regular expression against a string.
  • substring() – A portion of a string is returned. A starting and ending location are passed to this function.
  • replace() – Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.
  • search() - Executes the search for a match of a regular expression. If successful, search returns the index of the match inside the string. Otherwise, it returns -1.
  • slice() - Extracts a section of a string and returns a new string.
  • split() - Splits a string into an array of strings by separating the string into substrings.
  • length() – The length of the string is returned as the count of the number of characters it contains.
  • toLowerCase() – Converts the entire string to lower case.
  • toUpperCase() – Converts the entire string to upper case.
(program from notes)


Mathematical functions in JavaScript :

The JavaScript Math is a built-in object that provides properties and methods for mathematical constants and functions to execute mathematical operations.

Math.cos(x)

Returns the cosine of x.

Math.log(x)

Returns the natural logarithm (㏒e; also, ㏑) of x

Math.max([x[, y[, …]]])

Returns the largest of zero or more numbers.

Math.min([x[, y[, …]]])

Returns the smallest of zero or more numbers.

Math.pow(xy)

Returns base x to the exponent power y (that is, x^y).

Math.random()

Returns a pseudo-random number between 0 and 1.

Math.round(x)

Returns the value of the number x rounded to the nearest integer.

Math.sign(x)

Returns the sign of the x, indicating whether x is positive, negative, or zero.

Math.sin(x)

Returns the sine of x.

Math.sqrt(x)

Returns the positive square root of x.

(program from notes)

Arrays in java script:

An array is a special variable, which can hold more than one value. an array is an ordered list of values. Each value is called an element specified by an index. 

JavaScript array has the following characteristics:

  1. First, an array can hold values of different types. For example, you can have an array that stores the number and string, and boolean values.
  2. Second, the length of an array is dynamically sized and auto-growing. In other words, you don’t need to specify the array size upfront.
an array in javascript is created using array() constructor.
example program:
<html>
<head><title> Arrays</title></head>
<body>
<h2>JavaScript Arrays</h2>

<p>creating an array and displaying its elements :</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Javascript array methods:

concat()It returns a new array object that contains two or more merged arrays.
copywithin()It copies the part of the given array with its own elements and returns the modified array.
pop()It removes and returns the last element of an array.
push()It adds one or more elements to the end of an array.
reverse()It reverses the elements of given array.
indexOf()It searches the specified element in the given array and returns the index of the first match.
isArray()It tests if the passed value ia an array.
join()It joins the elements of an array as a string.
find()It returns the value of the first element in the given array that satisfies the specified condition.
findIndex()It returns the index value of the first element in the given array that satisfies the specified condition.


Regular Expressions in JavaScript:

Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. 
For example, a regular expression could be used to search through large volumes of text .
A regular expression pattern is composed of simple characters, or a combination of simple and special characters.
example program:
<html>

<body><head><title>RE</title></head>

<h2>JavaScript String Methods</h2>

<p>Click the try it button to replace "JS strings" with "Regular Expressions" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">these are JS strings </p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace(/JS strings/i, "Regular Expressions");
}
</script>

</body>
</html>
regular expression methods:
exec()Executes a search for a match in a string. It returns an array of information or null on a mismatch.
test()Tests for a match in a string. It returns true or false.
match()Returns an array containing all of the matches, including capturing groups, or null if no match is found.
matchAll()Returns an iterator containing all of the matches, including capturing groups.
search()Tests for a match in a string. It returns the index of the match, or -1 if the search fails.
replace()Executes a search for a match in a string, and replaces the matched substring with a replacement substring.
replaceAll()Executes a search for all matches in a string, and replaces the matched substrings with a replacement substring.
split()Uses a regular expression or a fixed string to break a string into an array of substrings.

Exception Handling in JavaScript:

Exception handling is one of the powerful JavaScript features to handle errors and maintain a regular JavaScript code/program flow. An exception is an object with an explanation of what went amiss. Also, it discovers where the problem occurred. 
 We can handle them using the try...catch statements.

The try statement defines a code block to run (to try).

The catch statement defines a code block to handle any error.

The finally statement defines a code block to run regardless of the result.

The throw statement defines a custom error.

example program:

<html>  

<head> Exception Handling</br></head>  

<body>  

<script>  

try{  

var a= ["34","32","5","31","24","44","67"];  

document.write(a);    

document.write(b);   

}catch(e){  

alert("There is error which shows "+e.message);  

}  

</script>  

</body>  

</html>  

Events in JavaScript:

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them.

For example, if the user clicks a button on a webpage, you might want to react to that action by displaying an information box.

example program:

<html>

<body>
<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html> 
Some common events:
EventDescription
onchangeAn HTML element has been changed
onclickThe user clicks an HTML element
onmouseoverThe user moves the mouse over an HTML element
onmouseoutThe user moves the mouse away from an HTML element
onkeydownThe user pushes a keyboard key
onloadThe browser has finished loading the page






Comments

Popular posts from this blog

Fundamentals of Programming(JAVA)

Business Intelligence with Power BI

IT for Business (MBU-SCM)