Javaweb学习之JavaScript

本文介绍了JavaScript的基本概念,包括其在HTML/CSS中的应用、解释型语言特性、数据类型(如数值、字符串、对象等)、逻辑运算符、数组操作、函数定义与调用、自定义对象、事件处理以及静态和动态事件注册。
摘要由CSDN通过智能技术生成

一、基本介绍

  • JavaScript能改变HTML内容,能改变HTML属性,能改变HTML样式(CSS),能完成页面的数据验证
  • JS需要运行浏览器来解析执行JavaScript代码
  • JavaScript特点
    • JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释
    • JavaScript是一种基于对象的脚本语言,可以创建对象,也能使用现有的对象
    • JavaScript是弱类型的,对变量的数据类型不做严格的要求,变量的数据类型在运行过程中是可以变化的
      • JS代码可以写在script标签中
      • type=“text/javascript” 表示这个脚本(script)类型是 javascript
      • type=“text/javascript” 可以不写,但是建议写上
      • .js 语句可以不写 ; 建议写上
      • alert:输出,使用弹框方式
<script  type="text/javascript">
   var name="js学习";
   alert("name="+name);
  </script>

image.png

  - typeof:输出变量的类型
<script  type="text/javascript">
   var name="js学习";
   alert(typeof name)
  </script>

image.png

  - console.log:调试输出
<script  type="text/javascript">
   var name="JavaScript";
   console.log(name);
   console.log(typeof name);

  </script>

image.png

  • 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关)

二、JavaScript使用方式

方式一

  • 可以在head和body中嵌入script
  • 执行顺序是从上到下的
  • 建议放在head
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
    <script type="text/javascript">
        console.log("ok"); 
    </script>
</head>
<body>
<script type="text/javascript">
    console.log("hi"); 
</script>
</body>
</html>

image.png

方式二

  • 使用script标签引入JS文件
  • 方式一和方式二不能混用,如果混用了不会报错,但是只有一种方式生效
<script type="text/javascript" src="引入的 js 文件"></script>

三、JavaScript数据类型

常用的数据类型

  • number:数值类型
  • string:字符串类型
    • 可以双引号括起来,也可以单引号括起来:“abc”、‘abc’
  • object:对象类型
  • boolean:布尔类型
  • function:函数类型

特殊值

  • undefined:变量未赋初始值时,默认undefined
  • null:空值
  • NaN:Not a Number 非数值
<script type="text/javascript">
    var apple;
    console.log(apple);
    var banana = null;
    console.log(banana);
    console.log(10 * "asd")
</script>

image.png

逻辑运算符

  • 逻辑运算符用于测定变量或值之间的逻辑
    | 运算符 | 描述 |
    | — | — |
    | && | and |
    | || | or |
    | ! | not |

  • 注意细节

    • 在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。
    • 0 、null、 undefined、“”(空串) 都认为是 false
    • && 且运算,有两种情况
      • 当表达式全为真的时候,返回最后一个表达式的值
      • 当表达式中,有一个为假的时候,返回第一个为假的表达式的值
    • || 或运算, 有两种情况
      • 当表达式全为假时,返回最后一个表达式的值
      • 只要有一个表达式为真,就会返回第一个为真的表达式的值

条件运算符

var test= 1>0 ? "学习js":800;
  • 如果 (10> 0) 条件表达式为 T, 返回第一个表达式的值
  • 条件表达式为 F, 返回第 2 个表达式的值

四、数组

  • 数组定义方式1
var test1 = ["123", "456", "789"];
console.log("test1=" + test1);
console.log(test1[1]);
  • 方式二
#空数组
var test2 = [];
#添加元素
test2[0] = "123";
test2[1] = "456";
test2[2] = "789";
console.log("test2=" + test2);
console.log("test2[2]=" + test2[2]);
#如果元素不存在,返回的是undefined
console.log("test2[10]=" + test2[10]);
  • 方式三
var test3 = new Array("123", "456", "789"); 
console.log("test3=" + test3); 
console.log("test3[0]=" + test3[0]);//Audi
  • 方式四
#空数组
var test4 = new Array();
console.log(typeof test4);
test4[0] = "aa";
test4[1] = "bb";
#相当于是给数组扩容 
test4[2] = "yy";
#替换
test4[0] = "zz";

数组的遍历

<script type="text/javascript">
    //定义一个数组
    var cars = ["asd", "qwe", "zxc", 10, 20, true];
    //查看数组的长度
    console.log(cars.length)
    //遍历
    for (i = 0; i < cars.length; i++) {
        console.log(cars[i]);
    }
</script>

image.png

五、JavaScript函数

  • 函数是由事件驱动的,或者当它被调用时,执行的可重复使用的代码块
  • 如果不调用函数,函数不会执行
  • js中执行函数有以下两种方式
    • 主动调用
<script type="text/javascript">
    function hi(){
        alert("JavaScript学习");
    }
    hi()
</script>

image.png

  • 通过事件去触发该函数
#这里表示给 button 绑定了 onclick 事件,当用户点击了该 button,就会触发 hi() 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function hi(){
            alert("JavaScript学习");
        }
    </script>
</head>
<body>
<button onclick="hi()">点击这里</button>
</body>
</html>

image.png

function关键字定义函数

  • 基本语法
 function 函数名(形参列表){
            函数体
            return表达式
        }
  • 定义没有返回值的函数
  <script type="text/javascript">
        function study(){
            alert("study被调用");
        }
        study()
    </script>
  • 定义有形参的函数
  <script type="text/javascript">
        function study(name){
            alert("study被调用"+name);
        }
        study("javascript")
    </script>

image.png

  • 定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数据来决定
 <script type="text/javascript">
        function study(n1, n2) {
            return n1 + n2;
        }

        alert(study(1, 2))
    </script>

image.png

将函数赋给变量

  • 基本语法
var 函数名 = function(形参列表){
  	函数体
    return表达式
}

#示例
    <script type="text/javascript">
        var f1 = function () {
            alert("JavaScript学习"); }
        f1();
    </script>

六、JavaScript自定义对象

方式一:Object形式

  • 基本语法
var 对象名=new Object(); //对象实例(空对象)
对象名.属性名 = function(){}//定义一个函数

#访问对象
对象名.属性
对象名.函数名()
<script type="text/javascript">
        var person =new Object();
       //增加name属性
        person.name="小明";
        //增加age属性
        person.age=10;
        //增加函数
        person.say=function (){
            console.log(this.name+" "+this.age)
        }
        //访问方法
        person.say()
    </script>

image.png

方式二:{}形式

  • 语法
var 对象名 = {
属性名: 值,//定义属性
函数名: function(){}//定义函数
}

#对象访问
对象名.属性
对象名.函数名();
 <script type="text/javascript">
       var person={
           name:"小明",
           age:20,
           hi:function (){
               console.log(this.name+" "+this.age)
           }
       }
       console.log("外部访问~~~"+person.name+person.age)
       person.hi()
    </script>

image.png

七、事件

  • 事件介绍
    • 事件时电脑输入设备与页面进行交互的响应
    • 事件通常与函数配合使用,这样就可以通过发生的事来驱动函数执行
      | 属性 | 当以情况发生时,出现此事件 |
      | — | — |
      | onabort | 图像加载被中断 |
      | onblur | 元素失去焦点 |
      | onchange | 用户改变域的内容 |
      | onclick | 鼠标点击某个对象 |
      | ondblclick | 鼠标双击某个对象 |
      | onerror | 当加载文档或图像时发生某个错误 |
      | onfocus | 元素获得焦点 |
      | onkeydown | 某个键盘的键被按下 |
      | onkeypress | 某个键盘的键被按下或按住 |
      | onkeyup | 某个键盘的键被松开 |
      | onload | 某个页面或图像被完成加载 |
      | onmousedown | 某个鼠标按键被按下 |
      | onmousemove | 鼠标被移动 |
      | onmouseout | 鼠标从某元素移开 |
      | onmouseover | 鼠标被一到某元素之上 |
      | onmouseup | 某个鼠标按键被松开 |
      | onreset | 重置按钮被松开 |
      | onresize | 窗口或框架被调整尺寸 |
      | onselect | 文本被锁定 |
      | onsubmit | 提交按钮被点击 |
      | onunload | 用户退出界面 |

事件分类

  • 事件的注册(绑定)
    • 事件注册(绑定):当事件响应(触发)后要浏览器执行哪些操作代码,叫事件注册或事件绑定
  • 静态事件注册
    • 通过HTML标签的事件属性直接赋予事件响应后的代码,这种方式叫静态注册
  • 动态事件注册
    • 通过js代码得到标签的dom对象,然后通过dom对象.事件名=function(){}这种形式叫动态注册
  • 动态注册时间步骤
    • 1、获取标签—dom对象
    • 2、dom 对象.事件名=function(){}

onload加载完成事件

  • onload:某个页面或图像被完成加载
  • 静态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function sayOK() {
            alert('静态注册onload事件');
        } </script>

</head>
<body onload="sayOK()">
</body>
</html>

image.png

  • 动态注册
    • 在js中,将页面窗口映射成Window dom对象
    • Window对象有很多的函数和属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            alert("动态注册 onload 事件");
        }
    </script>

</head>
<body>
</body>
</html>

image.png

onclick单击事件

  • onclick:鼠标点击某个对象
  • 静态注册+动态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function sayOK(){
            alert("sayOK按钮")
        }
        window.onload = function (){
            //动态注册onclick事件
            var elementById = document.getElementById("button01");//拿到id="button01"对应的dom对象
            elementById.onclick=function (){
                alert("sayHI按钮")
            }
        }
    </script>

</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOK()">sayOK 按钮</button>
<button id="button01">sayHi 按钮</button>
</body>
</html>

image.png
image.png
image.png

onblur失去焦点事件

  • onblur:元素失去焦点
  • 案例:在鼠标离开输入框时,字符变大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function upperCase() {
            var fname = document.getElementById("fname");
            fname.value = fname.value.toUpperCase();
        }

        window.onload = function () {
            var fname2 = document.getElementById("fname2");
            fname2.onblur = function () {
                fname2.value = fname2.value.toUpperCase();
            }
        }
    </script>

</head>
<body>
<!--静态注册 onClick 事件-->
输入英文单词:
<input type="text" id="fname" onblur="upperCase()"/><br/> 输入英文单词:
<input type="text" id="fname2"/>
</body>
</html>
  • 27
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值