AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js学习笔记

2021-08-28 170
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js

JavaScript

1.Javascript的介绍

javascipt是运行在浏览器端的脚本语言，由浏览器解释执行的，简称js它能够让网页和用户有交互功能，增加良好的用户体验效果。

前端三大块： 1.HTML （结构）2. CSS（样式） 3.Javascript(行为)

2.JavaScript的使用方式

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <!-- 内嵌式 -->

   <script>

•    alert('我是内嵌式的js代码！')

 </script>

   <scriptsrc="js/main.js"></script>

</head>

<body>

 <!-- 行内式 -->

 <inputtype="button"value="按钮"onclick="alert('你点我了')">

</body>

</html>

3.变量的定义和使用

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

 <title>Document</title>

   <script>

•    //定义数字类型的变量

•    variNum1=1;

•    varfNum1=2.5;

•    //定义字符串

•    varsStr='里斯';

•    //定义boolean类型

•    varbIsok=true;

•    // 定义undefind类型

•    varunData;

•    // 定义空对象

•    varoData=null;

•    // 定义JavaScript对象

•    varoPerson= {

•      name: '里门',

•      age: 29

•    }

•    alert(iNum1);

•    alert(fNum1);

•    alert(bIsok);

•    alert(oPerson)

•    alert(oPerson.name)

•    alert(oPerson.age)

•    // 查看数据类型使用typeof

•    alert(typeof(iNum1));

•    alert(typeof(bIsok));

•    alert(typeof(unData));

•    alert(typeof(oData));

•    // 由于js历史原因，设计之前没有null类型，null值归属于object类型，后续语言迭代后也没有进行修改

•    console.log(oPerson.name);

•    // 同时定义多个变量

•    variNum2=3, sStr=4;

•    console.log(iNum2)

 </script>

</head>

<body>

</body>

</html>

4.函数的定义和调用

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <script>

       // 定义函数的关键字function

       functionfnShow(){

           alert('我是一个有返回值的参数');

       };

       // 调用函数

       fnShow()

       functionfnSum(iNum1,iNum2){

           variResult=iNum1+iNum2;

           returniResult

           alert('测试代码');

       }

       variNum=fnSum(1,2)

       alert(iNum)

       // return关键字的特点： 可以为函数提供返回值，return后的代码不再执行

   </script>

</head>

<body>

   

</body>

</html>

5.全局变量和局部变量

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <script>

       functionfnShow()

       {

           // 局部变量

           variNum=1;

           alert(iNum)

       }

       // 调用函数

       fnShow()

       // 在函数外定义的变量可以在不同的函数内使用，并且不同函数可以共享全局变量

       variNum1=1;

       functionfnModify()

       {

           alert(iNum1);

           iNum1=5;

           // ++ 等价于 += 1

           iNum1++

           alert(iNum1)

       }

       fnModify()

       // js可以数字类型与字符串直接进行相加，把数字自动

       alert("函数外访问的全局变量 ："+iNum1);

   </script>

</head>

<body>

   

</body>

</html>

6.条件判断比较运算符

<!-- 条件语句就是通过条件来控制程序的走向 -->

<!-- 条件语句语法

if 语句 -只有当指定条件为True时，使用该语句来执行其他代码

if ... else 语句 -当条件为true时执行代码，当条件为false时执行其他代码

if ... else if ...else 语句 -使用该语句来判断多条件，执行条件成立的语句

-->

<!-- 比较运算符 -->

7.获取标签元素

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <!-- <script>

       // document js的内置对象，html的文档对象、

       // 如果获取的对象是null，表示标签没有获取成功

       var oDiv = document.getElementById('div1');

       alert(oDiv);

   </script> -->

   <!-- <script>

       function fnLoad(){

           var oDiv = document.getElementById('div1');

           alert(oDiv);

       }

       window.onload=fnLoad;

   </script> -->

   <script>

       window.onload=function(){

           varoDiv=document.getElementById('div1');

           alert(oDiv);

       }

   </script>

</head>

<body>

  <divid="div1">这是一个div标签</div>

</body>

</html>

<!-- <script>

   var oDiv = document.getElementById('div1');

       alert(oDiv);

</script> -->

8.标签属性的获取和设置

<!DOCTYPE html>

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <style>

       .btnstyle{

           background: yellow;

           /* font-size: 30px; */

       }

   </style>

   <script>

       window.onload=function(){

           // 根据id获取标签对像

           varoBtn=document.getElementById("btn1");

           // 获取标签的属性

          alert(oBtn.value);

          alert(oBtn.type);

           // 设置标签属性

           oBtn.name="hemingkang";

           // 设置样式的属性

           // oBtn.style.background="red";

           // 相当于设置class ，以后通过类选择器给标签添加样式

           // 注意点： class 这里变成className

           oBtn.className="btnstyle";

           oBtn.style.fontSize="30px";

       }

   </script>

</head>

<body>

   <inputtype="button"value="按钮"id="btn1">

</body>

</html>

9获取和设置标签内容

<htmllang="en">

<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

 <title>Document</title>

   <script>

•    window.onload=function(){

•      // 根据标签的id获取标签对象

•      varoDiv=document.getElementById("div1")

•      // 获取标签内容

•      alert(oDiv.innerHTML);

•      // 设置标签内容

•      oDiv.innerHTML="<a href='http://www.baidu.com'>百度</a>"

•    }

 </script>

</head>

<body>

   <divid="div1">

•    我是caicai，我菜，需要不断的学习

 </div>

</body>

</html>

10数组的定义和数组的操作

// 数组里面的数据可以是不同类型的数据

<!-- 数组的定义 -->

// 实例化对象的创建

var aList = new Array(1,2,3);

// 字面量方式创建

var aList2 = [1,2,3,['a','b','c']];

// 多维数组

// 多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组

var aList = [[1,2,3],['a','b','c']];

数组的操作

获取数组的长度

var aList = [1,2,3,4];

alert(aList.length); //弹出4

11循环语句

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

for

while

do-while （不管条件是否成立，至少执行一次）

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <script>

       // // for 循环

       var array = [1, 4, 5];

       // for(var index=0; index < array.length; index++){

       //     result = array[index];

       //     alert(result)

       // }

       // var index = 0;

       // // while 循环

       // while(index < array.length){

       //     var oValue = array[index];

       //     alert(oValue)

       //     index++;

       // }

       var index = 5;

       do{

           alert('ok');

           // 这里需要完成取值操作,不管条件是否成立，至少执行一次

           var oValue = array[index];

               alert(oValue)

               index++;

       }while(index < array)

   </script>

</head>

<body>

</body>

</html>

12字符串拼接

字符串拼接使用：“+”运算符

字符串可以和数字直接进行合并

数字和字符串拼接会自动进行类型转换（隐式类型转换），把数字类型转换成字符串类型进行拼接

13定时器

13.1定时器在一段特定的时间后执行某段代码

13.2定时器的使用

js定时器有两种创建方式：

  1. seTimeout(func[,delay,param1,param2,...]);以指定的时间间隔（以毫秒计）调用一次定时器
  2. setInterval(func[,delay,param1,param2,...])💛以指定的时间间隔（以毫秒计）重复调用一个定时器

参数说明：

第一个参数func,表示定时器要执行的函数名

第二个参数delay,表示时间间隔,默认是0,单位是毫秒

第三个参数param1,表示定时器执行函数的第一个参数

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <!--定时器1：根据指定的时间间隔延时调用指定的函数-->

   <script>

   //     function fnShow(name,age){

   //         alert("ok" + name + age);

   //         alert(tid)

   //         // 销毁定时器

   //         clearTimeout(tid);

   //     }

   // // 根据时间间隔调用一次函数的定时器

   // var tid = setTimeout(fnShow,1000,"hemingkang", 20)


   // 根据时间间隔重复函数的定时器

   function showIfo(name, age){

       alert("ok" + name + age);

       // 根据时间间隔重复函数的定时器


   }

   function fnStop(){

       alert(tid)

       clearInterval(tid);


   }

   var tid = setInterval(showIfo, 3000, "hekang", 20);

   </script>

</head>

<body>

   <input type="button" value="停止" onclick="fnStop();">

</body>

</html>


文章标签：
JavaScript
前端开发
UED
关键词：
JavaScript学习笔记
游客u7mjk3tjjli7c
目录
相关文章
游客qeoynko2nmbgk
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示
游客qeoynko2nmbgk
61 8
游客zi3qmblbcdexu
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
游客zi3qmblbcdexu
87 9
Codelinghu
|
2月前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
Codelinghu
63 0
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
wishCoding
46 0
yma16
|
7月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
yma16
77 0
webgl学习笔记3_javascript的HTML DOM
yma16
|
7月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
yma16
56 0
爱喝汤的技术少年
|
7月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
爱喝汤的技术少年
54 0
web前端圈
|
7月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
web前端圈
54 0
鑫鑫子
|
存储 JavaScript 前端开发
【js】函数概述学习笔记（8）
【js】函数概述学习笔记（8）
鑫鑫子
48 0
鑫鑫子
|
存储 JavaScript
【js】数组学习笔记（7-2）
【js】数组学习笔记（7-2）
鑫鑫子
73 0

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    js+jquery实现贪吃蛇经典小游戏
  • 6
    在 golang 中执行 javascript 代码的方案详解
  • 7
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 8
    Node.js 的性能
  • 9
    基于SVG的js圆形菜单插件
  • 10
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    56
  • 2
    js设计模式-观察者模式与发布/订阅模式
    74
  • 3
    js设计模式-策略模式与代理模式的应用
    75
  • 4
    深入理解JavaScript中的闭包机制
    62
  • 5
    使用Vue.js构建交互式前端的技术探索
    92
  • 6
    使用Node.js构建实时聊天应用的技术指南
    136
  • 7
    深入理解JavaScript中的事件循环机制
    91
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    124
  • 9
    JavaScript 数组方法概览
    39
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    71

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Node.js 入门教程文档
  • Node.js 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)