初学JavaScript总结

0 JavaScript

html完成了架子，css做了美化，但是网页是死的，需要给他注入灵魂，所以接下来需要学习JavaScript，这门语言会让页面能够和用户进行交互。JavaScript又称为脚本语言，可以通过脚本实现用户和页面的交互。

1 引入方式

两种引入方式：

  1. 内部脚本，将js代码定义在html页面中
  2. 外部脚本，将js代码定义在外部js文件中，然后引入html页面中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速上手</title><!--内部脚本--><!-- <script>alert("hello js");alert("hello,kkk.");</script> --><script src="./js/hellojs.js"></script>
</head>
<body><!--js引入方式：1.内部脚本：js定义在html中2.外部脚本：--></body>
<!--一般将js代码放到<head></head>标签中，但建议放到</body>下，可以明显的改善网页速度
-->
<!--这里也可以引入javascript-->
<!-- <script>alert("hello js111")</script> -->
</html>

 2 基础语法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js基础语法</title><script>//基本语法//1.区分大小写//2.结尾的分号可以不写//3.<script>变迁可以写在body中//4.大括号表示代码块//5.输出语句//5.1使用window.alert()写入警告框//window.alert('warning...');//5.2使用document.write()直接在html中输出// document.write("output statements.");//5.3console.log()写入浏览器控制台// console.log("printing log...")//6.变量// 6.1 var 定义的是全局变量,可以重复声明var a = 20;var a = "nihao";alert(a);// 6.2 let 定义的局部变量，不能重复定义{let b = "asdfasdf";// let b = 3;alert(b);}// alert(b);// 6.3 const定义的是常量，不可以改变const aa = 32;alert(aa);// aa = 33;控制台报错//7.运算符//==，会进行类型转化，===不会进行类型转换// 8类型：// 基本类型：boolean,Null,Undefined,Number,String,Symbol// 引用类型：Array,Object,Function,Date...// 8.1数字类型转换为boolean类型//数值类型中，0和NaN均为falseif(0 == false){alert("0 is false");}if(NaN){alert("NaN is true");}else{alert("NaN is false");}//空字符串为false,其他均为trueif(""){alert("'' is true");}else{alert("'' is false");}if(" "){alert("' ' is true");}if(null){alert("null is true");}else{alert("null is false");}if(undefined){alert("undefined is true");}else{alert("undefined is false");}</script>
</head>
<body></body>
</html>

 3 函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js函数</title><script>// 函数定义function add(a,b){return a+b;}var minus = function(a,b){return a-b;}//函数调用var res = add(1,2);alert(res);var res = minus(1,2);alert(res);</script>
</head>
<body></body>
</html>

4 JavaScript对象

4.1数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js数组</title><script>//定义数组var arr = new Array(1,2,3,4);var arr1 = ['a','3',2,'dfd'];arr1[40] = 'hell'console.log(arr[0]);console.log(arr[3]);console.log(arr1[3]);console.log(arr1.length);//forEach()仅仅遍历有值的元素arr1.forEach(function(e){console.log(e);});</script>
</head>
<body>
</body>
</html>

4.2 String对象

<script>//创建字符串对象//var str = new String("Hello String");var str = "  Hello String    ";console.log(str);
</script>

4.3 JSON对象

1.自定义对象格式

var 对象名 = {属性名1: 属性值1, 属性名2: 属性值2,属性名3: 属性值3,函数名称: function(形参列表){}
};

2.使用自定义对象

对象名.属性名

3.调用函数

对象名.函数名()

举例：

<script>//自定义对象var user = {name: "Tom",age: 10,gender: "male",eat: function(){console.log("用膳~");}}console.log(user.name);user.eat();
<script>

简化格式

    var user = {name: "Tom",age: 10,gender: "male",// eat: function(){//      console.log("用膳~");//  }eat(){console.log("用膳~");}}

4.JSON对象

JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：

{"key":value,"key":value,"key":value
}

值得注意的是：key必须要用双引号标记(不可以是单引号，更不可以没有)，value可以是任意数据类型！！！

应用：

json格式的文本通常作为前后端交互的数据载体，是一个结构化的数据格式，方便转换。

注意：json本质是一个字符串，需要将其转为对象，则需要js的转换。

//json字符串 <===>json对象//jsonstr是一个json格式的字符串
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';//obj是一个json对象
var obj = JSON.parse(jsonstr);//obj ---> json字符串
var jstring = JSON.stringify(obj);

4.4 BOM对象

BOM对象:全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：location.href='http://www.baidu.com'

BOM提供了如下5个对象：

  1. Window:浏览器窗口对象
  2. Navigator：浏览器对象
  3. Screen：屏幕对象
  4. History：历史记录对象
  5. Location：地址栏对象

 1.Window对象

常用

window.alert('hello');

window对象提供了其他属性：

  • history：用于获取history对象
  • location：用于获取location对象
  • Navigator：用于获取Navigator对象
  • Screen：用于获取Screen对象

window提供常用函数:

  • alert():显示带有一段消息和一个确认按钮的警告框。
  • comfirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
  • setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式。
  • setTimeout():在指定的毫秒数后调用函数或计算表达式。

2.Location对象

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

 4.5 DOM对象

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

作用：

  • 改变 HTML 元素的内容

  • 改变 HTML 元素的样式（CSS）

  • 对 HTML DOM 事件作出反应

  • 添加和删除 HTML 元素

1.获取dom对象

<!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>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif">  <br><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"> 游戏
</body><script>//1. 获取Element元素//1.1 获取元素-根据ID获取// var img = document.getElementById('h1');// alert(img);//1.2 获取元素-根据标签获取 - div// var divs = document.getElementsByTagName('div');// for (let i = 0; i < divs.length; i++) {//     alert(divs[i]);// }//1.3 获取元素-根据name属性获取// var ins = document.getElementsByName('hobby');// for (let i = 0; i < ins.length; i++) {//     alert(ins[i]);// }//1.4 获取元素-根据class属性获取// var divs = document.getElementsByClassName('cls');// for (let i = 0; i < divs.length; i++) {//     alert(divs[i]);// }//2. 查询参考手册, 属性、方法var divs = document.getElementsByClassName('cls');var div1 = divs[0];div1.innerHTML = "传智教育666";</script>
</html>

5 JavaScript事件

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：

  • 按钮被点击

  • 鼠标移到元素上

  • 输入框失去焦点

  • ........

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分，接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢？我们得知道有哪些常用事件，然后我们得学会如何给事件绑定函数。所以主要围绕2点来学习：

  • 事件绑定

  • 常用事件

 5.1 事件绑定

js提供了2种事件绑定的方式：

  1. 通过html标签中的事件属性进行绑定
  2. 通过DOM中的Element元素的事件属性进行绑定
<!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>JS-事件-事件绑定</title>
</head><body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body><script>function on(){alert("按钮1被点击了...");}document.getElementById('btn2').onclick = function(){alert("按钮2被点击了...");}</script>
</html>

 5.2 常见的事件

事件属性名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

6 总结

JavaScript基础语法不难，上手容易，但要深入进阶学习并不容易，想要进一步学习，需要多看文档，多实践练习，多看经典书籍。编程之路漫漫，我们相互勉励，前行。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/710973.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Programming Abstractions in C阅读笔记：p306-p307

Programming Abstractions in C阅读笔记：p306-p307

《Programming Abstractions in C》学习第75天&#xff0c;p306-p307总结&#xff0c;总计2页。 一、技术总结 1.Quicksort algorithm(快速排序) 由法国计算机科学家C.A.R(Charles Antony Richard) Hoare&#xff08;东尼.霍尔&#xff09;在1959年开发(develop), 1961年发表…
阅读更多...
Mac 制作可引导安装器

Mac 制作可引导安装器

Mac 使用U盘或移动固态硬盘制作可引导安装器&#xff08;以 Monterey 为例&#xff09; 本教程参考 Apple 官网相关教程 创建可引导 Mac OS 安装器 重新安装 Mac OS 相关名词解释 磁盘分区会将其划分为多个单独的部分&#xff0c;称为分区。分区也称为容器&#xff0c;不同容器…
阅读更多...
VR虚拟现实技术应用到猪抗原体检测的好处

VR虚拟现实技术应用到猪抗原体检测的好处

利用VR虚拟仿真技术开展猪瘟检测实验教学确保生猪产业健康发展 为了有效提高猪场猪瘟防控意识和检测技术&#xff0c;避免生猪养殖业遭受猪瘟危害&#xff0c;基于VR虚拟仿真技术开展猪瘟检测实验教学数据能大大推动基层畜牧养殖业持续稳步发展保驾护航。 一、提高实验效率 VR虚…
阅读更多...
鲲鹏arm64架构下安装KubeSphere

鲲鹏arm64架构下安装KubeSphere

鲲鹏arm64架构下安装KubeSphere 官方参考文档: https://kubesphere.io/zh/docs/quick-start/minimal-kubesphere-on-k8s/ 在Kubernetes基础上最小化安装 KubeSphere 前提条件 官方参考文档: https://kubesphere.io/zh/docs/installing-on-kubernetes/introduction/prerequi…
阅读更多...
基于大模型思维链（Chain-of-Thought）技术的定制化思维链提示和定向刺激提示的心理咨询场景定向ai智能应用

基于大模型思维链（Chain-of-Thought）技术的定制化思维链提示和定向刺激提示的心理咨询场景定向ai智能应用

本篇为个人笔记 记录基于大模型思维链&#xff08;Chain-of-Thought&#xff09;技术的定制化思维链提示和定向刺激提示的心理咨询场景定向ai智能应用 人工智能为个人兴趣领域 业余研究 如有错漏欢迎指出&#xff01;&#xff01;&#xff01; 目录 本篇为个人笔记 记录基…
阅读更多...
价格腰斩，腾讯云2024优惠活动云服务器62元一年，多配置报价

价格腰斩，腾讯云2024优惠活动云服务器62元一年，多配置报价

腾讯云服务器多少钱一年&#xff1f;62元一年起&#xff0c;2核2G3M配置&#xff0c;腾讯云2核4G5M轻量应用服务器218元一年、756元3年&#xff0c;4核16G12M服务器32元1个月、312元一年&#xff0c;8核32G22M服务器115元1个月、345元3个月&#xff0c;腾讯云服务器网txyfwq.co…
阅读更多...
Node.js中的并发和多线程处理

Node.js中的并发和多线程处理

在Node.js中&#xff0c;处理并发和多线程是一个非常重要的话题。由于Node.js是单线程的&#xff0c;这意味着它在任何给定时间内只能执行一个任务。然而&#xff0c;Node.js的事件驱动和非阻塞I/O模型使得处理并发和多线程变得更加高效和简单。在本文中&#xff0c;我们将探讨…
阅读更多...
老化的电动车与高层电梯楼的结合，将是巨大的安全隐患

老化的电动车与高层电梯楼的结合，将是巨大的安全隐患

中国是全球最大的电动汽车市场&#xff0c;其实中国还是全球最大的电动两轮车市场&#xff0c;而电动两轮车的老化比电动汽车更快&#xff0c;电动汽车的电池寿命可以达到10年&#xff0c;而电动两轮车的电池寿命只有3-5年&#xff0c;而首批电动两轮车至今已老化得相当严重&am…
阅读更多...
【Pytorch深度学习开发实践学习】【AlexNet】经典算法复现-Pytorch实现AlexNet神经网络（1）model.py

【Pytorch深度学习开发实践学习】【AlexNet】经典算法复现-Pytorch实现AlexNet神经网络（1）model.py

算法简介 AlexNet是人工智能深度学习在CV领域的开山之作&#xff0c;是最先把深度卷积神经网络应用于图像分类领域的研究成果&#xff0c;对后面的诸多研究起到了巨大的引领作用&#xff0c;因此有必要学习这个算法并能够实现它。 主要的创新点在于&#xff1a; 首次使用GPU…
阅读更多...
golang gin单独部署vue3.0前后端分离应用

golang gin单独部署vue3.0前后端分离应用

概述 因为公司最近的项目前端使用vue 3.0&#xff0c;后端api使用golang gin框架。测试通过后&#xff0c;博文记录&#xff0c;用于备忘。 步骤 npm run build&#xff0c;构建出前端项目的dist目录&#xff0c;dist目录的结构具体如下图 将dist目录复制到后端程序同级目录…
阅读更多...
PSO-CNN-LSTM多输入回归预测|粒子群算法优化的卷积-长短期神经网络回归预测(Matlab)——附代码数据

PSO-CNN-LSTM多输入回归预测|粒子群算法优化的卷积-长短期神经网络回归预测(Matlab)——附代码数据

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、算法介绍&#xff1a; 四、完整程序数据分享下载&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平台…
阅读更多...
5 局域网基础（3）

5 局域网基础（3）

1.AAA 服务器 AAA 是验证、授权和记账(Authentication、Authorization、Accounting)3个英文单词的简称&#xff0c;是一个能够处理用户访问请求的服务器程序,提供验证授权以及帐户服务,主要目的是管理用户访问网络服务器&#xff0c;对具有访问权的用户提供服务。AAA服务器通常…
阅读更多...
网络编程：基于TCP和UDP的服务器、客户端

网络编程：基于TCP和UDP的服务器、客户端

1.基于TCP通信服务器 程序代码&#xff1a; 1 #include<myhead.h>2 #define SER_IP "192.168.126.121"//服务器IP3 #define SER_PORT 8888//服务器端口号4 int main(int argc, const char *argv[])5 {6 //1.创建用于监听的套接字7 int sfd-1;8 sf…
阅读更多...
MYSQL C++链接接口编程

MYSQL C++链接接口编程

使用MYSQL 提供的C接口来访问数据库,官网比较零碎,又不想全部精读一下,百度CSDN都是乱七八糟的,大部分不可用 官网教程地址 https://dev.mysql.com/doc/connector-cpp/1.1/en/connector-cpp-examples-connecting.html 网上之所以乱七八糟,主要是MYSQL提供了3个接口两个包,使用…
阅读更多...
C++ //练习 10.9 实现你自己的elimDups。测试你的程序，分别在读取输入后、调用unique后以及调用erase后打印vector的内容。

C++ //练习 10.9 实现你自己的elimDups。测试你的程序，分别在读取输入后、调用unique后以及调用erase后打印vector的内容。

C Primer&#xff08;第5版&#xff09; 练习 10.9 练习 10.9 实现你自己的elimDups。测试你的程序&#xff0c;分别在读取输入后、调用unique后以及调用erase后打印vector的内容。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码…
阅读更多...
django5生产级部署和并发测试（开发者服务器和uvicorn服务器）

django5生产级部署和并发测试（开发者服务器和uvicorn服务器）

目录 1. 创建django项目2. 安装压力测试工具3. 安装生产级服务器uvicorn4. 多进程部署 1. 创建django项目 在桌面创建一个名为django_test的项目&#xff1a; django-admin startproject django_test然后使用cd命令进入django_test文件夹内&#xff0c;使用开发者服务器运行项…
阅读更多...
前端架构: 脚手架包管理工具之lerna的全流程开发教程

前端架构: 脚手架包管理工具之lerna的全流程开发教程

Lerna 1 &#xff09;文档 Lerna 文档 https://www.npmjs.com/package/lernahttps://lerna.js.org [请直达这个链接] 使用 Lerna 帮助我们做包管理&#xff0c;并不复杂&#xff0c;中间常用的命令并不是很多这里是命令直达&#xff1a;https://lerna.js.org/docs/api-referen…
阅读更多...
掌汇云 | FBIF个性化票务系统，展会活动数据好沉淀

掌汇云 | FBIF个性化票务系统，展会活动数据好沉淀

“把票全卖光&#xff01;卖到一票难求&#xff0c;现场座无虚席。” 卖票人和买票人可能永远不在一个频道上。 2022年办活动&#xff0c;就是一个字&#xff0c;搏&#xff01;和“黑天鹅”赶时间&#xff0c;能不能办不由主办方说了算。这种情况在2023年得到了改善&#xff…
阅读更多...
【字典树】【KMP】【C++算法】3045统计前后缀下标对 II

【字典树】【KMP】【C++算法】3045统计前后缀下标对 II

作者推荐 动态规划的时间复杂度优化 本文涉及知识点 字符串 字典树 KMP 前后缀 LeetCode:3045统计前后缀下标对 II 给你一个下标从 0 开始的字符串数组 words 。 定义一个 布尔 函数 isPrefixAndSuffix &#xff0c;它接受两个字符串参数 str1 和 str2 &#xff1a; 当 st…
阅读更多...
C++——内存管理（new和delete）详解

C++——内存管理（new和delete）详解

目录 C/C内存管理 案例&#xff1a;变量在内存中到底会在哪&#xff1f; New和delete Operator new和operator delete函数 New和delete的原理 对内置类型 对自定义类型 定位new New/delete和malloc/free的区别 C/C内存管理 C/C内存管理分布图&#xff1a;&#xff08;从…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023