w3r-javascript05: Arithmetic Operators

schy_hqh

浏览: 558209 次
性别:

最近访客更多访客>>

amo

yjheeq

yclovesun

yangjiancsdn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB前端@javascript

Arithmetic Operators : +, -, *, /

In JavaScript, arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. There are four standard arithmetic operators, addition (+), subtraction (-), multiplication (*), and division (/).

These operators work as they do in other programming languages except the division (/) operator which returns a floating-point division in JavaScript, not a truncated division as it does in languages such as C or Java.

For example:
1/2 returns 0.5 in JavaScript.
1/2 returns 0 in Java.

In addition, JavaScript provides modules(%), increment(++), decrement(--) and unary negation(-) operators.

+ addition operator

HTML Code

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript + operator example</title>
<meta name="description" content="This document contains
an example of JavaScript + operator" />
</head>
<body>
<script src="addition_example1.js"></script>
</body>
</html>

JS Code

var var1 = 45;
var var2 = 78;
var var3 = 45.10;
var var4 = 178.12;
var newvar  = var1 + var2;
var newvar1 = var3 + var4;
var newParagraph3 = document.createElement("p");
var newText3 = document.createTextNode("var1 + var2 = "+newvar+" and var3 + var4 = "+newvar1);
newParagraph3.appendChild(newText3);
document.body.appendChild(newParagraph3);

- subtraction operator

HTML Code

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript subtraction operator example </title>
<meta name="description" content="This document contains an
example Using JavaScript subtraction operator"/>
</head>
<script src="subtraction-example1.js"></script>
</body>
</html>

JS Code

var var1 = 45;
var var2 = 78;
var str1 = "w3resource";
var str2 = ".com";
var newvar = var1 - var2;
var newstr = str1 - str2; //NAN
var varstr = var1 - str2; //NAN
var newParagraph = document.createElement("p");
var newText = document.createTextNode("var1 -var2 = "+ newvar);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);
var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("str1 - str2  = "+ newstr);
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);
var newParagraph2 = document.createElement("p");
var newText2 = document.createTextNode("var1 - str2  = "+ varstr);
newParagraph2.appendChild(newText2);
document.body.appendChild(newParagraph2)

* multiplication operator

HTML Code

<!doctype html><head>
<meta charset="utf-8">
<title>JavaScript multiplication operator (*) example with DOM
</title>
<meta name="description" content="This document contains an example
Using JavaScript multiplication operator (*) with dom"/>
</head>
<body>
<script src="multiplication-example1.js"></script>
</body>
</html>

JS Code

var var1 = 45;
var var2 = 78;
var var3 = 45.10;
var var4 = 178.12;
var newvar  = var1 * var2;
var newvar1 = var3 * var4;

var newParagraph = document.createElement("p");
var newText = document.createTextNode("var1 * var2 = "+ newvar);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("var3 * var4  = "+ newvar1);
newParagraph1.appendChild newText1);
document.body.appendChild(newParagraph1);

/ division operator

HTML Code

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript / operator example </title>
<meta name="description" content="This document contains an example of JavaScript division operator" />
</style>
</head>
<body>
<script src="division-example1.js"></script>
</body>
</html>

JS Code

var var1 = 45;
var var2 = 78;
var var3 = 1;
var var4 = 2;
var newvar  = var1 / var2; //0.5769230769230769
var newvar1 = var3 / var4; //0.5

var newParagraph = document.createElement("p");
var newText = document.createTextNode ("var1 / var2 = "+ newvar);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);

var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("var3 / var4  = "+ newvar1);
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);

Arithmetic Special Operators (%, ++, --, - )

Assignment Operators(+=,-=,*=,/=,%=,<<=,>>=,>>>=,&=,^=,|=)

Bitwise Operators(a & b,a | b,a ^ b,~ a,a << b,a >> b,a >>> b)

Comparison Operators(==,===,!=,!==,>,>=,<,<=)

Equal (==)

x == y Returns true if the operands are equal.

var s1 = 300;
var s2 = '300';
alert(s1==s2);//true

Strict equal (===)

x === y Returns true if the operands are equal and of the same type.

var s1 = 300,
      s2 = '300',
      s3 = 300;
alert(s1===s2);//false
alert(s1===s3);//true

Not equal (!=)

x != y Returns true if the operands are not equal.

var s1 = 300,
		s2 = '300',
		s3 = 500;
alert(s1!=s2);//false
alert(s1!=s3);//true

Strict not equal (!==)

x !== y Returns true if the operands are not equal and/or not of the same type.

var s1 = 300,
		s2 = '300',
		s3 = 500;
alert(s1!==s2);//true
alert(s1!==s3);//true

Greater than (>)

Greater than or equal (>=)

Less than (<)

Less than or equal (<=)

Logical Operators(&&, ||, !)

String Concatenation(+, +=)

Special Operators:

?: (Conditional operator)

Condition ? expr1 : expr2

status = (marks >= 30) ? "Pass" : "Fail"

Comma Operator

The comma operator (,) is used to execute two expressions sequentially.

expr1, expr2

We use the comma operator when we want to include multiple expressions in a location that requires a single expression.

This operator is generally used inside a for loop, to allow multiple variables to be updated (increase/decrease) each time through the loop.

For example we want to display a serial No. (starting from 1) and a employee code ( starting from 10 ), the following code uses the comma operator to increment two variables at once.

for (var i=1, j=10; i <=10; i++, j++)
{
alert('Sl. No. : '+i+' Employee Code : '+j)
}

function Operator

The function operator defines a function inside an expression.

var1 = function( parameter1, parameter2,......parametern)

{

statement(s)

}

var a = 12;
var b = 14;
var x = function(a,b)
{
return a*a+2*a*b+b*b;
};
alert("The square of "+a+ " and "+b +" is " +x(a,b));

in Operator

property in object

判断某个属性是否在对象中存在

property : Name of the property.

object : Name of the object.

var employeeobj = {name:"Robert",designation:"Officer",age:"34"};
if ("designation" in employeeobj)
{
alert('Designation property is present'); //alert this
}
else
{
alert('Designation property is not present'); 
}

instanceof Operator

The instanceof operator is used to check the type of an object at run time. The instanceof operator returns a boolean value that indicates if an object is an instance of a particular class.

var result = objectName instanceof objectType

var string1 = "w3resource"; //Declaring string object
var date1 = new Date();  //Declaring Date object
if (string1 instanceof String) 
{
var newParagraph = document.createElement("p");
var newText = document.createTextNode('The type of string1 object is String'); 
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph); 
}
if (date1 instanceof Date)
{
var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode('The type of date1 object is Date'); 
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);
}

new Operator

The new operator is used to create an instance of a user defined object type or one of builtin object types which has a constructor function.

var objectName = new objectType(param1, param2, ...., paramN);

To create an user defined object type following steps are required.

Write a function to define the object type 写一个函数来定义一个对象类型

Use new operator to create an instance of the object. 使用new操作符创建这个对象的实例

Suppose we want to create an object type for students with three properties name, class and rollno. To do this first declare the following function.

  function student(name, class, rollno)
    { 
    this.name = name;
    this.class = class 
    this.rollno = rollno;
    }

使用new关键字完成对象的创建

studentv = new student("John", "V", 10)

studentvi = new student("David Rayy", "VI", 12)

  function school(sname,  city, stus)
    { 
    this.sname = sname;
    this.city = city;
    this.stus = stus;
    }

var stus = new Array(studentv,studentvi);

school = new school("Dubai International School", "Dubai", stus);

this Operator

The this operator is used to refer the current object. In general, this refers to the calling object in a method.

In the following web document this operator is used as internal reference property of the form instances.

<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript this operator example with DOM
</title>
<meta name="description" content="This document contains an
example of JavaScript this operator"/>
</head>
<body>
<form name="myform" action="#">
<input type="text" value="Text Here" name="text1" />
<input type= "submit" value="Submit" name="mysubmit" onclick=
"formdetails(this.form)" />
</form>
<script src="javascript-this-operator-example1.js">
</script>
</body>
</html>

 //this ---> form
function formdetails(form)
{

var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("The name of the form is: "+form.name); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph);


var newParagraph1 = document.createElement("p"); 
var newText1 = document.createTextNode("The
deault value of text box is: "+form.text1.value);  newParagraph1.appendChild(newText1); 
document.body.appendChild(newParagraph1);


var newParagraph2 = document.createElement("p");
var newText2 = document.createTextNode("The name
of the submit button box is: "+form.mysubmit.name); newParagraph2.appendChild(newText2);
document.body.appendChild(newParagraph2);

var newParagraph3 = document.createElement("p"); 
var newText3 = document.createTextNode("The deault
value of submit button is: "+form.mysubmit.value);
newParagraph3.appendChild(newText3);
document.body.appendChild(newParagraph3);

}

typeof operator

The typeof operator is used to get the data type (returns a string) of its operand.

The operand can be either a literal or a data structure such as a variable, a function, or an object. The operator returns the data type.

返回值：字符串

"object"，"boolean"，"function"，"number"，"string"，"undefined"

Examples of typeof operator : string

typeof ""
typeof "abc"
typeof (typeof 1)

Examples of typeof operator : number

typeof 17
typeof -14.56
typeof 4E-3
typeof Infinity
typeof Math.LN2
typeof NaN

Examples of typeof operator : boolean

typeof false
typeof true

Examples of typeof operator : function

typeof Math.tan
typeof function(){}

Examples of typeof operator : object

typeof {a:1}
typeof new Date()
typeof null
typeof /a-z/
typeof Math
typeof JSON

Examples of typeof operator : undefined

typeof undefined
typeof abc

More examples on typeof operator

typeof(4+7); //returns number typeof("4"+"7"); //returns string typeof(4*"7"); //returns number
typeof(4+"7"); //returns string

What is the difference between typeof myvar and typeof(myvar) in JavaScript?

No difference!

How to detect an undefined object property in JavaScript?

var index = 8;
  var result = (typeof index === 'number');
  alert(result);
  // Output: true
var description = "w3resource";
  var result = (typeof description === 'string');
  alert(result); 
  // Output: true

void operator

The void operator is used to evaluate a JavaScript expression without returning a value.

The following web document shows how the void operator is used.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>JavaScript void operator example</title>
</head>
<body>
<a href="javascript:void(alert('Thank you.'))">Click here to see a message</a>
</body>
</html>

In the following web document void operator is used to call a function.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>JavaScript void operator (calling function) example</title>
</head>
<body>
<script type="text/javascript">
function testfunc(){document.write("good!");}
</script>
<a href="javascript:void(testfunc())">
Click here to call testfunc()</a>
</body>
</html>

分享到：

HeadFirst（四）Factory 工厂设计模式 | HeadFirst（三）Decorator 装饰设计模式

2013-12-13 18:41
浏览 787
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论