JavaScript学习第五天

复习

JavaScript中和 HTML 相似的是 注释 会被加载，但是不会被执行

有三种注释方式

1.单行注释

// 两条斜杠表示单行注释

2.多行注释

/*

这是一个多行注释

这是一个多行注释

这是一个多行注释

*/

3.单行注释

这种注释和HTML很类似，但是是不相同的，后面没有-->，而且开头也只是一条杠 <!-

<!-这是一行注释，只能注释单行。

和HTML不相同的是：

HTML的注释方式是：< !-- -->

所以在HTML中 // 不是注释。会正常的被浏览器解析出来。

一. 定义变量

定义方式有两种：

1.使用关键字

​ 使用var关键字进行定义

​ 使用const关键字进行定义

使用var进行定义时，可以不进行初始化，在输出打印时不会报错，此时会直接输出打印 ==undefined==

使用const进行定义时，必须要进行初始化，否则就会报错。

使用var关键字时，只是声明有这个变量名称存在，可以定义局部变量或者是全局变量，主要看定义的范围在哪里

使用var

//未定义情况下
console.log(a); //打印undefined
//初始化
var a = "aaa";
console.log(a); //打印 aaa
//修改变量
var a = "bbb";
console.log(a); //打印bbb
//循环，检测块级作用域
for(i = 0; i < 5; i++) {
    console.log(i); //依次打印0，1，2，3，4
    setTimeout(function() {                
        //定义函数内部变量        
        console.log(i);               
        var  d = "locald";            
    }, 1000); //依次打印0，1，2，3，4
}          
//访问内部变量//设置定时器，因为要一秒后d才会被定义
setTimeout(function() {
    console.log(d)
}, 1001); //报错，未被定义

使用const

//未定义情况下
console.log(a); //报错。没有定义，所以需要先定义
//初始化
const a = "aaa";
console.log(a); //打印 aaa
//修改变量
const a = "bbb";
console.log(a); //报错，a早已赋值，无法修改
//循环，检测块级作用域
for(i = 0; i < 5; i++) {
    console.log(i); //依次打印0，1，2，3，4
    setTimeout(function() {
         //定义函数内部变量
        console.log(i);
        const d = "locald";
    }, 1000); //依次打印0，1，2，3，4
}
//访问内部变量//设置定时器，因为要一秒后d才会被定义
setTimeout(function() {
    console.log(d)
}, 1001); //报错，未被定义

   两者的区别就是使用const定义的变量值不可更改，使用var定义的变量可以更改值。

2.不使用关键字

直接定义 为全局变量，与定义的位置无关

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 语句</h2>

<p><strong>JavaScript 程序</strong> 是一系列由计算机执行的 <b>语句</b>。</p>

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

<script>

var x, y, z;  // 语句 1
x = 22;        // 语句 2
y = 11;        // 语句 3
z = x + y;    // 语句 4
e = 12;

document.getElementById("demo").innerHTML =
"z 的值是" + z + ", e 的值是 "+ e; 

</script>

</body>
</html>

二.变量

JavaScript中有数值、字符串

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 变量</h1>

<p>字符串用引号包围。</p>
<p>数值不用引号包围。</p>

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

<script>
var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';

document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>

</body>
</html>

数值

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 数值</h2>

<p>写数值有无小数点均可。</p>

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

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

</body>
</html>

字符串

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 字符串</h2>

<p>字符串可由双引号或单引号包围。</p>

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

<script>
document.getElementById("demo").innerHTML = 'Bill Gates';
</script>

</body>
</html>

在一行中声明多个变量

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 变量</h1>

<p>您可以在一条语句中声明许多变量。</p>

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

<script>
var person = "Bill Gates", carName = "porsche", price = 150000;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

多行声明多个变量

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 变量</h1>

<p>您可以在一条语句中声明多个变量。</p>

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

<script>
var person = "Bill Gates",
carName = "porsche",
price = 150000;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

三.变量应用

变量使用1

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 变量</h2>

<p>在本例中，x 被定义为变量。然后 x 被赋值 7：</p>

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

<script>
var x;
x = 7;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

变量使用2

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 运算符</h2>

<p>JavaScript 使用算数运算符来计算值（类似代数）。</p>

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

<script>
document.getElementById("demo").innerHTML = (7 + 8) * 10;
</script>

</body>
</html>

变量使用3

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 赋值</h2>

<p>在 JavaScript 中，= 运算符用于向变量赋值。</p>

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

<script>
var x, y;
x = 7;
y = 8;
document.getElementById("demo").innerHTML = x + y;
</script>

</body>
</html>

变量使用4

字符串可以用+号来连接，且+号可以连接字符串和非字符串的变量

  <!DOCTYPE html>
  <html>
  <body>

  <h2>JavaScript 表达式</h2>

  <p>表达式计算为值。</p>

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

  <script>
  document.getElementById("demo").innerHTML = "Bill" + " "  + "Gates";
  </script>

  </body>
  </html>

变量使用5

使用变量参与运算

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 表达式</h2>

<p>表达式计算为值。</p>

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

<script>
var x;
x = 6;
document.getElementById("demo").innerHTML = x * 10;
</script>

</body>
</html>

变量使用6

JavaScript中对大小写是敏感的

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 对大小写敏感</h2>

<p>请试着把 lastName 改为 lastname。</p>

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

<script>
var lastname, lastName;
lastName = "Gates";
lastname = "Jobs";
document.getElementById("demo").innerHTML = lastName;
</script>

</body>
</html>

变量使用7

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 变量</h1>

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

<script>
var price1 = 7;
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;
document.getElementById("demo").innerHTML = "总计：" + total;
</script>

</body>
</html>

变量使用8

数字相加再赋值

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 变量</h1>

<p>相加 5 + 2 + 3 的结果：</p>

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

<script>
var x = 3 + 5 + 8;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

变量使用9

字符串通过+号来连接

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 变量</h1>

<p>相加 "Bill" + " " + "Gates" 的结果是：</p>

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

<script>
var x = "Bill" + " " + "Gates";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

变量使用10

一个字符串类型的数字加上数值型的数字，结果是一个数值

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 变量</h1>

<p>相加 "8" + 3 + 5 的结果是：</p>

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

<script>
x = "8" + 3 + 5;
document.getElementById("demo").innerHTML = x - 12+"; x = "+x;
</script>

</body>
</html>

四.JavaScript语法格式

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 语句</h2>

<p>JavaScript 语句被分号分隔。</p>

<p id="demo1"></p>

<script>
var a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

在JavaScript中，和其他语言类似的是：在每一句语句结束后，都必须要用英文半角分号结尾，表示语句的结束。

允许一行多语句

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 语句</h2>

<p>一行允许多条语句。</p>

<p id="demo1"></p>

<script>
var a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

JavaScript的函数代码定义在大括号{}内书写

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 语句</h2>

<p>JavaScript 代码块在 { 与 } 之间编写。</p>

<button type="button" onclick="myFunction()">点击我！</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
function myFunction() {
    document.getElementById("demo1").innerHTML = "Hello Kitty.";
    document.getElementById("demo2").innerHTML = "How are you?";
}
</script>

</body>
</html>

JavaScript格式建议规范

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 语句</h2>

<p>
折行的最佳位置是运算符或逗号之后。
</p>

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

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

</body>
</html>

五.JavaScript运算符

除了除法运算符特殊之外，其他的和Java类似

在JavaScript中，单个斜杠表示取余数的除法，和正常的算数一样，会取到小数点

<!DOCTYPE html>
<html>
<body>

<h1>/ 运算符</h1>

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

<script>
var x = 7;
var y = 2;
var z = x / y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

字符串相加

在JavaScript中，对字符串进行加法操作时，不添加任何字符串数值

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 运算符</h1>

<p>+ 运算符串联（相加）字符串。</p>

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

<script>
var txt1 = "Bill";
var txt2 = "Gates";
document.getElementById("demo").innerHTML = txt1 + txt2;
</script>

</body>
</html>

在JavaScript中可以添加HTML的标签，因为JavaScript就是放在HTML中，所以浏览器在解释的时候就可以将HTML额标签解释了。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 运算符</h1>

<p>+ 运算符串联（相加）字符串。</p>

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

<script>
var txt1 = "Bill";
var txt2 = "Gates";
document.getElementById("demo").innerHTML = txt1 + txt2;
</script>

</body>
</html>
最后修改：2021 年 01 月 09 日 05 : 50 PM
© 允许规范转载