HTML学习笔记记录---速预javascript---函数、事件、焦点、DOM

javascript部分：

“<script>”使用js的命令

“console.log("内容")”控制台打印显示

<script src="路径"></script>可调用js文件

alert("内容")弹窗显示，在进入浏览器时会出现弹窗

var    声明变量有函数作用域（使用少）
let    声明变量有块级作用域
const    声明常量

var x;
let y = 1;
const PI =3.14;
let name01 = '一二';
console.log(name01);
console.log(x,y,PI);

打印结果：一二
undefined 1 3.14

undefined：已被声明但没有赋值（以后可能会被赋值或者还没有计算出值）

null：表示一个变量被赋值为空，空对象引用或没有对象值

控制语句例如if，if else，for，while等使用方法与C语言几乎一致。

函数：

function 名称（）{ 命令 }    定义函数
名称（）；调用函数

function 名称_with_return（）{ 命令 }                                                    有返回值的函数

function 名称_with_params('参数'){ 命令 }                                              带有参数的函数

js也有作用域用法，例如在body内写的命令为全局变量，在函数体内写的为局部变量，不依靠函数体无法调用。

事件：

js绑定事件的三种方法：HTML属性、DOM属性、addEventListener方法。

例：点击文字后弹出弹窗

<div onclick="ABC()">点击触发弹窗</div>
    <script>
        function ABC() {
            alert('点到了');
        }
    </script>

注：div是可以替换的比如button（按钮）

焦点事件：

<input type="text" onfocus="聚焦()" onblur="失焦()">
    <script>
        function 聚焦() {
            console.log('获得焦点了');   
        }
        function 失焦() {
            console.log('失去焦点了');  
        }
    </script>

onfocus    为聚焦的命令
onblur    为失焦的命令

DOM部分

若想获取数组中某一个元素，就需要输入它的索引值

<div id="box1">ID选择器标签</div>
    <div class="box2">类选择器标签</div>
    <div>普通标签</div>
    <script>
       var element_id = document.getElementById('box1');
        console.log(element_id);

       var element_class = document.getElementsByClassName('box2')[0]
        console.log(element_class)
        
       var element_tag = document.getElementsByTagName('div')[2]
        console.log(element_tag)
    </script>

注：方括号内的数字为索引值

在该script内输入：

element_id.innerHTML = ' <a href="#">一个链接</a>';
element_class.innerText = '<a href="#">一个链接</a>';

 会得到这样的结果

.innerHTML    会对文本进行解析
.innerText    将文本视为纯文本，不进行解析

举例两种用来绑定弹窗触发的方式：

var button_element = document.getElementsByTagName('button')[0]
        console.log(button_element);
在控制台查看一下，“button”是否设定完成

1.不定义函数名（匿名函数） 

button_element.onclick = function(){
            alert('DOM属性按钮触发');

2.定义函数名 

button_element.addEventListener('click',click_event)

        function click_event(){
            alert('addEventListener触发');
        }