mango660
mango660

WEB前端学习（三）——JavaScript

文章目录

  • JavaScript基础
      • JavaScript介绍
      • JavaScript实现
      • JavaScript输出
      • JavaScript语法
      • JavaScript注释
      • JavaScript变量
      • JavaScript数据类型
  • JavaScript 语法
      • JavaScript运算符
      • JavaScript条件语句
      • JavaScript循环语句
      • JavaScript跳转语句
  • JavaScript 函数
      • 了解函数
      • 定义函数
      • 函数调用
      • 带参数的函数
      • 带返回值的函数
      • 全局变量和局部变量
  • JavaScript异常捕获
      • 异常捕获
      • 事件
  • JavaScriptDOM对象简介
      • DOM简介
      • DOM操作HTML
      • DOM操作CSS
      • DOM EventListener
  • JavaScript事件详解
      • JavaScript事件流
      • 事件处理
      • 事件对象
  • JavaScript内置对象
      • 什么是对象
      • String字符串对象
      • Date日期对象
      • Array数组对象
      • Math对象
  • JSDOM对象控制HTML元素详解
  • JS浏览器对象
      • window对象
      • 计时器
      • History对象
      • Location对象
  • JS瀑布流效果
  • JS面向对象
      • 认识面向对象
      • 面向对象

JavaScript基础

JavaScript介绍

JacaScript是互联网上最流行的脚本语言，可用于WEB和HTML，更广泛用于服务器、PC端、移动端

JavaScript脚本语言：

  • JS是一种轻量级的编程语言
  • JS是可插入HTML页面的编程代码
  • JS插入HTML页面后，可有所有的浏览器执行

JavaScript实现

  • JS用法：

    • HTML中的脚本必须位于< script>>/< script>标签之间
    • 脚本可被放置在HTML页面的< body>和 < head>部分中

  • JS标签

  • JS使用限制

  • 在HTML中，不限制脚本数量
  • 通常会把脚本放置于< head>标签中，以不干扰页面内容

JavaScript输出

  • JS通常用来操作HTML

  • 文档输出：

          document.write("
    this is my first JS
    ");

JavaScript语法

  • JS语句：向浏览器发出命令，告诉浏览器该做什么

  • 分号：可选项

  • JS代码：执行顺序按编写顺序执行

  • 标识符：

    • 必须以字母、下划线或美元符号开始
    • JS关键字不可用

  • 空格： JS会忽略多余的空格

  • 代码换行

  • 保留字

JavaScript注释

  • 单行注释：
  • //
  • 多行注释： /**/

JavaScript变量

存储信息的容器

JavaScript数据类型

  • 字符串（String）
  • 数字（Number）
  • 布尔（Boolean）
  • 数组（Array）
  • 对象（Object)
  • 空（null)
  • 未定义
  • 可以通过复制为null的方式清除变量
        // No.1
        var arr=["jjike", "fjdk", 3, 4];
        document.write(arr[1]);
        // No.2
        var num = new Array( );
        num[0] = 1;
        num[1] = 2;
        num[3] = 4;
        document.write(num[0]);
        // N0.3
         var num = new Array("hello","guys","welcome");
        document.write(num[0]);

JavaScript 语法

JavaScript运算符

  • 算术运算符
  • 赋值运算符
  • 字符串操作
  • 比较运算符

===
!==

  • 逻辑运算符
  • 条件运算符
// 孩子啊，长点心吧
 <p>i = 10, j = 10; i + j = ?</p>
    <p id="sumid"></p>
    <button onclick="mysum()">结果</button>
    <script>
        function mysum() {
            var i = 10;
            var j = 10;
            var m = i + j;
            document.getElementById("sumid").innerHTML=m;

        }
    </script>

JavaScript条件语句

  • if…else
  • switch

JavaScript循环语句

  • for循环 、 for/in
  • while 循环、 do … while 循环

JavaScript跳转语句

  • break
  • continue

JavaScript 函数

了解函数

  • 函数：由事件驱动的或者当它被调用时执行的可重复使用的代码块
   <script>
        function demo(a, b) {
            var sum = a+b;
            return sum;
        }
        var v1 = demo(10, 10);
        alert(v1);  // 弹出对话框
   </script>

定义函数

  • 定义函数
function 函数名（）{
     函数体；
}
  • 注意 ：大小写极其敏感

函数调用

调用方式：

  • 在< script>标签内调用
  • 在HTML文件中调用
   <script>
        function demo() {
            var a = 10;
            var b = 10;
            var sum = a+b;
            alert(sum);
        }
    </script>
    <button onclik="demo()">按钮<button>

带参数的函数

带返回值的函数

全局变量和局部变量

JavaScript异常捕获

异常捕获

  • 异常：当JS引擎执行JS代码时，发生了错误，导致程序停止运行
  • 异常抛出：当异常产生，并且将这个异常生成一个错误信息
  • 异常捕获：
try{
		发生异常的代码块；
}catch(err){
		错误信息处理；
}

    <script>
        function demo() {
            try{
                alert(str);
            }catch(err){
                alert(err)
            }
        }
       demo();
    </script>
  • Throw语句： 通过throw语句创建一个自定义错误
<body>
    <form>
        <input id="txt" type="text">
        <input id="btn" type="button" onclick="demo()" value="按钮">
    </form>

    <script>
        function demo() {
            try {
                var e = document.getElementById("txt").value;
                if (e == "") {
                    throw "请输入";
                }
            }catch(err){
                alert(err);
            }
        }
       demo();
    </script>

</body>

事件

  • 事件：可以被JS侦测到的行为
  • 主要事件
事件 描述
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移动光标事件
onLoad 网页加载事件
onUnload 关闭网页事件 
//页面效果need
// HIML
    <div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
    <script>
        function onOver(ooj){
            ooj.innerHTML = "hello";
        }
        function onOut(ooj) {
            ooj.innerHTML = "world";
        }
    </script>
 // CSS
.div{
    width: 100px;
    height: 100px;
    background-color: #99CC33;
}

//账号输入，密码输入need

    <form>
        <input type="txt" onchange="changedemo(this)">
    </form>
    <script>
        function changedemo(bg) {
            alert("hello,内容被改了");
        }
    </script>

JavaScriptDOM对象简介

DOM简介

  • HTML DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model)
Document
Root element < html>
Element:< head>
Element < body>
Element: < title>
Text:my title
Element: < a>
Element: < h1>
Attribute href
Text:My link
Text: My header

DOM操作HTML

  • JS能够改变页面中的所有HTML元素
  • JS能够改变页面中的所有HTML属性
  • JS能够改变页面中的所有CSS样式
  • JS能够对页面中的所有事件作出反应

DOM操作CSS

  • 改变HTML输出流

不要在文档加载完成之后使用document.write(),这样会覆盖该文档


// 覆盖文档
    <p>hello</p>
    <button onclick="demo()">按钮</button>
    <script>
        function demo() {
            document.write("world");
        }
    </script>
  • 寻找元素
  • 通过id找到HTML元素
  • 通过标签名找到HTML元素

  • 改变HTML内容： 使用属性：innerHTML

  • 改变HTML属性： 使用属性： attribute

  • 通过DOM对象改变CSS
    语法：document.getElementById(id).style.property=new style

DOM EventListener

  • DOM EventListener
    方法： addEventListener() / removeEventListner()

  • addEventListener()
    方法用于向指定元素添加事件句柄

  • removeEventListener();
    移除方法添加的事件句柄

JavaScript事件详解

JavaScript事件流

事件处理

事件对象

JavaScript内置对象

什么是对象

String字符串对象

Date日期对象

Array数组对象

Math对象

JSDOM对象控制HTML元素详解

JS浏览器对象

window对象

计时器

History对象

Location对象

JS瀑布流效果

JS面向对象

认识面向对象

面向对象

你可能感兴趣的:(Web前端)