基础课-前端JS

合集 - 基础课-JS(3)

1.基础课-前端JS2023-11-08

2.基础课-前端CSS2023-11-073.基础课-前端HTML2023-11-06

收起

JAVA Script基础语法

意义：让前端界面动起来；它是负责前端界面与用户之间的交互

前端界面变化的思维导图：

                          触发                       调用                     运行

用户进行操作------------>前端事件------------>JS函数------------>界面产生变化

JS代码的编写方式

1.嵌入编写

嵌入在HTML中的script（脚本）标记中，它可以出现在任意位置，建议放在body代码标记后

2.外部编写

单独编写在JS文件中，使用script标记进行引入

 

前端事件是标记中以on开头的属性

on开头的属性值需要设置事件发生后需要调用的函数"函数名()"

onclick---点击     onmouseover---鼠标指针移动到指定的对象上时触发事件发生     onmouseout---鼠标指针离开指定的对象上时触发事件发生

例如：<button onclick="red()">变红</button>

JS的函数分为两类：

 

1.内部函数

可以直接调用，例如alert（弹框）、close（关闭）

2.自定义函数

函数代码需要程序员编写，可以完成个性化的变化需求

自定义函数要求：

<script>

function 空格 函数名(){

    函数具体代码（例如：document.getElementById('h').style.color='#09f4a1'）

}

</script>

JS动态变化代码编写套路

1.找到需要变化的标记

2.修改相关的属性值

 

document---文档对象（所有标记）

.意义---里面的（点）

getElementByld函数---通过标记的id属性值获得某个标记

style---样式属性（具体样式属性名遵守驼峰命名规则，例如：fontSize）

= 意义---赋值符（右侧的数据赋值给左侧）

字符数据需要使用引号括起来（使用' '或" "）

block---在style.display.中代表块标记