提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

此文章是本人在大学期间结合网上和自我经验创造，仅此作于本人的学习分享

提示：以下是本篇文章正文内容，下面案例可供参考

一、javascript是什么？

1.简介：

javascript是目前web开发中不可缺少的语音脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行javascript代码。javascript是目前web开发中不可缺少的语音脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行javascript代码。

2.特点：

        1.交互性（网页的动态交互）

        2.安全性（不允许直接访问本地硬盘）

        3.跨平台性（只要是浏览器可以解析js代码的都可以执行，和平台无关）

二、javascript书写位置

2.1、内嵌式

建议js写在body最后一行

        优点：只有一个文件夹

        缺点：代码行数过多不利于查找

代码如下（示例）：

<script>alert('此javascript格式为内嵌式')</script>

2.2、外链式

新建一个js文件，然后在该文件中写js代码，然后再把js文件引入到HTML文件中。我们平常利用最多的方法

        优点：代码分类清晰，利于查找代码

        缺点：生成了一个js文件夹，不利于传输

代码如下（示例）：

<script src='js文件路径'>这里不能写js语句</script>

2.3、行内式：

直接写在HTML标签中，一般只用于做点击事件触发js中的函数

function sum (){
    var x=5;
    var y=10;
    var sum=x+y; 
    alert(sum);
}
<button onclick='sum()'>点我计算出5+10</button>

三、输出、输入语句

        3.1、输出语句

                       console.log()        后台输出

                        alert()                  弹窗输出

                         document.write()        页面输出

   3.2、输入语句     

                              promt()  此输入语句为弹窗输入

四、var：变量   

        4.1、定义：变量是存放数据的、可以存储任意数据（字符串、数值...） 

        4.2、声明变量：

var 变量名称 = 存储的数据;

        4.3、变量命名规范：

1. 只能由字母、数字、_（下划线）、$（美元符号）组成。

2.命名中不能出现—。一般定义用驼峰式定义 backgroundColor（第二个单词用大写字母）

3.命名中不能以数字开头

        总结：javascript是一种弱脚本语言，不需要像C语言一样声明变量类型，只需要加一个var就行，假如存储的数据类型是字符串类型只需要 var a='我是字符串';

五、布尔型 Boolean

       5.1：真假   真：true    假：false

                真的值为1 ，假的值为0

                                                        一般用于if语句，后面我们会讲

<script>
        console.log(5>3);    //返回：true
        console.log(3>5);    //返回：false
    </script>

六、数据类型的转换

        6.1：检查数据类型

                        要想转换数据类型，我们首先得先知道我们的数据是什么类型

console.log(typeof(value))

var c;
console.log(typeof(c))       //undefined 未定义
var c = 857;
console.log(typeof(c))       //number    数字型
var c = '小陈'
console.log(typeof(c))       //string    字符串型
var c = false
console.log(typeof(c));      //boolean    布尔型

         6.2 转换数据类型

<script>
        var a=857; console.log(String(a));         //转换为字符串类型   返回'857'
        var a='857'; console.log(Number(a));       //转换为数字类型     返回857
        var a=857; console.log(Boolean(a))         //转换为布尔型       返回true
    </script>

七、逻辑运算符         

          7.1逻辑运算符：

                &&         "逻辑与"， 简称"与"            and          全真则真        表达式1&&表达式2

                 ||           "逻辑或"， 简称"或"            or             一真则真        表达式1||表达式2

                 !            "逻辑非"， 简称"非"            not           真假相反        表达式1!=表达式2

八、运算优先级

        8.1 运算符

 相同等级按照从左到右 逻辑非除外

括号（）→一元运算符 ！++ -- →算术运算符 先* / 后+- →关系运算符 > >= < <= →相符运算符 ==   ！=     ===    ！==    →逻辑运算符 先&&后||

九、js事件

          9.1js中的鼠标点击事件：

 说明：红色的为重点。鼠标点击事件和获取对象会出一个全面性案例

十、获取对象

// 一、通过选择器的方式获取
//     document.querySelector 
//     - document: 文档
//     - . : ……的
//     - getElementById('')：通过ID去获取元素
//         - get：获取、获得、拿到
//         - Element：元素【标签、文本……】
//         - By：通过……的方式
//         - Id：id方式
//     在HTML文档中，通过ID的方式去获取元素    
//     特点：
//         - 唯一性：只能获取第一个目标元素
//         - 如果没有目标元素，则返回null
// 在外部JS中，添加鼠标事件的语法：
//     obj.onclick = funciton(){
//         放点击之后要执行的代码
//     }
// 修改元素样式的语法：
//     obj.style.具体样式名 = "样式值" ==> 只能修改一种样式
//     或者：
//     obj.style = "具体样式名:样式值;" ==> 可修改多种样式
// 

 演示一：揉捏div

    <style>                                           
        div{
            width: 500px;
            height: 500px;
            background: pink;
            margin: 0 auto;
            font-size: 50px;
            color: #fff;
            line-height: 500px;
            text-align: center;
        }
    </style>

    <div>小陈思维导图</div>
                                                    //css + html 部分

<script>
// //获取按钮，添加点击事件
    // 通过选择器类型获取div对象：document.querySelector('div')
   document.querySelector('div').onclick=function(){
    //使用点击事件改变我们获取到的对象：
    document.querySelector('div').style="width:800px;height:800px"
   }
</script>       //js部分 ，点击之后就能把div块变大了，很好玩的一个案例，可以复制自己去试试哦

        渲染文本

                        obj（对象）. innerHTML = 渲染的内容

                        此渲染文本就是把获取到的内容放到html页面中显示出来

                                                                                            这里提一下。后面会用例子说明

十一、自定义函数

         11.1：函数是命名的独立的语句段，这个语句段可以被当作一个整体来应用和执行

function 函数名(形参){代码块}
调用函数：函数名（实际参数）
函数不调用自己不执行

         11.2函数的参数

                  我们可以利用函数的参数实现函数重复但结果不一样的代码

 function 函数名(形参1，形参2，...){ } 声明函数小括号里面的是形参
函数名 (实参1，实参2...) 在函数调用的小括号里面的是实参
形参类似于一个变量
实参类似于一个对变量的赋值
例如 var a = 8
8相当于实参

 案例：在上面的演示一揉捏div使用函数的做法。大家把代码复制下来自己试试，从中领悟

html部分
<section class="main">
        <h4>
            请为下面的DIV设置样式：
            <button id="btn">点击设置</button>
        </h4>
        <div id="box"></div>
    </section>

    <div id="styleSet">
        <div id="styleBox">
            <div class="bg">
                请选择背景色：
                <ul>
//行内js点击事件，调用函数把实参传递进去
                    <li id="red" onclick="sum('#box','orangered')">红</li>
                    <li id="yellow" onclick="sum('#box','orange')">黄</li>
                    <li id="blue" onclick="sum('#box','skyblue')">蓝</li>
                </ul>
            </div>
            <div class="wid">
                请选择宽(px)：
                <ul>
    
                    <li id="w200" onclick="big_width('#box','200px')">200</li>
                    <li id="w300" onclick="big_width('#box','300px')">300</li>
                    <li id="w400" onclick="big_width('#box','400px')">400</li>
                </ul>
            </div>
            <div class="hei">
                请选择高(px)：
                <ul>
                    <li id="h200" onclick="big_height('#box','200px')">200</li>
                    <li id="h300" onclick="big_height('#box','300px')">300</li>
                    <li id="h400" onclick="big_height('#box','400px')">400</li>
                </ul>
            </div>
            <div class="btnBox">
                <button id="reset">恢复</button>
                <button id="sure">确定</button>
            </div>
        </div>
    </div>

css部分
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,html{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.main{
    margin: 20px;
}
#btn{
    width: 150px;
    height: 48px;
    line-height: 48px;
    background: #f60;
    color: #fff;
    text-align: center;
    border: none;
    cursor: pointer;
}
#box{
    width: 100px;
    height: 100px;
    background: #fff;
    border: 5px solid #dddddd;
}
#styleSet{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
}
#styleBox{
    width: 500px;
    height: 300px;
    background: #fff;
    border: 8px solid #cccccc;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -150px;
    padding: 20px 15px;
}
#styleBox>div{
    line-height: 40px;
    display: flex;
    align-items: center;
}
#styleBox ul{
    list-style: none;
    /* display: inline-block; */
}
#styleBox li{
    width: 70px;
    height: 40px;
    line-height: 40px;
    border: 3px solid #cccccc;
    text-align: center;
    margin: 10px;
    float: left;
    cursor: pointer;
}
.bg li{
    color: #fff;
}
.bg li:nth-of-type(1){
    background: orangered;
}
.bg li:nth-of-type(2){
    background: orange;
}
.bg li:nth-of-type(3){
    background: skyblue;
}
.btnBox{
    display: flex;
    justify-content: space-around;
}
#reset, #sure{
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: palevioletred;
    border: none;
    cursor: pointer;
}

js部分
document.querySelector('#btn').onclick = function(){ 
    //获取遮罩层，并让遮罩层显示--> 控制CSS中display：none-block
    document.querySelector('#styleSet').style.display = "block";
}
设置两个函数的形参，在html使用行内的点击事件，把实参传进来，都是同样的代码，可以直接调用函数
// 设置颜色
function sum(one,two,){
    document.querySelector(one).style.background = two;
}
// 设置大小
function big_width(one,two){
    document.querySelector(one).style.width = two;
}
function big_height(one,two){
    document.querySelector(one).style.height = two;
}
// 隐藏部分
document.querySelector('#sure').onclick = function(){
    document.querySelector('#styleSet').style.display='none'
}
//恢复到原本的大小
document.querySelector('#reset').onclick = function(){
    document.querySelector('#box').style="width:100px;height=100px;background:#fff"
    document.querySelector('#styleSet').style.display='none'
}

十二、匿名函数

       12.1

          匿名函数，顾名思义就是没有名字的函数

                        function（形式参数）{代码块}

        调用方式：将匿名函数赋值给一个变量，通过变量名调用函数

        定义函数并赋值给变量：var cc = function（形式参数）{代码块}

        调用函数：cc（实际参数）;

演示： 

<script>
        var cc = function(x,y){
            alert(x+y);
        }
        cc(5,10)
    </script>
结果为15

十三、if的语句结构

       13.1         这个和java中的if语句一样

if（条件表达式）{执行代码块1}

else{ 执行代码块2}

 演示：下拉菜单

css+html的内容太多，放在这里是为需要复制的同学提供方便。不需要的可以忽略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font: 30px / 90px "微软雅黑";
        }
        ul{
            list-style: none;
        }
        .wrap{
            width: 1000px;
            height: 1000px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -500px;
            margin-left: -500px;
            /* background: url(img/bg.jpg) no-repeat; */
        }
        .menu{
            width: 330px;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 285px;
            margin-left: 335px;
            background: #f87a75;
            box-shadow: 0 20px 50px rgba(248,122,117,.5);
        }
        .title{
            height: 90px;
            padding-left: 112px;
            box-sizing: border-box;
            color: #fff;
            position: relative;
        }
        .title::after{
            content: '';
            position: absolute;
            right: 36px;
            top: 41px;
            background: url(img/ar.png) no-repeat ;
            width: 28px;
            height: 16px;
        }
        .list{
            width: 316px;
            padding-left:7px; 
            padding-bottom: 5px;
            display: none;
        }
        .list li{
            height: 90px;
            margin-bottom: 2px;
            background:#fee4e3;
            border-radius: 20px;
            padding-left: 112px;
            box-sizing: border-box;
            background-position: 23px 24px;
            background-repeat: no-repeat;

        }
        /* .list li:hover{
            background-color: #fff;
            box-shadow:0 0 50px rgba(248,122,117,0.93);
            position: relative;
        }
        .list li:nth-of-type(1){
            background-image: url(img/icon1.png);
        }
        .list li:nth-of-type(2){
            background-image: url(img/icon2.png);
        }
        .list li:nth-of-type(3){
            background-image: url(img/icon3.png);
        }
        .list li:nth-of-type(4){
            background-image: url(img/icon4.png);
        }
        .list li:nth-of-type(5){
            background-image: url(img/icon5.png);
        } */
    </style>
</head>
<body>
    <div class="wrap">
        <div class="menu">
            <div class="title">菜单</div>
            <ul class="list">
                <li>微博</li>
                <li>图片</li>
                <li>博客</li>
                <li>视频</li>
                <li>更多>></li>
            </ul>
        </div>
    </div>
    <script src="case.js"></script>
</body>
</html>

js部分 

//获取对象
var btn = document.querySelector('.title');
var ul = document.querySelector('.list');
var flag = true     //定义全局的公共变量
btn.onclick = function(){
    if(flag){
        ul.style.display = "block"; //如为真的显示出来
    }else{
        ul.style.display = "none"; //为假时说明已经显示了，我们需要把他收起来
    }
    flag = !flag;
}
var list = document.querySelectorAll('.list li');
for(var i=0 ;i < list.length;i++){
    list[i].onclick = function(){
        btn.innerHTML = this.innerHTML; //渲染文本
        ul.style.display = "none";
        flag = !flag;
    }

十四、三元运算符

       14.1 语法结构

                        条件表达式？表达式1：表达式2 

                                   如果条件为真，则返回表达式1的值

                                    如果条件为假，则返回表达式2的值

<script>
        var a=100;
        var b = (a>100)?1:0
        console.log(b); //返回0
    </script>

十五、switch分支语句

       15.1这个和java中的switch结构类似。只不过是java中要注明类型

<script>
        var kk = prompt("你想买什么水果");
        switch(kk){
            case '苹果':
            alert("苹果：4元一斤");
            break;
            case '香蕉':
            alert("香蕉：4元一斤");
            break;
            case '榴莲':
            alert("榴莲：40元一斤");
            break;
            default:
                alert("这种水果已卖完");
        }
    </script>

十六、循环结构 while、do-while、for；

16.1         结构

 while(循环条件){循环体}；

do{循环体}while（循环条件）；

for（循环变量赋初始值；循环条件；循环变量增值）；

<script>
let nnn = 0;
        let i;
        let n  = prompt("请输入你想知道0到某个数的偶数之和") ;
        for(i=0;i<=n;i++)
        {
            if(i%2==0)
            {
                nnn=nnn + i;
            }

        }
        document.write("0到"+ n + "计算结果为：" + nnn);
        
    </script>

十七、循环嵌套

       17.1 九九乘法表 直接上案例

   <script>
        for(var i=1; i<=9; i++){
            for(var j=1;j<=i;j++){
             sum=i*j;  
             console.log(j+'*'+ i+ '='+ sum); 
            }
    
}
    </script>
 

十八、数组

        18.1 定义

定义 变量 = [值1，值2.....]

    a = [1,2,3];

数组名称.length  检测数组个数      优点，使用for循环时比较灵活 

案例1

<script>
        a= [1,2,3]
        console.log(a.length); //返回3
    </script>

 案例2 筛选数组方法

var a = [1,66,7,55,88,99,44,67,21,89,100];
        var max = a[0]; //创建一个新数组，用来存筛选
        for(var i = 1; i<a.length; i++)
        {
            if(a[i]>max) //依次循环比较大小，把大的赋值到空数组里
            {
                max = a[i];
            }
        }
        console.log(max);

                                        基础到此结束
总结
        以上就是js中的最基础的知识