JavaScript:初始JS 以及 基础语法

news2024/11/24 5:09:37

前端三件套:

HTML: 生成网页控件 例如:生成 文本框 多选框 下拉列表 等 (人的身体)

CSS: 修饰网页上的控件 例如:修饰文本框为圆形 (人的衣服)

JavaSript: 在这些控件上添加逻辑 例如:获取文本框的值 然后进行加减乘除运算 (人的动作)

JavaSript一般都配合 html css 这两个使用,简称前端三件套。


JavaScript是什么

首先他和java语言没有任何关系,简称JS,他是一种运行在客户端上的脚本语言,且不需要下载任何的编译器,系统有浏览器就可以运行,相当于浏览器就是编译器,在Web开发中他是必不可少的,市面上百分之99(动态网站)以上的网站都可以看见他的身影

在这里插入图片描述
上图是QQ的官网 在Web开发非常广泛


JavaScript可以做什么(简)

1.简单的网站注册,判断一个 用户密码 的合法性是否符合规范 比如:不能输入带中文的密码 ,如果不使用JS来完成,那就需要把这个注册的表弟发到 后端程序判断是否合法,这样一来如果 表单数据比较多 用的人数比较多的时候 服务端就会产生卡顿 ,但如果 使用JS在客户端直接判断是否合法,这样就可以很大的减轻服务器的压力。
在这里插入图片描述

  1. 网站注册验证码发送,例如注册一个QQ,而注册QQ需要一个手机号和下发的验证码,验证码一分钟发一次,那JS就可以用来记录验证码的发送时间,防止频繁发送在这里插入图片描述

3.网页小游戏开发 例如:跳一跳 别踩白块
在这里插入图片描述

等等这些都可以使用JS来控制


浏览器的执行过程

浏览器本身是不会执行JS代码的,而是通过内置的JS引擎来解释网页中的JS代码,由上往下逐行执行(同步) 在客户端上。
而在浏览器上一般可以 禁止网页执行JS的执行

例如 禁止在网页 禁止复制文本(很多 小说 作文 网站都会这样),一般都是JS进行控制,如果禁止这个网页上的JS就可以 复制粘贴 网站上的文字了
在这里插入图片描述
该功能就是由JS控制

禁用网页上的JS 轻松复制
在这里插入图片描述


JS基础语法

alert('登录成功');
//这是一个弹窗语句 在浏览器页面弹窗对话框

在这里插入图片描述

JS的可以写在html文档的任何位置 如:html head title 标签内,写的位置和CSS的一样,也可以 引入外部JS文件

1.行内写法

 <input type="button" value="登录" onclick="alert('登录成功');">

这是一个按钮 点击按钮 弹出 登录成功 onclick表示点击事件 也就是点击的时候 执行什么代码 如果代码比较少可以这样子写

2.内嵌式

<script>
alert('我是一个弹窗');
</script>

一般写在 head 标签内 当然写在哪里都可以的 和内嵌 css一样

3.引入外部
这个方法一般代码量比较多的情况下使用

引用

<script src="test.js">
//引入了外部 这里就不能写其他代码
 </script>
test.js 直接写脚本
alert('我是一个弹窗');

代码注释

JS的注释方法和 C# JAVA C C++ CSS样式都一样 使用双斜杠注释

单行

//我是单行注释

多行

/*
我
是
多
行
注
释
*/

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

哈工大体系结构lab3 —— 流水线处理器的verilog实现

流水线处理器的verilog实现 是的我刚刚验收完最后一个实验&#xff0c;所以怀着激动的心情&#xff0c;把当时其中一个留档的代码发出来&#xff0c;还算较为清晰&#xff0c;仅供没有思路的同学参考。造完cache&#xff0c;我的生活终于可以恢复正轨了&#xff0c;这几天折磨的…

web安全之SQL盲注的靶场练习和分析

目录 SQL盲注-报错回显盲注 SQL盲注-时间盲注 SQL盲注-布尔盲注 SQL盲注-报错回显盲注 在burp里面进行动态抓包&#xff0c;判断符号闭环&#xff0c;如图明显为闭环 列数3时报错&#xff0c;判断当前列数为2 强行报错注入 &#xff0c;如图获取到版本号 uname1212 unio…

h5视频落地页知识点整理

一、视频在苹果中自动播放&#xff08;借助微信SDK&#xff09; 1.引入微信SDK <script src"http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 2. document.addEventListener(WeixinJSBridgeReady, function() { const timer setInte…

如何签署exe或Windows应用程序?

本文您将了解为什么要签署Windows应用程序以及如何签署EXE或Windows应用程序的步骤指南。 代码签名是一种确保软件来自经过验证的正版软件发行商的方法。使用代码签名证书唱WindowsEXE文件可确保可执行文件或Windows应用程序不会被恶意行为者更改或修改。 Windows应用程序签名…

2022年NPDP新版教材知识集锦--【第五章节】(2)

《产品经理认证(NPDP)知识体系指南(第2版)》已于2022年4月正式上架发行&#xff0c;新版教材自2022年11月NPDP考试起使用。将新版NPDP教材中的相关知识点进行了整理汇总&#xff0c;包括详细设计与规格阶段相关内容&#xff0c;快来看看吧。 【市场研究工具】(全部内容获取文末…

华为机试 - 无向图染色

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 给一个无向图染色&#xff0c;可以填红黑两种颜色&#xff0c;必须保证相邻两个节点不能同时为红色&#xff0c;输出有多少种不同的染色方案&#xff1f; 输入描述 第一行输入M(图中节点数) N(边数) …

使用reshape2 R包进行在线长数据和宽数据相互转化

数据是数据分析的基础。我们常见的数据一般存储在excel表格&#xff0c;或者txt文档中。今天我们来看看长数据和宽数据&#xff0c;以及如何进行两者之间的相互转换。 1&#xff0e;宽数据和长数据 宽数据 如图1所示&#xff0c;宽数据是我们最常见的数据存储形式&#xff0c…

[附源码]Python计算机毕业设计Django校园订餐管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

nginx配置文件组成

1.配置文件的组成 ​ 配置文件由全局块events块http块组成 1.1 全局块 ​ 从配置文件开始到events之间的内容&#xff0c;主要会设置一些影响Nginx服务器整体运行的配置指令&#xff0c;主要包括配置运行Nginx服务器的用户(组)、允许生成的worker process数&#xff0c;进程pid…

Java数据结构与Java算法学习Day06---堆(简略笔记记录)

目录 一、堆 96 1.1堆的定义 96 1.2堆的API设计 97 1.3堆---堆的插入方法 98 1.4堆---堆的删除最大元素方法 99 1.5堆---堆的测试 100 二、堆排序 101 2.1堆排序 101 一、堆 96 1.1堆的定义 96 堆实际上也是利用数据结构实现的&#xff0c;用树实现的特殊结构&…

(mac M1)Flutter环境搭建

下载Flutter SDK&#xff0c;需要科学上网。 将Flutter永久添加到PATH中 1 sudo vim ~/.bash_profile 打开文件 2 export PATHpwd/flutter/bin:$PATH 将这个添加到前几行环境变量设置中 3 :wq 退出vim 4 source ~/.bash_profile 配置马上生效命令 运行 flutter doctor 命令&a…

【Linux】yum的介绍和使用

本期主题&#xff1a;yum介绍和使用博客主页&#xff1a;小峰同学分享小编的在Linux中学习到的知识和遇到的问题小编的能力有限&#xff0c;出现错误希望大家不吝赐作为程序员&#xff0c;不会有人还没女朋友吧。 目录 &#x1f341;1.软件包是什么&#xff1f; &#x1f341;…

[附源码]Python计算机毕业设计Django小型银行管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

Qwt开发笔记(二):Qwt基础框架介绍、折线图介绍、折线图Demo以及代码详解

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/128194710 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…

单片机硬件和软件延时、RTOS相对延时和绝对延时

已剪辑自: https://mp.weixin.qq.com/s/-RPLQn4KO9Aqu1fpfZeOKA 前不久有个读者在问关于延时的问题&#xff0c;大概就是问&#xff1a;软件延时和硬件延时是啥意思&#xff1f;做项目时他俩有什么区别&#xff1f; 今天就来讲讲关于硬件延时和软件延时的内容&#xff0c;以及…

[GitHub]将本地文件上传远程仓库(安装,创建SSHKey,上传远程仓库)

目录 什么是GitHub 注册账户以及创建仓库 安装Git 配置Git ​编辑 将本地项目上传远程仓库 创建本地仓库 创建远程仓库 克隆远程仓库到本地 什么是GitHub github是一个基于git的代码托管平台&#xff0c;付费用户可以建私人仓库&#xff0c;我们一般的免费用户只能使用公共…

Android 动画实现 从基础到自定义

1. 基础使用 由于是继承了ValueAnimator类 所以使用的方法十分类似&#xff1a;XML 设置 / Java设置1.1 Java设置 ObjectAnimator animator ObjectAnimator.ofFloat(Object object, String property, float ....values); // Object object&#xff1a;需要操作的对象 // Str…

【SpringCloud负载均衡】【源码+图解】【二】LoadBalancer配置

【SpringCloud负载均衡】【源码图解】【一】LoadBalancer的HelloWorld体验 目录2. LoadBalancer的配置2.1 config.LoadBalancerAutoConfiguration2.2 BlockingLoadBalancerClientAutoConfiguration2.3 LoadBalancerEurekaAutoConfiguration2.4 loadbalancer.LoadBalancerAutoCo…