day3 前端JavaScript（交互）（2022-02-23

作者: 胖胖胖虎 | 来源:发表于2022-02-23 15:01 被阅读0次

day3 前端JavaScript（交互）（2022-02-23
前端学习(面试):JavaScript篇
JavaScript 介绍
js简介
2019-03-13
js的基础知识与应用（一）
js基础知识
javascript入门
JavaScript入门
第一篇小概念普及

JavaScript 基础语法

动态脚本语言：负责前端界面交互

过程

前端事件是设置以on开头的标记中的属性
执行的js函数是以on开头的标记的属性值
js函数代表一段动态变化的js代码
js函数分为内部函数和自定义函数
1.内部函数是js语言已经提供好的函数，可以直接通过名字使用
2.自定义函数是我们需要自己完成代码的编写，它可以实现我们需要的个性化的变化

js代码编写方式

嵌入编写将js代码编写在html代码文件中，需要编写在script（脚本）标记中，script标记可以出现在html任意位置，建议写在body标记后面
外部编写单独写在js文件中 html需要通过script引入js文件

自定义函数的语法
function 函数名（）{
函数代码
}

嵌入式编写范例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 先给h1标记设置id属性 -->
        <h1 id="a1">点我变色</h1>
        <button onclick="alert('点我了')">点我</button>
        <button onclick="window.close()">不点我</button>
        <button onclick=f()>我</button>
    </body>
    <script type="text/javascript">
        //js注释
        //自定义函数
        function f(){
            //1.找到h1标记
            //2.修改h1标记内容的颜色
            document.getElementById('a1').style.color='blue'
            //document 所有标记的总和
            // . 里面的
            //getElementById 内部函数 通过标记的id属性值找到一个标记
            //style 标记的样式
            //color 具体的样式属性
            //= 在js中是赋值的含义 
        }
    </script>
</html>

外部编写范例

外部编写js.js

function f1(){
    document.getElementById('a4').style.color='orange'
}
function f2(){
    document.getElementById('a4').style.fontSize='100px'
}
function f3(){
    document.getElementById('a4').style.textAlign='center'
}

js外部使用.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入外部js文件 -->
        <script src="外部js.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1 id="a4">变化多端</h1>
        <button onclick=f1()>变色</button>
        <button onclick=f2()>变大</button>
        <button onclick=f3()>居中</button>
        <button onclick=f1();f2();f3()>全都有</button>
    </body>
</html>