web前端之javaScript

最新推荐文章于 2023-12-11 15:56:54 发布
最新推荐文章于 2023-12-11 15:56:54 发布
阅读量272 收藏 4
点赞数 1
分类专栏： web前端 文章标签： javascript python html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43734041/article/details/120009231
版权

Web前端之JavaScript

1.JavaScript的定义

javascrip是运行在浏览器端的脚本语言，是由浏览器解释执行的，它能够让网页和用户交互功能，增加良好的用户体验
前端开发三大块：

  1. html 负责网页结构
  2. CSS 负责网页样式
  3. javascript: 负责网页行为 如网页与用户交互

2.javascript的使用方式

  1. 行内式（主要用于事件）
<input type='button' name='' onclick='alert('ok!');'>
  1. 内嵌式
<script type='text/javascript'>
	alert('ok!');
</script)
  1. 外链式
<scrip type='text/javascript' src='js/index.js'></script>

<!-- 内嵌式 -->
    <script>
        alert('我是内嵌式的js代码')
    </script>
    <!-- 外链式 -->
    <script src='js/main.js'>

    </script>
</head>
<body>
    <!-- javascript的使用 -->
    <!--行内式-->
    <input type="button" value='按钮' onclick="alert('点击了！')">
</body>

3.变量和数据类型

  1. 定义变量
    1. javascript是一种弱类型语言，也就是说不需要指定变量的类型。javascript的变量类型是由他的值来决定，定义变量需要关键字’var’ ,一条javascript语句应该以‘ ；’结尾
    2. 定义变量的语法格式：
      1. var 变量名=值
  2. javascript注释
    1. . 单行注释： //
    2. 多行注释： /* */
  3. 数据类型(js中有六种数据类型 ，包括五种基本数据类型和一种复杂数据类型)
    1. number 数字类型
    2. string 字符串类型
    3. boolean 布尔数据类型
    4. undefined 变量声明未初始化，它的值就是undefined
    5. null 表示空对象。如果定义的变量将来准备保存对象，可以将变量初始化为null, 在页面上获取不到对象。返回值即就是null
    6. 复合类型：（和字典类似）
      1. object 后面的javascript对象属于复合类型
  4. 变量的命名规则：
    1. 区分大小写
    2. 第一个字符必须是字母。下划线 或美元符号 $
    3. 其他字符可以是字母，下划线，美元符号，数字
  5. 匈牙利命名风格
    1. 对象 oObject 如：oDiv
    2. 数组 a Array 如：altems
    3. 字符串:s String 如：sUserName
    4. 整数：i Integer 如：iltemCount
    5. 布尔值： b Boolean 如：blsComplete
    6. 浮点数：f Float 如：fPrice
    7. 函数：fn Function 如： fnHandler
 <script>
        /* 定义数字类型 */
        var iNum = 1;
        /* 定义字符串 */
        var sName='na';
        // 定义布尔类型
        var bIsok=true;
        // 未定义类型
        var unData;
        // 定义空类型
        var oData=null;
        // 定义javascript对象类型
        var oPerson={
            name:'eph',
            age:10
        }
        alert(iNum);
        alert(sName);
        alert(unData);
        alert(oData);
        alert(oPerson.name)
        // 查看数据类型使用typeof
        alert(typeof(sName));
        alert(typeof(unData));
        // js之前版本设计时没有null类型数据，null归属于object类型，后来也没有修改
        // 现在所知 null 属于null类型
        alert(typeof(oData));
        alert(typeof(oPerson));
    </script>

4.函数定义和调用

  1. 函数定义
    函数是可以重复使用的代码块，使用关键字 function 定义函数
  2. 函数调用
    函数调用就是函数名加小括号，如： 函数名（参数，参数，，）
  3. 定义有参数有返回值的函数
    定义函数时，函数如果有参数，参数放到小括号，函数如果有返回值，返回值通过return 关键字来返回
    函数中return 关键字的作用：
    1. 返回函数中的值
    2. 执行完return函数执行结束
 <script>
        // 定义函数的关键字是function
        function fnshow(){
            alert('我是一个无参数无返回值的函数')
        }
        // 调用函数
        fnshow();
        // 定义有参数，有返回值的函数
        function fnshow1(iNum1,iNum2){
            var iResult=iNum1+iNum2;
            alert('这是有参数有返回值的测试代码');
            return iResult;
        };
        var iNum=fnshow1(1,2);
        alert(iNum);
    //  return 关键的特点：1.可以为函数提供返回值 2.当执行return 语句后，函数执行结束，后面的语句不会执行
    </script>

5.全局变量与局部变量

变量作用域就是吧变量的使用范围： 变量分为 局部变量 全局变量

  1. 局部变量 在函数内使用的变量，只能在函数内部使用
  2. 全局变量 在函数外定义的变量，在函数内可以使用，可以共享全局变量
<script>
        // 局部变量： 在函数内部定义的变量，只在函数内部使用
        function fnShow(){
            var iNum=1;
            alert(iNum);
        };
        // 调用函数
        fnShow()
        // 全局变量 在函数外定义的叫做全局变量，可以在不同函数内使用，并且不同函数内可以共享全局变量
        var iNum2=2;
        function fnShow1(){
            alert(iNum2);
            iNum2++
        }
        function fnShow3(){
            alert(iNum2);
        }
        fnShow1();
        fnShow3();
        // 在js中数字和字符类型可以直接相加
    </script>

6.条件语句

条件语句就是通过条件来控制车程序的走向

  1. 条件语句的语法：
    1. if 语句- 只有当条件为true时，使用该语句来执行代码
    2. if -else
    3. if-else if - else
  2. 比较运算符
    1. == 等于
    2. === 全等 （值和类型）
    3. ！= 不等于
    4. 》 大于
    5. 《 小于
    6. 》=大于或等于
    7. 《= 小于或等于
  3. 逻辑运算符
    1. && and
    2. || or
    3. ! not 表示对结果的取反

7.获取标签元素

  1. 获取标签元素
    可以使用内置对象 document 上的getElementByld 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将他赋值给一个变量 document.getElementByld(‘标签’)
    如果将代码写在元素的上面就会出错，因为页面从上往下执行，javascript去页面上获取元素 标签的时候，元素还没加载
    此时可以使用 window.onload (在页面元素加载完后会执行load事件)
  <script>
        // js 的内置对象 html 的文档对象
        // 如果获取的对象是 null 表示标签没有获取成功
        function fnLoad(){
            var oP=document.getElementById('p1')
        alert(oP)
        }    
        // 页面加载完后会触发 onload事件
        // window.onload=fnLoad;
        // 使用匿名函数
        window.onload=function(){
            var oP=document.getElementById('p1')
            alert(oP)
        }

8.操作标签元素属性

  1. 属性操作
    1. 首先获取页面标签元素，然后就可以对页面标签元素的属性记性操作，属性的操作包括：
      1. 属性的读取 将获取的标签给一个变量，用此变量名.属性名 获取此标签的属性
      2. 属性的设置
    2. 属性在js中的写法：
      1. html 的属性和js 里面的属性大多数写法一样，但class 属性写成 className
      2. style 属性里面的属性，有横杠的改成驼峰式，如 ：font-size–>style.fontSize
    3. innerHTML
      . innerHTML 可以读取或者设置标签包裹的内容
  			//获取标签
  			var oDiv=document.getElementById('d');
            // 获取标签内容
            alert(oDiv.innerHTML);
            // 设置标签内容
            oDiv.innerHTML="<a href='https://www.baidu.com'>百度</a>";

   <style>
        .btnS{
            background:lawngreen;
        }
    </style>
    <script>
       
        window.onload=function(){
             // 获取标签
            var oBtn=document.getElementById('btn1');
            // 获取标签属性
            alert(oBtn.type);
            alert(oBtn.value);
            // 设置标签的属性
            oBtn.name='username';
            // 设置样式属性
            // oBtn.style.background='red';
            // 给标签添加已有的类样式 类样式中的样式会被原有的样式覆盖
            // class--》className
            oBtn.className="btnS";
        }

    </script>

9.数组及操作

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的数据，好比python里面的列表

  1. 数组定义：
    1. 实例化对象方式创建数组 var aList=new Array(1,2,3);
    2. 字面方式创建，推荐使用 var aList=[2,3,‘ww’]
  2. 多维数组
    多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组
  3. 数组的操作
    1. 获取数组的长度 var aList=[1,2,3] alert(aList.lenght
    2. 根据下标取值 var aList=[1,2,3] alert(aList[0])
    3. 从数组最后添加和删除数据
    4. 根据下标添加和删除元素
      1. start 必需，开始删除的索引
      2. num 可选 ，删除数组元素的个数
      3. elementN 可选 在start索引位置需要插入的新元素
      4. 此方法会删除匈start索引开始的num个元素，并将elementN参数插入到start索引位置
<script>
        // 实例化对象定义数组
        var aList=new Array(1,2,3);
        // 字面量方式创建数组，相当于直接赋值一个数组，数组的表现形式是一对中括号
        var aList1=[1,2,'www'];
        console.log(aList1); //控制台输出
        alert(aList1);
        //多维数组
        var aList2=[[1,2,3],[4,5,6]];
        //根据下标取值
        alert(aList2[1][2]);
        //数组的相关操作
        //数组的长度
        alert('数组长度：'+aList1.length);
        //在js中不支持负数下标
        //根据下标修改数据
        aList1[2]='http';
        alert(aList1);
        //追加数据
        aList1.push('wpo');
        alert(aList1);
        //删除最后一个元素, 此处的pop不支持下标删除
        var aZ=aList1.pop();
        alert(aZ);
        alert(aList1);
        //插入数据 1:开始删除的索引 0:删除的元素个数 'hello':插入的元素
        aList1.splice(1,0,'hello');
        alert(aList1);

    </script>

10.循环语句

循环语句就是让一部分代码重复执行，javascript中常用的循环语句有：
for while do-while

 <script>
        var aList1=[1,2,'hello','www'];
        //for 循环遍历数组
        for(var index=0;index<aList1.length;index++){
            //根据下标获取数据
            var oV=aList1[index];
            alert(oV);
        }
        //while 循环
        var index=0;
        while(index<aList1.length){
            var oV1=aList1[index];
            alert(oV1);
            index++;
        }
        //do-while循环 不管条件是否成立，do中的都执行
        var index=0;
        do{
            var oV1=aList1[index];
            alert(oV1);
            index++;
        }while(index<aList1.length)

    </script>

11.字符串的拼接

字符串拼接直接使用：‘+’ 运算符

 <script>
        var sName='万物';
        var iAge=10;
        var sSex='男';
        //数字与字符串拼接时，底层会自动将数字转换为字符串，这种操作叫隐式类型转换
        alert(iAge+sName);
        iAge+=sSex;
        alert(iAge);
    </script>

12.定时器

定时器就是在一段特定的时间后执行某段程序代码

  1. 使用：
    1. js定时器有两种创建方式：
      1. setTimeout 以指定的时间间隔（以毫秒计）调用一次函数的定时器
        1. 第一个参数：表示定时器要执行的函数名
        2. 第二个参数：表示时间间隔，默认为0，单位是毫秒
        3. 第三个参数：param ,表示定时器执行函数的第一个参数，依次类推传入多个执行函数对应的参数
      2. setIntervall 以指定的时间间隔（一毫秒计）重复调用一个函数的定时器
  <script>
        function fnShow(a){
            alert('传入的值为：'+a);
            alert(tid);
            //销毁定时器
            clearTimeout(tid);
        }
        // 根据时间间隔调用一次函数的定时器
        // 定时器要执行的函数
        // 时间间隔
        // 函数参数
        //返回值表示创建的定时器返回的id,也就是创建的第几个定时器
        var tid=setTimeout(fnShow,500,3)
        function fnShow1(){
            alert('hello word');

        }
        function fnStop(){
            clearInterval(tid1);//销毁定时器
        }
        //执行时间间隔重复函数的定时器
        var tid1=setInterval(fnShow1,5000);

    </script>
</head>
<body>
    <!-- 定时器：根据指定的时间间隔延时调用函数 -->
    <input type="button" value='停止' onclick='fnStop();'>


  • 金身本无相，万相由心生
风姿--惊鸿
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端之JavaScript框架学习总结.docx
11-22
Web前端之JavaScript框架学习总结.docx
type=“text/javascript“什么意思？
qq_44165157的博客
07-22 3639
<script type="text/javascript"> 放在之间的是文本类型(text)。 javascript是告诉浏览器里面的文本是属于javascript脚本。
Web前端——JavaScript基础
硝酸童不酸的博客
10-24 928
简要介绍了 JavaScript 的基本语法、BOM 对象及简单的 DOM 操作
前端之JavaScript
qq_774952435的博客
05-08 3409
JS基本用法
前端开发基础（3）—JavaScript
2301_77162163的博客
06-12 1426
1.什么是JavaScriptJavaScript是一种广泛用于Web开发的编程语言，它可以实现动态网页效果、交互式用户界面和数据验证等功能。JavaScript是一种解释型语言，不需要编译器，而是由浏览器直接解释执行。JavaScript最初由Netscape公司的Brendan Eich于1995年创建，当时它被称为LiveScript。后来，它被重命名为JavaScript，并在1996年被提交给ECMA（欧洲计算机制造商协会）进行标准化。
web前端开发之JavaScript
hu0708的博客
08-18 2421
JavaScript
web前端——JavaScript基础
03-06
思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式
最新发布
01-20
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式。源码txt格式。
Web前端JavaScript面向对象编程
09-27
这个笔记是我在B站根据Mosh的JavaScript面向对象编程教学视频中学习并记录的，里面有我记录的知识点，自己写的代码，还有小部分的截图。大家可以在学习这个内容的时候看一下我的笔记进行参考一下。 视频链接：...
Web前端 JavaScript 基础教程
10-20
Web前端 JavaScript 基础教程
前端javaScript
weixin_71243923的博客
09-27 1576
java后端程序员需要用到的前端js知识
JavaScript基础（.....持续待更）
ahct58280的博客
04-23 443
javascript热身 一、你知道，为什么JavaScript非常值得我们学习吗？ 1. 所有主流浏览器都支持JavaScript。 2. 目前，全世界大部分网页都使用JavaScript。 3. 它可以让网页呈现各种动态效果。 4. 做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。 二、易学性 1.学习环...
前端学习系列之JavaScript
Java小菜鸟
12-11 887
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为 开发Web页面的脚本语言而出名，但是它也被 用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且 支持面向对象、命令式和声明式（如函数式编 程）风格。
前端 - JavaScript(基础语法)
m0_67402564的博客
06-21 291
JavaScript (简称 JS)是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不小心就火了. 当前 JavaScript 已经成为了一个通用的编程语言JavaScript 的能做的事情:网页开发(更复杂的特效和用户交互) 网页游戏开发服务器开发(node.js)桌面程序开发(Electron, VSCode 就是这么来的) 手机
边学边总结的前端笔记（JavaScript基础篇）
segegefe的博客
03-10 855
「学习笔记」JavaScript基础 前言 最近一直研究JavaScript内容，遂把这一阶段的学习内容整理成笔记，巩固所学知识，同时也会参考一些博客，书籍上的内容，查漏补缺，给自己充充电??? 文章内容如有错误，欢迎指正批评 工欲善其事，必先利其器，为了提高开发效率，选用VScode。 管理-设置-常用设置-字体Consolas, ‘微软雅黑 Light’, monospace Chinese汉化Vscode Prettier格式化代码(缩进2格) Auto Rename Tag同步修
前端---JavaScript篇
stu_kk的博客
11-28 613
前端学习的笔记
前端之：JavaScript
uxiang_blog的博客
05-12 1302
前言：此笔记根据狂神哔哩哔哩视频所写，转载请自觉注明出处 点击跳转狂神哔哩哔哩 1、什么是JavaScript 1.1、概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 10天~ 一个合格的后端人员，必须要精通JavaScript 1.2、历史 点击跳转JavaScript的历史 ECMAScript它可以理解为是JavaScript的一个标准 最新版本已经更新到es6版本~ 但大部分浏览器还只停留在支持es代码上！ 开发环境…线上环境，版本不一致 2、快速入门 2.1
初学前端-JavaScript（语法）
weixin_61392399的博客
10-17 431
JS基础语法介绍一起来看
前端总结——JavaScript
weixin_47661354的博客
06-24 365
闭包是指在函数内部创建的函数，并且这个内部函数可以访问到其外部函数的变量、参数和作用域链。换句话说，闭包是一个函数以及它被创建时所处的词法环境的组合体。理解闭包的关键是要理解 JavaScript 中的作用域和词法环境。每当函数被创建时，它会创建一个自己的作用域，并且在函数内部定义的变量和函数都可以在该作用域内访问。当函数返回时，其内部作用域并不会被销毁，而是被保存下来，并与函数形成闭包。内部函数可以访问外部函数的变量和参数。
web前端javascript高级应用实训
05-30
Web前端JavaScript高级应用实训，主要是针对已经掌握了JavaScript基础语法和DOM操作的学习者，通过实战项目的方式，进一步提升对JavaScript的应用能力和实践经验。在实训中，学习者可以接触到一些高级的JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值