js基本语法，dom对象，bom对象

javaScript

基本语法

书写位置

1.以脚本块的形式书写在页面中

2.以脚本文件的形式书写在脚本文件中，在页面进行引入

变量

用于声明后使用变量名进行指定数据的保存

js是一种弱类型的语言，在进行数据声明时无需指定数据类型，在运行期间会自动根据保存的数据进行类型转换

所以 js中声明变量语法统一为 var 变量名=值;

数据类型

js中提供5中数据类型进行全数据的类型声明

Number类型分为整型和实型
例如:　15 2.9 4E5

String类型
例如　“abc” “jack ” ‘单引号双引号相同’
Null类型只有一个值，即null。Null是一个位符，表示一个变量已经有值，但值为空
Boolean类型
布尔类型只取两个值true或false
Undefined
变量没有定义

typeof操作符

由于javascript是一种泛数据类型的语言，需要有一种方法来检测指定变量的数据类型，返回如下字符串：
“undefined”——如果这个值未定义
“boolean”——如果这个值是布尔值
“string”——字符串值
“number”——数值
“object”——对象或null
“function”——函数

运算符

流程控制语句

注释

html注释：

css注释：/* 注释内容 */

js注释：//注释内容 /*注释内容*/

ctrl+/进 快捷注释

弹出框

属于dom对象提供的方法，在当前浏览器窗口进行弹窗，可以省略相应的对象

        // 警告对话框 
        // 将警告内容书写在页面弹窗中进行展示
        alert("弹窗");

        //提示对话框
        //将提示内容与一个可以输入数据的文本框显示在弹窗中，可以为文本框设置默认内容
        // 在页面输入的内容返回就是字符串形式
        var color = prompt("提示信息", "输入框中的默认信息");
        alert(color);
            
        // 确认对话框
        //将提示内容进行提示，只提供确认 取消按钮 返回boolean类型数据
        var result = confirm("确认要删除吗?");
        alert(result)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置body文本居中对齐 */
        body {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        // 通过提示框获取代表打印行数的字符串
        var count = prompt("请输入打印行数", "5");
        // 虽然js进行运算时会自动进行类型转换，但尽量进行手动转换后进行操作
        var size = parseInt(count);
        //外层循环控制行数
        for (var i = 1; i <= size; i++) {
            //内层循环控制列数
            //i=n  j=2n-1
            for(var j=1;j<=2*i-1;j++){
                document.write("*");
            }
            document.write("<br>");
        }
    </script>
</head>
<body>
</body>
</html>

BOM对象模型

浏览器对象模型,将当前浏览器当做一个对象，浏览器中各个元素当做对象，不同的元素提供相应的方法进行使用，与java不同的是，这些对象在打开浏览器的时候已经自动创建完毕，无需创建可以直接通过对象名.方法进行使用

浏览器对象模型是用于描述对象与对象之间层次关系的模型，该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

history：历史记录对象

用于保存当前页面所访问的全部页面信息，用于历史跳转

location：地址对象

用于保存当前页面url地址

document：文档对象

可以理解保存的是当前页面展示的所有文档，可以看出body标签

一般直接使用相应对象而省略window对象的书写，原因是因为，书写的代码在当前窗口运行

location对象

href 设置或返回完整的URL
reload() 重新加载当前文档

    <script type="text/javascript">
    //输出当前页面url地址
   // alert(location.href);
   //也可以通过对象直接赋值的形式修改当前窗口的url
   //url被修改  页面也会进行修改

    //刷新当前页面
   // location.reload();
    </script>
</head>
<body>
   <!-- a标签的另一种使用方式 -->
   <!-- 将a标签跳转页面的功能改为执行js代码 -->
   <a href="javascript:location.reload();">刷新</a>
   <a href="javascript:location.href='two.html';">two</a>
</body>

history对象

back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go(int) 加载history列表中的某个具体页面

    <!-- 使用a标签点击执行js代码 -->
    <a href="javascript:history.back()">返回</a>
    <a href="javascript:history.forward();">前进</a>
    <!-- 根据指定跳转0代表当前可以根据输入数字进行多级历史跳转 -->
    <a href="javascript:history.go(-2)">走你</a>

screen屏幕对象

用于获取当前客户端屏幕分辨率

    <script>
        var width = screen.availWidth;   //返回显示屏幕的宽度(除 Windows 任务栏之外)
        var height = screen.availHeight;  //返回显示屏幕的高度
        var showWidth = screen.width;  //返回显示器屏幕的宽度。
        var showHeight = screen.height;  // 返回显示屏幕的高度。
        document.write("width:" + width + "<br/>height:" +
            height + "<br/>showWidth:" + showWidth + "<br/>showHeight:" + showHeight);
        if (showWidth < 2024 || showHeight < 768) {
            alert("为保证你的浏览器效果，\n请调整屏幕分辨率。");
        }
    </script>

window对象

  <script>

        //setInterval计时器  直接执行指定时间后重复执行
        var i = 1;
        // lambda表达式写法
        //setInterval(() => { scrollTo(0, i++); }, 1);

        //正常语法
        //  setInterval(function (){scrollTo(0, i++); }, 1);


      //  setTimeout定时器  指定时间后执行一次
     var bbb= setTimeout(() => {alert("已经过了3秒了") }, 3000);

    </script>
    <style>
        div {
            height: 1200px;
            width: 200px;
            background-image: url(../img/cxk.gif);
            background-image: url(../img/cxk2.gif);
        }
    </style>
</head>

<body>


    <!-- url，打开样式，打开窗口样式设置 -->
    <a href="javascript:window.open('one.html','_blank ','width=400,height=400,left=100,top=300')">打开</a>
    <!-- 要关闭的浏览器窗口对象.close() -->
    <a href="javascript:window.close()">关闭</a>

    <a href=" javascript: var aaa = setInterval(() => { scrollTo(0, i += 100); }, 1000);">开始</a>
    <a href="javascript:clearInterval(aaa)">停止</a>

    <a href="javascript:clearTimeout(bbb)">停止定时器</a>

DOM对象模型

用于对页面中显示的其他标签对象进行操作

注意：在使用js进行文档对象操作时，要确保文档对象已存在

dom对象代表的标签属性可以直接通过对象名.属性进行赋值与获取

<body>
<input type="text"id="t1" value="asd">
<a href="javascript:alert(t2.value=t1.value)">赋值</a>
<br>
<input type="text" id="t2">
</body>

<script>
//document.bgColor="";//设置背景颜色
document.body;//获取body对象
document.title="标题";//设置页面标题
var t1=document.getElementById("t1");//获取指定id代表的标签对象   
var t2=document.getElementById("t2");//获取指定id代表的标签对象 
</script>

标签内容属性

innerHtml：两标签中间的内容

outerHtml：包括本身标签内的所有内容

innerText：两标签中间的内容,

outerText：包括本身标签内的所有内容

在进行获取时不会显示标签，只显示多个标签中的内容（只显示当前标签中的所有文本）

在进行赋值时会将传入的字符串直接显示在页面（如果字符串是标签形式也不会书写）

<script>
 

    function inner() {
        var f1=document.getElementById("f1");
        alert(f1.innerHTML="<a href='#'>修改后的内容</a>");
    }
    function outer() {
        var f1=document.getElementById("f1");
        alert(f1.outerHTML="<a href='#'>修改后的内容</a>");
    }
    function innertext() {
        var f1=document.getElementById("f1");
        alert(f1.innerText="<a href='#'>修改后的内容</a>");
    }
    function outerrtext() {
        var f1=document.getElementById("f1");
        alert(f1.outerText="<a href='#'>修改后的内容</a>");
    }
</script>

<body>

<a href="javascript:inner()">innerHtml</a>
<a href="javascript:outer()">outerHtml</a>

<a href="javascript:innertext()">innertext</a>
<a href="javascript:outerrtext()">outertext</a>
</body>

使用js进行css样式修改

使用style属性进行js对css样式的修改（注意有些样式名与css不同）

    <style type="text/css">
        div {
            height: 200px;
            width: 200px;
            position: absolute;
        }

        .d1 {
            background-color: aquamarine;
            z-index: 1;
        }

        .d2 {
            background-color: yellowgreen;
            
        }
    </style>
    <script type="text/javascript">
        function oneShow() {
            //第一页对应div显示 第二页对应div隐藏
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var a1=document.getElementById("a1");
            var a2=document.getElementById("a2");
            i1.style.display = "block";
            i2.style.display = "none";
            a1.style.backgroundColor="aquamarine";
            a2.style.backgroundColor="white";
        }
        function twoShow() {
            //第二页对应div显示 第一页对应div隐藏
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var a1=document.getElementById("a1");
            var a2=document.getElementById("a2");
            i2.style.display = "block";
            i1.style.display = "none";
            a2.style.backgroundColor="yellowgreen";
            a1.style.backgroundColor="white";
        }
    </script>
</head>
<body>
    <!-- tab页切换 -->

    <a href="javascript:oneShow()" id="a1">第一页</a>
    <a href="javascript:twoShow()" id="a2">第二页</a>
    <div class="d1" id="i1"></div>
    <div class="d2" id="i2"></div>
</body>

使用js进行样式修改时会出现在js中书写大量的css属性与值，并且没有提示，所以一般我们不会在js中书写css相应的属性与值,一般，我们通过class属性进行样式的修改，在css中设置要相应的样式，通过js对class属性进行修改从而实现样式的修改

  <style type="text/css">
        div {
            height: 200px;
            width: 200px;
            position: absolute;
        }

        .d1 {
            background-color: aquamarine;
        }

        .d2 {
            background-color: yellowgreen;
        }

        /* 将修改后的样式定义相应的class 在css中预先书写 */

        /*div 的显示隐藏  */
        .hidden {
            display: none;
        }
        .zoom{
            zoom: 2;
        }
        .border{
            border-left: 2px solid black ;
            border-top: 2px solid black ;
            border-right: 2px solid black ;
        }
    </style>
    <!-- 使用js进行样式修改正确的书写方式 -->

    <script type="text/javascript">
        function oneShow() {
            //获取需要显示隐藏的元素对象
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var a1 = document.getElementById("a1");
            var a2 = document.getElementById("a2");
            //使用class进行样式设置
            i1.classList.remove("hidden");
            i2.classList.add("hidden");
            a1.classList.add("d1")
            a2.classList.remove("d2")
            a1.classList.add("zoom")
            a2.classList.remove("zoom")
            a1.classList.add("border")
            a2.classList.remove("border")
        }
        function twoShow() {
            //获取需要显示隐藏的元素对象
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var a1 = document.getElementById("a1");
            var a2 = document.getElementById("a2");
            //使用class进行样式设置
            i2.classList.remove("hidden");
            i1.classList.add("hidden");
            a2.classList.add("d2")
            a1.classList.remove("d1")
            a2.classList.add("zoom")
            a1.classList.remove("zoom")
            a2.classList.add("border")
            a1.classList.remove("border")
        }
    </script>
</head>
<body>
    <!-- tab页切换 -->
    <a href="javascript:oneShow()" id="a1">第一页</a>
    <a href="javascript:twoShow()" id="a2">第二页</a>
    <div class="d1" id="i1"></div>
    <div class="d2" id="i2"></div>
</body>