JavaScript使用

于 2024-03-10 10:48:21 发布
阅读量544 收藏 10
点赞数 3
分类专栏： JavaWeb 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rch041126/article/details/136484277
版权

文章目录

一、JavaScript简介

在这里插入图片描述

二、JavaScript引入方式

在这里插入图片描述

1、内部脚本

在这里插入图片描述

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

<head>

    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>



<script>
  alert("Helo js")
</script>

</body>

</html>

2、外部脚本

在这里插入图片描述

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

<head>

    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>



<script src="../js/demo.js"></script>

</body>

</html>

alert("Hello js")

三、JavaScript基础语法

1、书写语法&输出语句

在这里插入图片描述
在这里插入图片描述

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

<head>

    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>



<script>
  window.alert("Hello js1");//写入警告框

  document.write("Hello js2");//写入html页面

  console.log("Hello js3");//写入浏览器控制台
</script>

</body>

</html>

2、变量&数据类型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // var test = 20;
    // test = "张三";
    // alert(test);
    /*
        var:
            1、作用域:全局变量
            2、变量可以重复定义
    */
    {
        var age = 18;
        //var age = 20;
    }
    alert(age);

    const  PI =3.14;
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

  //number
  var age = 20;
  var price = 99.8;
  alert(typeof age);
  alert(typeof price);

  //String
  var ch = 'a';
  var name = '张三';
  var addr = "北京";
  alert(typeof ch);
  alert(typeof name);
  alert(typeof addr);

  //boolean
  var flag1 = true;
  var flag2 = false;
  alert(typeof flag1);
  alert(typeof flag2);

  //null
  var obj = null;
  alert(typeof obj);//object

  //underfined
  var a;
  alert(typeof a);
</script>

</body>
</html>

3、运算符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

  /*
  ==:
    1、判断类型是否一样，如果不一样，则进行类型转换
    2、再去比较值
  ===:全等于
    1、判断类型是否一样，如果不一样，直接返回false
    2、再去比较值
  */

  var age1 = 18;
  var age2 = '18';
  //alert(age1 == age2);//true
  alert(age1 === age2);//false

  /*
    类型转换：
      *其他类型转换为number：
        1、String：按照字符串的字面值，转换为数字.如果字面值不是数字，则转为NaN。一般使用parseInt
        2、bollean：true 转为1， false 转为0
      *其他类型转换为boolean：
        1、number:0和NaN转化为false，其他数字转换为true
        2、String:空字符串转为false，其他字符串转为true
        3、null:false
        4、undefined:false
  */

  // var str = +'aaa';
  var str = +'20';
  alert(parseInt(str) + 1);

  var flag = +true;
  alert(flag);

  var flag = 0;
  var flag = 'asd';
  if(flag){
    alert("转化为ture");
  }else {
    alert("转换为false");
  }

  var str = 'asd';
  //健壮性判断
  //if (str != null && str.length > 0)
  if(str){
    alert("转化为ture");
  }else {
    alert("转换为false");
  }
</script>

</body>
</html>

在这里插入图片描述

4、流程控制语句&函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //1、if
    var count = 3;
    if (count == 3) {
        alert(count);
    }

    //2、switch
    var num = 3;
    switch (num) {
        case 1: {
            alert("星期一");
            break;
        }
        case 2: {
            alert("星期二");
            break;
        }
        case 3: {
            alert("星期三");
            break;
        }
        case 4: {
            alert("星期四");
            break;
        }
        case 5: {
            alert("星期五");
            break;
        }
        case 6: {
            alert("星期六");
            break;
        }
        case 7: {
            alert("星期日");
            break;
        }
        default:{
            alert("信息有误");
            break;
        }
    }

    //3、for
    var sum = 0;
    for (let i = 1; i <= 100; i++){
        sum += 1;
    }
    alert(sum);

    //4、while
    var  i = 1;
    while (i <= 100){
        sum += 1;
        i++;
    }
    alert(sum);
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    function add(a, b) {
        return a + b;
    }
    var result = add(1, 2);
    alert(result);

    var add = function (a, b) {
        return a + b;
    }
    var result = add(1, 2);
    alert(result);

</script>
</body>
</html>

四、JavaScript对象

1、Array

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //方式一
  var arr = new Array(1,2.3);
  alert(arr);

  //方式二
  var arr2 = [1,2,3];
  alert(arr2);

  //访问
  arr[0] = 10;
  alert(arr);

  //特点:JavaScript数组相当于Java中集合，变长变类型

  //变长
  var arr3 = [1,2,3,];
  arr3[10] = 10;
  alert(arr3[10]);
  alert(arr3[9]);

  //变类型
  arr3[5] = "你好";
  alert(arr3[5]);
  alert(arr3)
  
  //属性：length:数组中元素的个数
  var arr4 = [1,2,3];
  for (let i = 0; i < arr4.length; i++) {
    alert(arr4[i]);
  }

  //方法
  //push:添加方法
  var arr5 = [1,2,3];
  arr5.push(10);

  //splice:删除元素
  arr5.splice(0,1);
  alert(arr5);
</script>
</body>
</html>

2、String

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //方式一
  var str1 = new String("abc");
  //方式二
  var str2 = "abc";
  var str3 = 'abc';

  //length
  alert(str3.length);

  //trim():去除字符串前后两端的空白字符
  var str4 = '    abc ';
  alert(1 + str4.trim() + 1);
</script>
</body>
</html>

3、自定义对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

  var person = {
    name : "张三",
    age : 18,
    eat : function () {
      alert("吃饭")
    }
  };

  alert(person.age);
  alert(person.age);
  person.eat();
</script>
</body>
</html>

五、BOM

在这里插入图片描述

1、Window

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //alert
  window.alert("abc");
  alert("bbb");

  //confirm,点击确定按钮，返回true，点击取消按钮，返回false
  var  flag = confirm("删除？");
  if (flag){
    //逻辑删除
  }

  //定时器
  /*
    setTimeout:(function,毫秒值)：在一定时间间隔后执行一个function，只执行一次
    setInterval:(function,毫秒值)：在一定时间间隔后执行一个function，循环执行
   */

  setTimeout(function (){
    alert("你好");
  },3000);

  setInterval(function (){
    alert("你好");
  },3000);
</script>
</body>
</html>

2、History

在这里插入图片描述

3、Location

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  alert("跳转")
  location.href = "https://www.baidu.com";
  
  //3秒跳转到首页
  document.write("3秒");
  setTimeout(function () {
    location.href = "https://www.baidu.com";
  },3000);
</script>
</body>
</html>

六、DOM

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1、获取Element对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../img/off.gif"><br>

<div class="cls">传智教育</div><br>
<div class="cls">黑马程序员</div><br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>

    //1、getElementById:根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    alert(img);

    //2、getElementsByTagName:根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    alert(divs.length);
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }

    //3、getElementsByName:根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);
    }

    //4、getElementsByClassName:根据class属性值获取，返回Element对象数组
    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);
    }
</script>

</body>
</html>

2、常见HTML Element对象的使用

 var divs = document.getElementsByTagName("div");
    /*
        style:设置元素css样式
        innerHTML:设置元素内容
    */
    for (let i = 0; i < divs.length; i++) {
        divs[i].style.color = '红色';
        divs[i].innerHTML = '你好';
    }

 var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        hobbys[i].checked = true;
    }

在这里插入图片描述

七、事件监听

在这里插入图片描述

1、事件绑定

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我" id="btn">
<script>
  function on(){
    alert("我被点了");
  }

  document.getElementById("btn").onclick = function (){
    alert("我被点了");
  }
</script>
</body>
</html>

2、常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="register" action="#">
  <input type="text" name="username" />
  <input type="submit" value="提交">
</form>

<script>
  document.getElementById("register").onsubmit = function () {
    //onsubmit 返回true，则表单会被提交，返回false，则表单不会提交
    return true;
  }
</script>
</body>
</html>

八、案例：表单验证

在这里插入图片描述
在这里插入图片描述

九、正则表达式

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    //规则: 单词字符：6~12
    var reg = /^\w{6,12}$/;
    var str = 'asd';
    var flag = reg.test(str);
    alert(flag);

</script>
</body>
</html>
仁人众
关注
专栏目录
JavaScript的使用
maduan12的博客
12-02 793
1、介绍 js是一种基于对象和事件驱动、并且具有相对安全性的客户端脚本语言，是一种弱语言 js的主要目的是验证发往服务器端的数据、增加web互动、加强用户体验度等。 组成部分 ECMAScript(基础语法) ECMAScript定义的只是这门语言的基础，与web浏览器没有依赖关系 javascript的核心语法ECMAscript描述了该语言的语法和基本对象 DOM（文档对象模型） 描述了处理网页内容的方法和接口 DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间
JavaScript使用正则表达式做表单验证
weixin_45539338的博客
06-15 2034
JavaScript使用正则表达式实现表单验证
javascript学习1
zhuxw技术博客
02-03 453
HTML 中的脚本必须位于 与 标签之间。 脚本可被放置在 HTML 页面的 和 部分中。 标签 如需在 HTML 页面中插入 JavaScript，请使用 标签。 和 会告诉 JavaScript 在何处开始和结束。 和 之间的代码行包含了 JavaScript： alert("My First JavaScript"); 您无需理解上面的代码。只需明白
JavaScript使用方法和技巧大全
上班搞IT，下班搞ITF。
10-21 655
[code=JScript] JavaScript使用方法和技巧大全   有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript远比我想象的复杂和强大，我开始崇拜它，就像崇拜所有OOP语言一
javascript 基本用法
qq_38125626的博客
09-07 365
1.javascript简介 *基于对象和事件驱动的语言，应用于客户端 -基于对象 提供了很多对象，可以直接拿过来使用 -事件驱动 html做网站静态效果，javascript能够呈现动态效果 -客户端：专门指浏览器 js的特点 (1)交互性 -信息的动态交互 (2)安全性 -js不能访问本地磁盘的文件 (3)跨平台性 -只要支持js的浏...
javascript使用手册
07-22
资源名称：Javaｓｃｒｉｐｔ使用手册   资源截图：   资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
JavaScript使用prototype属性实现继承操作示例
10-15
主要介绍了JavaScript使用prototype属性实现继承操作,结合实例形式详细分析了JavaScript使用prototype属性实现继承的相关原理、实现方法与操作注意事项,需要的朋友可以参考下
JavaScript使用FileSystemObject对象写入文本文件内容的方法
10-23
主要介绍了JavaScript使用FileSystemObject对象写入文本文件内容的方法,实例分析了javascript使用ActiveXObject的技巧与常见问题的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript的基本使用
weixin_41588751的博客
01-06 202
1.JavaScript基本语法: (1)标识符: JavaScript中的标识符 变量，常量，函数，语句块也有名字，我们统统称之为标识符。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号()组成，标识符不能以数字开头，不能是JavaScript中的保留字或关键字。合法的标识符举例：indentifier、username、username、userName、)组成，标识符不能以数字...
JavaScript 的使用方法
ytm1996的博客
04-10 206
&lt;script type="text/javascript&gt;document.write();window.alert();......&lt;/script&gt;引用js文件&lt;script src="" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
JavaScript用法
Mc维嘉的博客
05-07 1396
JavaScript用法 JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加式 各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaSctipt脚本是通过嵌入在HTM中 实现自身的功能的. 特点: 解释性脚本语言． 主要用来向HT...
JavaScript的用法
u012149906的博客
07-12 151
1.HTML 中的脚本必须位于 &lt;script&gt; 与 &lt;/script&gt; 标签之间。&lt;script&gt; 和 &lt;/script&gt; 会告诉 JavaScript 在何处开始和结束。2.脚本可被放置在 HTML 页面的 &lt;body&gt; 和 &lt;head&gt; 部分中。注：那些老旧的实例可能会在 &lt;script&gt; 标签中使用 typ
javascript的使用方式
sullte的博客
04-25 355
内部方式： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>javascript的使用方式</title> javascript使用方式第一种:内部方式,就是在head标签中指定script标签 书写,js的代码; --&g...
JavaScript基本使用
bakelFF的博客
11-15 2316
1、javascript介绍 概念 JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译) JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码 JavaScript 是弱类型语言 作用 为网页添加各式各样的动态功能,是网页上的行为 为用户提供更流畅美观的浏览效果。 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的 对页面的节点增删改查 2、调用js的几种方式 在内容上调用js 这种方式把点击事件写在
怎么使用javascript
最新发布
06-01
JavaScript是一种广泛使用的脚本语言，它可以嵌入到HTML中，通过浏览器解释执行，实现动态交互效果。下面是使用JavaScript的一些基础知识： 1. 嵌入JavaScript代码：在HTML文档中，可以使用<script>标签将JavaScript代码嵌入到HTML中。 2. 声明变量：在JavaScript中，可以使用var关键字声明变量。 3. 输出内容：在JavaScript中，可以使用alert()函数输出内容。 4. 控制流程：JavaScript支持if、switch、for、while等控制流程语句。 5. 函数定义：在JavaScript中，可以使用function关键字定义函数。 6. DOM操作：在JavaScript中，可以通过Document Object Model(DOM)操作HTML元素。 以下是一个简单的JavaScript代码示例： ``` <!DOCTYPE html> <html> <head> <title>JavaScript示例</title> </head> <body> <h1>JavaScript示例</h1> <script type="text/javascript"> var name = "CSDN"; alert("欢迎来到" + name + "的世界！"); function changeColor(){ document.body.style.backgroundColor = "red"; } </script> <button onclick="changeColor()">点击我变红</button> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值