8/23

JavaScript运算符:

  • 运算符 = 用于赋值
  • 运算符 + 用于加值
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<p>点击按钮计算 x 的值.</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo">123</p>
<script>
function myFunction()
{
    y=5;
    z=2;
    x=y+z;
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

算数运算符

+ - * / % ++ --

赋值运算符

= += -= *= /= %=

用于字符串的 + 运算符

+运算符用于把文本值或字符串变量加起来(连接起来)。
如需把两个或多个字符串变量连接起来,请使用+运算符。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
    txt1="What a very";
    txt2="nice day";
    txt3=txt1+txt2;
    document.getElementById("demo").innerHTML=txt3;
}
</script>

</body>
</html>

对字符串和数字进行加法运算

两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
    var x=5+5;
    var y="5"+5;
    var z="Hello"+5;
    var demoP=document.getElementById("demo");
    demoP.innerHTML=x + "<br>" + y + "<br>" + z;
}
</script>

</body>
</html>

比较运算符

== === != !== > < >= <=
===为绝对等于,值和类型均相等才返回true;
== 值相等即返回true, 比如5 == "5"返回true.
!==不绝对等于(值和类型有一个不相等,或两个都不相等)

逻辑运算符

&& || ! 分别为 and or not

条件语句

if...else语句

  • if
  • if...else
  • if...else if ...else
  • switch
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击下面的按钮,会显示出基于今日日期的消息:</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
    var x;
    var d=new Date().getDay();
    switch (d)
    {
        case 6:x="今天是星期六";
        break;
        case 0:x="今天是星期日";
        break;
        default:
        x="期待周末";
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

循环

  • for
  • for/in
  • while
  • do while

for/in 语句循环遍历对象的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x;
    var txt="";
    var person={fname:"Bill",lname:"Gates",age:56}; 
    for (x in person){
        txt=txt + person[x];
    }
    document.getElementById("demo").innerHTML=txt;
}
</script>
    
</body>
</html>

break continue语句

continue 语句只能用在循环中;
break 语句(不带标签引用),只能用在循环或 switch 中;

JavaScript标签

如需标记 JavaScript 语句,请在语句之前加上冒号
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
list:{
    document.write(cars[0] + "<br>"); 
    document.write(cars[1] + "<br>"); 
    document.write(cars[2] + "<br>"); 
    break list;
    document.write(cars[3] + "<br>"); 
    document.write(cars[4] + "<br>"); 
    document.write(cars[5] + "<br>"); 
}
</script>

</body>
</html>

Typeof 操作符来检测变量的数据类型

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p> typeof 操作符返回变量或表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
    typeof "john" + "<br>" + 
    typeof 3.14 + "<br>" +
    typeof false + "<br>" +
    typeof [1,2,3,4] + "<br>" +
    typeof {name:'john', age:34};
</script>

</body>
</html>
  • 在JavaScript中,数组是一种特殊的对象类型, 因此 typeof [1,2,3,4] 返回 object;
  • null是一个只有一个值的特殊类型。表示一个空对象引用.
    用 typeof 检测 null 返回是object。
    var person = null; // 值为 null(空), 但类型为对象
  • 设置为 undefined 来清空对象.
    在 JavaScript 中, undefined 是一个没有设置值的变量。
    typeof 一个没有值的变量会返回 undefined。
var person = undefined;     // 值为 undefined, 类型为 undefined
person = undefined;          // 值为 undefined, 类型是undefined
  • undefined和null区别:
    null 和 underfined 的值相等,但类型不等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
    typeof undefined + "<br>" +
    typeof null + "<br>" +
    (null === undefined) + "<br>" +
    (null == undefined);
</script>

</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容