JS基础语法 - 技术栈

一.JS的引入方式：

1.外联样式：

分为两个文件写

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./00.js"></script>  //外联样式
</head>

<body>

</body>

</html>

javascript 复制代码

alert("我爱你祖国");

2.内部样式：

这个<script></script>标签放哪里都行。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        alert("我爱你祖国");
    </script>

</body>

</html>

3.标签内嵌套：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script src="./00.js"></script> -->
</head>

<body>
    <button onclick="alert('别靠近我男朋友')"></button>
</body>

</html>

二.js中的输入

javascript能改变HTML中的很多东西，比如改变值，输出值，改变html中的样式

1.alert（''）；

2.操纵html工具

javascript 复制代码

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

html使用id

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

3.控制台输出

程序员自己用的，不会被用户看到

console.log();

4.接收用户输入

prompt（' '）；

三.js的基本数据类型

js是一种弱类型语言，java是一种强类型语言，但是js对大小写很敏感。

typrof 查看变量的数据类型。

number数字类型划分为整型和浮点型，在js里面都是属于数字类型。

四.运算符:

1.算术运算符：

加号：

这里a，b类型不一样，相加的话就是对字符串进行拼接，结果是12，而且这个12类型是string

因为number是基本数据类型，string是引用数据类型，string空间存储的多，就会完成一个类型转换。

+作用是一个字符串的拼接

减号：

对变量只要能转为number全部转为number类型

如果无法转为number类型，无法运算NAN（not a number）

乘法和除法：和减法一样

取余：%

10%7=3；

5%10=5；当被除数小于除数取本身。

如何得到商？parseInt（）取整不存在四舍五入

2.赋值运算符：

a，b值互换：

3.比较运算符：

==判断值，===判断类型和值

4.++和--

++在前先自身运算再赋值，++在后先赋值再自身运算。

5.逻辑运算符

&& 与并且多个条件同时满足返回true

|| 或或者多个条件满足一个就返回true

！非否定否定某个条件

||和|相比，||效率比较高，第一个条件为1，马上就跳转true不再判断

六：单引号和双引号：

JS里面的单引号和双引号可以同时使用，但是要遵循一定的准则。\n\n最外面用了双引号了，那么里面就不能再用双引号了，因为引号是成双对的，浏览器读到一个双引号后，到第2个双引号时才算结束；同理，浏览器读到一个单引号后，必须要读到第二个单引号才算结

五.选择结构

1.if else

2.if( 条件){

}else if(条件){

}else

这个格式要记住，老容易写错了

html 复制代码

<!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>加油站加油</title>
</head>

<body>
    //刚刚错的原因是： 1.else后面没有加条件 2.忘记==号了 3.大括号 4.else if的最后一个是else
</body>

</html>
<script>
    var price = 0;
    var a = prompt("请问您要加什么型号的油92/95");
    var oil = prompt("请问要加多少升") - 0;
    if (a == '92') {

        if (oil > 20) {
            alert('您加的是92型号的油');
            var price = oil * 5.6;
            alert('您一共加了' + oil + '升，需要' + price + '元');
        } else
            alert('您加的是92型号的油');
        var price = oil * 6;
        alert('您一共加了' + oil + '升，需要' + price + '元');

    } else if (a == '95') {
        if (oil > 20) {
            alert('您加的是95型号的油');
            var price = oil * 5.6;
            alert('您一共加了' + oil + '升，需要' + price + '元');
        } else
            alert('您加的是95型号的油');
        var price = oil * 6;
        alert('您一共加了' + oil + '升，需要' + price + '元');
    } else {
        alert('别他妈乱输');
    }
</script>

3.switch case

不能判断范围，只能判断一个具体的值

case击穿：每一个case下面加个break就行了。

要不然他就一直执行到底。

一定一定最后要加一个 default ：减少错误

javascript 复制代码

</html>
<script>
    var num1 = prompt('请输入第一个数字') - 0;
    var num2 = prompt('请输入符号');
    var num3 = prompt('请输入第二个数字');
    var sum = 0;
    switch (num2) {
        case '+':
            sum = num1 + num3;
            alert(sum);
            break;
        case '-':
            sum = num1 - num3;
            alert(sum);
            break;
        case '*':
            sum = num1 * num3;
            alert(sum);
            break;

        case '/':
            sum = num1 / num3;
            alert(sum);
            break;
        default:
            alert('内容输入有误');
            break;
    }
</script>

4.三目运算符/三元运算符：

第二行的括号可加可不加，主要是为了看着容易看。

这个是取出三个数里面的最大值

复制代码

<script>
    var a = 10;
    var b = 30;
    var c = 16;
    var max = ((a > b) ? a : b) > c ? ((a > b) ? a : b) : c;
    alert(max);
</script>

另一种方法

六.循环结构:

1.循环条件

-循环起始量

-包括循环条件

-循环自增量

-循环条件

2.语法格式

题目求偶数：（两种方法）

3.continue和break

continue可以用来筛选，break满足条件的时候直接结束

4.双重循环：

时钟的模型，外层转一次，内层循环全部（一圈）

九九乘法表：

复制代码

<!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>
</head>

<body>

</body>

</html>
<script>
    for (var i = 9; i >= 1; i--) {
        for (var j = 1; j <= i; j++) {
            var c = i * j;
            document.write(i + "*" + j + "=" + c + '&nbsp');

        }
        document.write("<br>")


    }
</script>

这个是倒着的九九乘法表