JS学习笔记一运算符、数据类型、变量、条件语句、循环语句

本文链接：https://blog.csdn.net/qq_45231291/article/details/117670671

一、JS的位置

 1.可以将js代码编写到外部js文件中，然后通过script标签引
例如： <script type="text/javascript" src="js/script.js">

 2.可以将js代码编写到script标签
<script type="text/javascript">
            alert("我是script标签中的代码！！");
        </script>

3.可以将js代码编写到标签的onclick属性中 当我们点击按钮时，js代码才会执行

 <button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>

二、JS变量

变量声明：

（1）const用于修饰常量，定义的变量不可修改，而且必须初始化，声明位置不限（通常声明在js开头），与java类的final关键字性质一样。

（2）let声明的变量在{}中使用，变量的作用域限制在块级域中

（3）var定义的变量可以修改，如果不初始化会输出undefined，不会报错。多个变量用逗号隔开，变量可横跨多行；如果再次声明某个 JavaScript 变量，将不会丢它的值。

全局变量：声明在函数体外，任何地方都可访问到该变量

局部变量：声明在函数体内，只有在函数体内可访问到该变量

函数内部声明变量的时候，一定要使用var命令，如果不用的话，你实际上声明了一个全局变量

函数外面声明的变量，在函数内部改变该值后，函数外面的该变量的值也随之改变

在函数外面使用var声明一个变量后，再在函数内部使用var再次声明一次并改变其值，函数外面的该变量的值不会发生改变。

三、数据类型

字符串

例如：var carname="Bill Gates";
var carname='Bill Gates';

数字

例如：var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
var y=123e5; // 12300000
var z=123e-5; // 0.00123

布尔

例如：var x=true
var y=false

数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者：var cars=new Array("Audi","BMW","Volvo");或者：var cars=["Audi","BMW","Volvo"];

对象

例如：var person={firstname:"Bill", lastname:"Gates", id:5566};有三个属性

或者：var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
寻址方式：

name=person.lastname;
name=person["lastname"];

Null和Undefined

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

四、运算符

算术运算符：+、-、*、/、%、++、--

A = 10 + 20;

A = 10 – 20;

A = 10 * 20;

A = 10 / 20;

赋值运算符：=、+=、-=、*=、/=

字符串运算符：+ 运算符也可用于对字符串进行相加（concatenate，级联）。 += 赋值运算符也可用于相加（级联）字符串。字符串只能进行“连接”运算，不能进行其他运算。

字符串和数字相加：相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串

比较运算符：>、<、>=、<=、==、!=、===、!==

比较运算符的运算结果是布尔值(true或false)。

A = 10 > 20; // 结果A=false

A = 20>=20; // 结果A=true

A = 10%2 == 0; // 结果A=true

A = 10%2 == “0”; // 结果A=true

A = 10%3 != 0; // 结果A=true

A = 10%2 === “0”; //结果A=false

逻辑运算符：&&、||、!

逻辑运算符的运算结果有两个true或false。

“&&”逻辑与(并且关系)。如果左右两个操作数都为true，则结果为true，否则，结果为false。

逻辑与，就是两个条件同时满足时，则结果为true。

　　“||”逻辑或。左右两个条件，只要有一个满足，则返回true，否则，返回false。

　　“!”取反运算。!true = false 、 !false = true 、 !100 = false

三元运算符：?:

所谓“三元运算符”就是指三个操作数。

语法：条件表达式 ? 结果1 : 结果2

语法：操作数1 ? 操作数2 : 操作数3

含义：如果条件为true，则执行“结果1”的代码；如果条件为false，则执行“结果2”的代码。

其实：三元运算符，就是if else的变形形式。

五、JS if语句和switch语句

（1）if语句：只有当指定条件为 true 时，该语句才会执行代码。

语法：

if (condition)
{
当条件为 true 时执行的代码
}

请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

（2）if...else if...else 语句：使用 if....else if...else 语句来选择多个代码块之一来执行。

语法：

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和条件 2 都不为 true 时执行的代码
}

（3）switch语句：switch 语句用于基于不同的条件来执行不同的动作。

语法：

switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 }

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

default关键字：使用 default 关键词来规定匹配不存在时做的事情。

六、JS for循环和while语句

（1）for循环：

语法：

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

（2）while循环：while 循环会在指定条件为真时循环执行代码块。

语法：

while (条件)
{
需要执行的代码
}

（3）do.....while循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

do
{
需要执行的代码
}
while (条件);

七、简单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/PassEleven.js"></script>
</head>
<body>
    <div>
        <div>
            <h2>100以内的奇数</h2>
           
        </div>
             <button onclick="b1()" class="b1">练习一</button>
    </div>
    <div>
        <div>
            <h2>9*9乘法表</h2>
            <button onclick="b2()" class="b2">练习二</button>
        </div>
    </div>
</body>
</html>

function b1(){
    var i=1
    var sum=0
    while(i<=100){
        if(i%2!=0)
        {sum
           
             sum=sum+i
        }
       i++
    }
    alert("100以内的奇数相加之和为："+sum)
}

function b2(){
  for(var i=1;i<=9;i++)
  {
      for(var j=1;j<=i;j++)
      {
          document.write(j+"*"+i+"="+i*j+"")
      }
      document.write("<br>")
  }  
}

结果：