WEB前端学习（三）——JavaScript

最新推荐文章于 2024-04-08 19:14:22 发布

mango660

最新推荐文章于 2024-04-08 19:14:22 发布

阅读量242

点赞数

分类专栏： Web前端文章标签： js javascript 脚本语言

本文链接：https://blog.csdn.net/mango660/article/details/105823431

版权

Web前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

JavaScript基础
JavaScript 语法
JavaScript 函数
JavaScript异常捕获
- - 异常捕获
  - 事件
JavaScriptDOM对象简介
JavaScript事件详解
JavaScript内置对象
JSDOM对象控制HTML元素详解
JS浏览器对象
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("<p>this is my first JS</p>");

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)

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面向对象

认识面向对象

面向对象

mango660

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端学习（三）——JavaScript

文章目录JavaScript基础JavaScript介绍JavaScript实现JavaScript输出JavaScript语法JavaScript注释JavaScript变量JavaScript数据类型JavaScript 语法JavaScript运算符JavaScript条件语句JavaScript循环语句JavaScript跳转语句JavaScript 函数了解函数定义函数函数调用带参数的函...
复制链接

扫一扫

专栏目录