JavaWeb日记1

视频地址

黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili

HTML

负责网页的结构

HTML 标签参考手册 (w3school.com.cn)

HTML不区分大小写，可以使用双引号和单引号，语法比较松散

CSS

负责网页的表现

JS

负责网页的行为

跨平台、面向对象的脚本语言

js引入方式

1. 内部脚本：<script>alert("Hello JavaScript")</script>
2. 外部脚本：<script src="js/demo.js"></script>

<script>不能自闭合

js基础语法

js区分大小写，大括号代表代码块

输出语句

1. window.alert()弹出警告框
2. document.write()写入html页面
3. console.log()浏览器控制台输出
   1. 鼠标右键点击检查/f12快捷键调出控制台
   2. 点击Console控制台

变量

var a=20;

a="张三";

js是一门弱类型语言，变量可以存放不同类型的值

1. var所定义的变量作用域比较大（相当于全局变量）
2. 可以重复定义

   var x=1;
   var x=3;

ECMAScript 6新增了let关键字，所声明的变量只在代码块内有效

ECMAScript 6新增了const关键字，用来声明一个只读的常量，不能改变值

数据类型

• 原始类型
  • number,string,boolean,null,undefined
  • 使用typeof可以得到数据类型
• 运算符
  • ==：比较时进行类型转换
  • ===：不进行类型转换
  • 类型转换
    • 字符串类型转为数字：字面值不是数字转为NaN
    • 其他类型转换为boolean：0和NaN转为false,空字符串转为false,null和undefined转为false
• 引用类型

js函数

• function functionName(参数1,参数2){}
  • 形式参数不需要类型，返回值不需要定义类型，可以直接在函数内部使用return返回
  • 调用：函数名(参数1,参数2);
• var functionName=function(参数1,参数2){}
• 在js中函数可以传递任意个数的参数

js对象

• Array

  • 用于定义数组
    • var arr=new Array(1,2,3,4);
    • var arr=[1,2,3,4];
  • arr[0]=1;
  • 长度可变，类型可变
  • length,forEach()：遍历数组中有值的元素,push(),aplice(start,deleteCount)
  • 箭头函数(...)=>{...}：简化函数的定义

• String

  • length,charAt(),indexof(),trim(),substring()

• JSON

  • js中自定义对象

    • var 对象名={
      
          属性名1：属性值1，
          属性名2：属性值2,
          函数名称：function(形参列表){}
      };

  • JavaScript Objection Notation：JavaScript对象标记法
    • 属性名需要加双引号

      • var 变量名='{"key":value1,"key2":value2}';
        var jsonstr=''{"name":"Jerry","age":18}';

    • parse():将JSON对象转为JS对象

      • var jsObject=JSON.parse(userStr);

    • stringify():JS对象转为JSON字符串

      • var jsonStr=JSON.stringify(jsObject);

• BOM

  • Browser Object Model浏览器对象模型
  • Window：浏览器窗口对象
    • 获取：直接使用window

      • window.alert("window");
        alert("window");

    • 属性
      • history,location,navigator
    • 方法
      • alert()：警告
      • confirm()：确认

        • var flag=confirm("您确认删除吗");

      • setInterval()：按周期执行

        • var i=0;
          var setInterval(function(){
              i++;
              console.log("定时器执行了"+i+"次");
          },2000)

      • setTimeout()：延迟指定时间执行一次

        • setTimeout(function(){
              alert("JS");
          },3000);

  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象
    • 使用window.location.属性/location.属性
    • href：设置或返回完整url

      • alert(location.href);
        location.href="https://....";

• DOM

  • Document Object Model：文档对象模型
  • 将标记语言的各个组成部分封装成对应的对象
    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
  • HTML DOM
    • 获取对象
      • 
    • 查询参考手册，调用属性和方法

      • var divs=getElementsByClassName('cls');
        var divs1=divs[0];
        div1.innerHTML="修改的值";

js事件监听

事件绑定

• 通过HTML标签中的事件属性

  • <input type="button" onclick="on()"value="按钮1">
    <script>
        function on(){
            alert('我被点击了！');
        }
    </script>

• 通过DOM元素属性绑定

  • <input type="button" id="btn" value="按钮">
    <script>
        document.getElementById('btn').onclick=function(){
            alert('我被点击了！');
        }
    </script>

•