了解JavaScript的基本使用_link 引入js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_55667484/article/details/125033588

了解JavaScript的基本使用

书写格式

内嵌式

将js代码写在script标签当中
行内式

就是把js代码作为某个属性的值进行赋予,如:
```
<button onclick="alert('hello')">按钮</button>
```
即可实现,点击按钮,就可以弹窗说hello
将js代码写进单独的.js文件中,通过script标签的src属性进行引用

要区别于css代码的引用:通过link标签的href属性进行引用

要注意的是,通过script标签中的src属性引用js代码的时候,如果这个script中还写了别的js代码,那此时这个script标签中的js代码失效

Note:

js代码中,字符串用单双引号都没错,没区别
js的注释风格是://

html : < !-- -->

css:/**/

Js的基础语法

变量

定义一个变量的时候:var 变量名 = 初始值;

需要注意的是:这个变量是什么类型取决于你给它初始化是用什么类型的变量去给它做的初始化,也就是说没初始化的时候,这个变量是没有类型的,或者说这个变量的类型当前是undefined

其次要知道的是,如果根据上面说到的,用一个确切的数据给一个变量做了初始化,后面换一种类型给这个变量在做初始化的时候也不要紧,大不了就是这个变量的类型发生了变化而已

再者就是要知道,现在都是有let代替var了,主要是因为作用域的原因
基本数据类型
1. number:数字,不区分整数和小数
2. boolean:true为真,false为假
3. string:字符串类型
4. undefined:只有唯一的值:undefined,表示未定义的值
5. null:只有唯一的值null,表示空值
特殊的数字值
1. infinity:无穷大,大于任何的数字,表示数字已经超过js所能表示的范围
2. -infinity:负无穷大,超出范围
3. NaN:表示当前的结果不是一个数字
Js中的布尔类型被当做0,1处理,不像java
除了和java相同的语法之外的注意点
1. 运算符:== 和= = =的区别, != 和 ! ===的区别是:多加一个等号的,会严格限制不允许做隐式类型转换,因为js是一个弱类型的语言,如10 ==‘10’这个在js中认为是true,因为他们都可以转成10或者’10’,但是使用10 = = ='10’就会返回false
2. &&和||也和java不同,在js中:可以这么去记a&&b和a||b的结果,联想短路现象,如果这两个表达式只能算到第一个值就能知道整个表达式是真还是假了,那整个表达式的值就是a算出来的结果,反之能算到b头上,那b的算出来的值就是整个逻辑判断的值.
3. 数组!!!很奇葩的使用规则:
  1. let arr=[1,2,3],所以js中不是java的{}来初始化
  2. let arr=[1,‘hello’,null,undefined,true],离谱哦,什么都能同时放进去
  3. 所以js中不像java中:一个数组只能放同一种类型的数据,js只有这么一种数组,此时它看起来更像是一个容器,什么都能放进去
  4. 数组越界访问返回的不是ArrayIndexOutofBounds,而是返回一个undefined!!!
  5. 数组还能当hashmap使用牛逼不,比如arr[‘hello’]=10表示给arr这个对象新增了一个属性,键是hello,值是10
  6. 往数组中加元素使用push,而不是java中的add

Js中的方法

function 函数名(形参列表){
	函数体;
	return 返回值; 
}
//函数调用
函数名(实参列表);//这个就是没考虑返回值的
返回时=函数名(实参列表)//这个就是带返回值的

所以js中的函数定义要用function引出,然后不用写返回值类型

其次js的传参个数不一定非要和形参列表一致

JS中的对象

创建:

<script>
    let student={
        name: "蔡徐坤",
        age: 22,
        height: 180,
        weight: 120,

        sing: function(){
            console.log('鸡你太美');
        },

        jump: function(){
            console.log('一段舞蹈');
        }
    };
</script>

对象名.属性即可调用.

或者还要这种创建对象的方式:

<script>
    let student=new Object();
    student.name = '蔡徐坤';
    student.age=22,
        student.sing=function(){
        console.log('鸡你太美');
    };
    student.jump=function(){
        console.log("一段舞蹈");
    }
</script>

或者通过写一个构造函数,使用this.属性,进行快速构造初始化.快速就是不用每次想要一个对象就去手动敲很多行代码,就可以直接调用这个函数就有了一个对象

DOM API

这些个API是浏览器提供给Js的原生接口,有了它们,我们就能针对页面上的元素进行操作了

HTML中的每个html标签都可以视为是一个JS中可以操作的对象,操作这个对象就可以影响界面的显示

除了原生DOM API之外,前端也是有大量的框架或者库的,比如jquery,react,vue等

获取元素

要想操作页面上的某个元素,我们必须先拿到这个元素对应的js对象

querySelector
querySelectorAll

其次我们要知道,一个页面加载好了(所以要写在结构的下面),就会自动生成一个全局变量,叫document,上述两个方法正是通过document进行调用

选择的时候,因为是对应html中的各种标签,所以这里也是采用了css中的选择器的方式进行选择

如:基础选择器:标签选择器,类选择器,id选择器,通配符选择器.符合选择器:后代/子代选择器,伪类选择器,并集选择器.这里用法一样

触发事件

事件三要素

事件源:那个html元素产生的事件
事件类型:是鼠标点击了,还是滚动条…
事件的处理程序:当事件产生之后,执行啥样的js代码

如常见的点击事件:

<body>
    <button>按钮</button>
    <script>
        let button = document.querySelector('button');//事件源
        button.onclick=function(){//事件类型:点击
            alert("你点我");//处理程序
        }
    </script>
</body>

上述的function是一个匿名的回调函数,只有捕获到了点击事件才会触发弹窗

操作元素
1. 操作元素内容
2. 操作元素属性
3. 操作元素样式

对1:操作内容:如实现一个点击按钮,每次点击都能使得原本的数字加一:

<body>
    <div>0</div>
    <button id="plus">+</button>
    <script>
        let plusBtn = document.querySelector("#plus");
        plusBtn.onclick = function(){
            let div = document.querySelector('div');
            let val = parseInt(div.innerHTML);//这里获得的是一个字符串类型的变量,然后强转为整数
            val+=1;
            div.innerHTML=val;
        }
    </script>
</body>

Note:单标签input没有innerHTML,它只有value

对2:操作属性:如实现一个点击之后切换播放和暂停的按钮,不可使用button

<body>
    <input type="button" value="播放">
    <script>
        let div = document.querySelector('input');
        div.onclick = function(){
            if(div.value=='播放'){
                div.value='暂停';
            }else if(div.value='暂停'){
                div.value='播放';
            }
        }
    </script>
</body>

和前面一个代码的区别就是这里操作的是Input标签里的value属性而不是innerHTML

再实现一个复选框,包含一个全选的逻辑:

<body>
    <input type="checkbox" id="all">全都要<br>
    <input type="checkbox" class="girl">妲己<br>
    <input type="checkbox" class="girl">貂蝉<br>
    <input type="checkbox" class="girl">孙尚香<br>
    <input type="checkbox" class="girl">大乔<br>
    <input type="checkbox" class="girl">小乔<br>

    <!-- 主要要实现一个点击全选,就要把所有的选项都选中,有一个没被选中全选也不应该被选中 -->
    <script>
        let all =document.querySelector("#all");
        let girls = document.querySelectorAll(".girl");
        all.onclick = function(){
            for(let i=0;i<girls.length;i++){
                girls[i].checked=all.checked;
            }
        }
        for(let i=0;i<girls.length;i++){
            girls[i].onclick = function(){
                all.checked=checkGirls(girls);
            }
        }
        function checkGirls(girls){
            for(let i=0;i<girls.length;i++){
                if(!girls[i].checked){
                    return "";
                }
            }
            return "checked";
        }
    </script>
</body>

对3:操作元素样式

比如实现一个小功能:点击字体让字体能变大一点,一直点一直变大

<body>
    <div style="font-size: 10px">点我变大</div>
    <script>
        let input = document.querySelector('div');
        input.onclick = function(){
            let val = parseInt(input.style.fontSize);
            val+=5;
            input.style.fontSize=val+'px';
        }
    </script>
</body>

再如点击关灯,实现文字背景颜色的切换:

<body>
    <style>
        .light{
            width: 200px;
            height: 300px;
            background-color: white;
            color: blue;
        }
        .night{
            width: 200px;
            height: 300px;
            background-color: black;
            color: blue;

        }
    </style>
    <div class="light">这是一段话</div>
    <button>关灯</button>
    <script>
        let div = document.querySelector('div');
        let button = document.querySelector('button');
        button.onclick = function(){
            if(button.innerHTML=='关灯'){
                div.className='night';
                button.innerHTML='开灯'
            }else if(button.innerHTML=='开灯'){
                div.className='light';
                button.innerHTML='关灯';
            }
        }
    </script>
</body>

节点操作

上述针对元素的属性的一系列的操作都只是针对元素本身进行一些修改,但是整个页面的元素数量并没有发生变化,所以此处论述一下如何简单的新增和删除一些元素的操作

如在现有的节点上删除一个节点:

<body>
    <style>
        .container{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
    <div class="container">

    </div>
    <script>
        let newdiv = document.createElement('div');
        newdiv.className='child';
        newdiv.id='son';
        newdiv.innerHTML='我是新生儿';

        let father = document.querySelector('div');
        father.appendChild(newdiv);
    </script>
</body>

效果就是:

需要注意的是:孩子是在父亲(大盒子)的左上角开始布置,但并没有说不能超出这个大盒子哦,你小盒子足够大,也是可以超出蓝色范围的

删除节点类似,不作赘述.

综合一点的练习

写一个综合一点的案例:表白墙:

最终效果是:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g4E5TPCQ-1653816292925)(C:\Users\lebronHArden\AppData\Roaming\Typora\typora-user-images\image-20220529164856938.png)]$

<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box; 
        }
        h3{
           text-align: center;
            height: 80px;
            line-height: 80px;
        }
        p{
            text-align: center;
            color: grey;
            margin-bottom: 20px;
        }
        .container{
            width: 100%;
        }
        .row{
            text-align: center;
            display: flex;
            justify-content: center;
            margin: 10px;
        }
        .row>span{
            width: 50px;
            text-align: right;
        }
        .row>input{
            margin-left: 10px;
            text-indent: 2em;
        }
        .row>#submit{
            width: 180px;
            background-color: rgb(136, 236, 136);
            height:35px;
            margin-top: 10px;
            border: none;
            border-radius: 10px;
        }
        #submit:active{
            background-color: rgb(226, 198, 43);
        }
    </style>
   <h3>表白墙</h3>
   <p>点击提交按钮,会将信息显示在表格中</p>
   <div class="container">
        <div class="row">
            <span>谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说:</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
   </div>
   

   <script>
       let submitBtn = document.querySelector("#submit");
       submitBtn.onclick=function(){
           let input =document.querySelectorAll("input");
           let from =input[0].value;
           let to = input[1].value;
           let say = input[2].value;
           if(from==''||to==''||say==''){
               return;//啥也不干
           }
           let newDiv = document.createElement("div");
           newDiv.innerHTML=from+"对"+to+"说"+say;
           newDiv.className='row';
           let father = document.querySelector('.container');
           father.appendChild(newDiv);
           //清空输入框内的内容,以便于下次在输入
           for(let i=0;i<3;i++){
               input[i].value="";
           }
       }
   </script>
</body>