前端入门（四）之JavaScript

橙意满满的西瓜大侠

于 2024-07-21 10:02:40 发布

阅读量422

点赞数 12

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/2302_79795489/article/details/140577967

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、什么是JavaScript

1、什么是JS：

注意：JavaScript简称JS；JS和Java没有关系

2、JS的作用：

3、JS的导入方式：

（1）内联样式：

在html文件中直接嵌入js代码

（css代码放在style标签内，而js代码放在script标签内，script可以在head也可以在body标签内）

（2）外联样式：

把js代码保存在单独的外部文件中，通过script标签的src属性引入

4、打印方式：

（1）控制台打印：

console.log()

实时浏览器->f12->console，在这里可以看到打印的内容

（2）弹窗打印：

alert()

注意：内联样式得放在script标签中（无论在head还是body部分）

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS学习</title>

    <script>
        console.log("Hello,head标签的内联样式")
    </script>

    <!-- src是路径 -->
    <script src="./js/myscript.js"></script>
</head>

<body>
    <script>
        console.log('Hello body标签的内联样式');
        alert('你好，内联样式弹窗');
    </script>
</body>

</html>

二、JavaScript基本语法

1、变量和数据类型

  <script>
    var x;   // 变量: 具有函数作用域 
    let y=5;  // 变量: 具有块级作用域 
    //推荐使用let，因为let更安全、更灵活
    const PI=3.14;  //常量 
    console.log(x,y,PI);
     

     let text="hello";  //字符串
     console.log(text); 
     let empty_value=null; //空值
     console.log(empty_value);
     //undefined: 说明变量已声明，但是未初始化，可能在将来被赋值
     //null: 已被赋值，就是空值（没有实际对象值）
    </script>

2、控制语句

（1）条件语句

  <script>
    let time=9;
    if(time<12){
        console.log('上午好');
    }
    else if(time<18){
        console.log('下午好');
    }
    else{
        console.log('晚上好');
    }
  </script>

（2）循环语句

    <script>
        for(let i=1;i<=10;i++)
    {
        console.log(i);
    }

        let count=1;
        while(count<=10)
    {
        console.log(count);
        count++;
    }

    // 循环关键字: break（结束循环）和continue（跳过当前循环，进入下一循环）
    for(let i=0;i<7;i++)
    {
        if(i==2)
    {
        continue;
    }
    if(i==4)
    {
        break;
    }
    console.log(i);
    }
    </script>

（3）函数

 <script>
    // function 函数名(参数1，参数2，参数3...){函数体，可以return 返回值;}
      function hello(name){   //注意这里参数不用写类型
        console.log('hello,'+name);
      }
      hello('如花');
   </script>

三、JS的事件处理

1、什么是事件

事件可以充当函数触发的条件

补充：onclick和click的区别

onclick:

直接绑定: 事件处理程序直接写在 HTML 标签内。
覆盖性: 如果同一个元素的 onclick 属性被多次定义，最后一次定义的事件处理程序会覆盖之前的。

click:

分离关注点: 事件处理程序通常写在 JavaScript 文件中，而不是嵌入在 HTML 中，遵循了 HTML 和 JavaScript 分离的原则。
事件委托: 使用事件委托时，可以在父元素上绑定事件处理程序，从而处理其子元素的点击事件，提升性能。
支持多个事件处理程序: 可以为同一个元素绑定多个点击事件处理程序，它们会按顺序执行。

所以：

简单场景: 如果只需要简单地绑定一个点击事件，可以直接使用 onclick 属性。
复杂场景: 如果需要更复杂的事件处理，或者需要保持代码的清洁与分离，建议使用 click 方法，特别是使用 addEventListener 或 jQuery 的 click 方法。

2、绑定事件的三种方法：

（1）HTML属性

eg：使用button标签的html属性，令事件='函数名（）'

 <button onclick="click_event()">

<body>
    <button onclick="click_event()"> <!-- onclick的值为函数 -->
        这是一个点击事件
    </button>

    <input type="text" onfocus="onfocus_event()" onblur="onblur_event()">

    <script>
        //点击函数
        function click_event(){
            alert('点击事件触发了');
        }
        
        function onfocus_event(){
            console.log('聚焦事件');
        }
        function onblur_event(){
            console.log('失焦事件');
        }
    </script>
</body>

注意：这里函数是函数名+（）

（2）DOM属性

第一步：获取元素

得唯一元素：

 let element_id=document.getElementById('box1');
        console.log(element_id); //id唯一，获取到唯一元素

得元素数组：

let element_class=document.getElementsByClassName('box2')[0];
        console.log(element_class); //class可以被多个元素共用，获取到一个数组；可以在后面加上索引值

注意：括号里的参数要加引号，因为是字符串

然后可以修改内容

（1）修改文本内容：

 element_id.innerHTML='<a href="m">链接</a>修改ID选择器标签文本内容'; //innerHTML是一个属性值
 element_class.innerText='<a href="m">链接</a>修改后的类选择器文本';
 //innerHTML: 会解析其中的HTML标记
 //innerText: 会忽略HTML的标记，把内容当作纯文本来处理

（2）修改其他属性值：

element_tag.style.color='red';
element_tag.style.fontSize='20px';

注意：依然要加引号

第二步：绑定事件和对象

button_element.onclick=click_event;

（3）addEventListener方法

第一步：获取对象

第二部：绑定对象和事件

 button_element.addEventListener('click',click_event);

//DOM属性绑定事件
//获取对象
let button_element=document.getElementsByTagName('button')[0];
console.log(button_element);

 //绑定对象和事件
 button_element.onclick=function(){
 alert('DOM属性按键触发');
 } //匿名函数（没有函数名，因为不需要在其他地方调用）

 //addEventListener方法绑定事件
 button_element.addEventListener('click',click_event);
 function click_event(){
 alert('通过addEventlistener触发按键')
 }
 //onclick是属性，button_element.onclick = click_event;
 //表示调用 click_event 函数

 //click是方法，button_element.addEventListener('click', click_event);
 //这样是把函数本身传给 addEventListener，当点击事件发生时，浏览器会自动调用这个函数
 //从而正确地绑定事件处理函数

注意：HTML中，函数要加（）；而DOM和addEventListener中，函数不用带括号

橙意满满的西瓜大侠

关注

12
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
前端入门（四）之JavaScript

事件可以充当函数触发的条件补充：onclick和click的区别直接绑定: 事件处理程序直接写在 HTML 标签内。覆盖性: 如果同一个元素的onclick属性被多次定义，最后一次定义的事件处理程序会覆盖之前的。分离关注点: 事件处理程序通常写在 JavaScript 文件中，而不是嵌入在 HTML 中，遵循了 HTML 和 JavaScript 分离的原则。事件委托: 使用事件委托时，可以在父元素上绑定事件处理程序，从而处理其子元素的点击事件，提升性能。支持多个事件处理程序。
复制链接

扫一扫