【无标题】

前端Web开发
HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
javaScript（Js）脚本语言。用来控制网页行为的，它能使网页交互。（交互效果）
2.JS基础语法
JS输出语句

<script>
//方式一: 弹出警告框
window.alert("hello js");

//方式二: 写入html页面中
document.write("hello js");

//方式三: 控制台输出,在console可以看到
console.log("hello js");
</script>
JS变量

 var
var声明的变量可以接受任何数据类型的值，变量可以多次赋值，后面值把前面覆盖
var声明的变量的作用于是全局的
局部变量，不能重新定义

const
常量，不能重新定义，不能多次赋值

3.JS函数
<script>
    //定义函数
    function add(a,b){
        return a + b;
    }

    //函数调用
    var result = add(10,20);
    alert(result);
</script>

4.JS对象
Array

特点：长度可变，类型可变

<script>
    //定义数组
    var arr = new Array(1,2,3,4);
    console.log(arr[0]);
    
    arr[10] = 50;
    
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    
    //forEach：遍历数组中有值的元素
    arr.forEach(function(e) {
        console.log(e)
    });
    
    //push：添加元素到数组尾部
    arr.push(7,8,9);
    console.log(arr);
    
    //splice：删除元素
    arr.splice(2,2)   //从数组下标为2开始删，删2个
    console.log(arr);
</script>

String

<script>
    //定义字符串
    var str = "Hello";
</script>

自定义对象

<script>
    //自定义对象
    var user = {
        name:"Tom",
        age:20,
        gender:"male",
        eat: function(){
            alert("用膳");
        }
    };

    //获取对象中的属性
    console.log(user.name);
    //对象中方法的调用
    user.eat();
</script>

JSON

作为数据的载体，在网络中传输。

json必须使用双引号

<script>
    //定义json
    var jsonstr = '{"name":"Tom", "age":"18", "addr":["北京","上海","西安"]}';
    alert(jsonstr.name)   //结果为undefined，因为jsonstr是一个字符串，要是一个对象才可以

    //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    alert(obj.name)

    //js对象--json字符串
    var jsonStr = JSON.stringify(jsonstr);
</script>

BOM
浏览器对象模型，运行JavaScript与浏览器对话，JavaScript将浏览器的各个部分封装为对象

BOM中提供了5个对象：
主要学习下面两个对象
window：浏览器窗口对象

<script>
    //BOM

    //window
    //获取（window可以省略）
    window.alert("Hello BOM");
    
    //方法
    //confirm - 对话框
    var flag = window.confirm("你确认删除该记录吗？");
    alert(flag);

    //定时器 - setInterval -- 周期性的执行某个函数
    var i = 0;
    setInterval(function(){
        i++
        console.log("定时器执行了"+i+"次")
    })

    //定时器 - srtTimeout --延迟指定时间执行一次
    setTimeout(function(){
        alert("JS")
    },3000);
</script>

location：地址栏对象

<script>
    //location：地址栏对象
    alert(location.href)

    location.href = "https://www.baidu.com/index.htm"
</script>

DOM文档对象模型
将 HTML 文档的各个组成部分封装为对象

获取DOM中的元素对象（Element对象 ，也就是标签）
操作Element对象的属性（标签的属性）