【你也能从零基础学会网站开发】Web建站之javascript入门篇 认识JavaScript脚本语言

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

什么是脚本语言

脚本语言是一种应用程序扩展语言,用于系统的扩展,使其按用户的意愿去运行。
所有的基础功能由系统提供,脚本语言在更高一层次描述如何调用系统的接口。

其中脚本语言的分类:嵌入式 和 非嵌入式

JavaScript能做什么

JavaScript是一种网页编程技术,大部分使用者将它用于创建动态交互网页,是一种使用简单,功能强大的编程语言!

在Web页面上,目前主要分为三大块,也就是俗称的前端开发三大件:HTML, CSS, JavaScript
HTML
HTML类似于结构,你可以用HTML定义一些结构,包括header, footer, sidebar或者类似的,就像你在网页中看到的不同的“块”(仅是视觉上的块,并不是块级元素)
CSS
CSS则用于定义样式和布局,比如字体,字号,“块”的大小,位置
JavaScript
那么JavaScript具体能做什么呢?
见的说JavaScript做动态的东西, 动态的东西包括但不限于:表单提交,样式改变,用户操作监控与响应
举个栗子
比如用户点击后处理某些事情,还有就是自动化一些事情
比如在网页完全加载完成后,自动发送一些数据或者从服务器端获取一些数据并展示在页面上
这些都可以使用JavaScript来完成!

从目前新手刚刚接触js来看它主要能给刚刚接触它的人实现一些简单的功能

如下:

  1. 客户端表单合法性验证
  2. 浏览器对象的调用
  3. 浏览器事件的触发
  4. 网页特殊显示效果制作

另外目前有了Node.js,人们才会想到把JavaScript用在服务器端,或者说人们想到把JavaScript放到服务器端,才有了Node.jsJavaScript变得更加强大!

题外话
一说服务器端,大多会想到大数据处理,并发,线程,进程或者其他的概念。
在这里明确一下,Node.js适合做的是服务器端前端的响应,比如用户请求来了,推一条数据回去,或者用户数据来了,记录一些东西。

如果你希望收集一些用户的数据,然后在后面做分析,那么这一类的工作,最好不要让Node.js,或者不要让JavaScript来做。

JavaScript和其它语言的异同

JavaScript是一种基于对象和事件驱动的解释性脚本语言,具有与Java和C语言类似的语法

JavaScript和其他语言脚本语言一样,都应用于高级任务控制,大多都是解释执行,都属于弱类型语言,数据类型在运行时决定,实现自动内存管理机制,资源的分配策略相似。

但不同的是,JavaScript运行于浏览器中,主要用于Web开发,这方面它和VBScript一样

而其他众多脚本语言都运用于特定的软件环境以帮助实现任务自动化,

例如flash的ActionScript,使用该脚本语言可以使动画产生很多行为操作 自动化人物处理等等!

JavaScript的特点

简洁易用,JavaScript与Java有类似的语法, 可以使用任何文本编辑工具编写, 只需要浏览器就可以执行程序,你看多方便!

JavaScript基于对象内置大量现成对象,我们可以编写少量程序可以完成目标!

另外之前说了JavaScript是一个 弱类型语言,对于刚刚接触的新手,你只要记住一点,无需进行严格的变量声明的一些脚本语言都可以归类为弱类型JavaScript就是其中之一, 当然还有php等后端脚本语言也是一样的!

什么是编译执行和解释执行的语言?

我会尽量用最简单、最通俗易懂的方式来解释编译执行解释执行 让大家能听明白!

编译执行

编译执行就像做菜前的准备工作。首先,你会把食材(源代码)准备好,然后按照菜谱(编译器)的指导,把这些食材做成一道道菜(可执行文件)。等这些菜都准备好了,你就可以直接端上桌(运行程序)给客人吃了。这个过程就是编译执行 你可以简单的这样理解!

编译的好处是,一旦菜(程序)做好了,客人吃起来就很快,因为都是现成的。
但如果你想要改菜谱(修改源代码),那就得重新做一遍菜(重新编译)。

解释执行

解释执行则像是现场做菜给客人吃。每次客人点什么菜(运行什么源代码),厨师(解释器)就现场按照菜谱(源代码)来做(解释执行)。

这样做的好处是,如果客人突然想改菜(修改源代码),厨师可以马上改,因为都是现场做的。
但缺点是,如果客人点的菜很复杂或者很多,那厨师做起来可能会比较慢(执行速度慢)。

所以简单来说:
编译执行 先做成菜,再端上桌吃, 修改食材要重新做菜。
解释执行 现场做菜给客人吃。修改食材可以马上改,但做菜可能会慢。

而我们今天要说的主角JavaScript就是一个解释执行的语言,事先不编译 逐行执行!

这意味着JavaScript代码在运行时由解释器逐行读取并执行,而不是像编译型语言那样先被编译成机器代码再执行。因此,当你修改JavaScript代码时,不需要像编译型语言那样重新编译整个程序,只需要重新加载或刷新页面,解释器就会重新解释并执行修改后的代码, 其实这样一来,对于刚刚开始学习编程的新手倒是轻松了不少!

JavaScript和Java的区别

首先JavaScript与Java运行方式不一样: JavaScript是解释执行,而Java是编译,解释执行!
记住JavaScript并不是Java的简化版本,虽然有一些逻辑运算符、语句结构类似, 但是变量申明、对象调用等不同!
JavaScript和Java功能实现不一样: JavaScript通过浏览器实现程序功能, Java通过Java虚拟机实现程序功能!

为什么起名叫 JavaScript

javascript最初其实不叫这个名字,而是网景取名为Livescript
但是当时Java语言非常红火,并且Netscape网景与Sun公司合作过,网景公司高层管理层希望Livescript外观看起来像Java语言,因此改名为JavaScript! 所以网景公司是希望借Java的名气来推广这个javascript,但事实上JavaScript除了语法上有点像 Java之外,其他部分基本上没任何关系

反正你就记住javajavascript 压根就没有任何关系!

第一个JavaScript程序

准备知识:

我们要使用一个叫document对象中的write方法将字符串Hello World输出显示在浏览器客户区里。
或者也可以使用window对象alert方法以消息框的形式输出信息
当然还可以使用我们最经典的控制台打印console.log()方法
刚刚开始学习JavaScript的时候,这几个方法 最好是记一下!

我们只需要把JavaScript程序嵌入HTML文档中, 最常用方法就是将代码放在<script>标签对中 。

JavaScript代码在HTML文档中的形式。
代码包含于<script>和</script>标记对,然后嵌入到 HTML文档中, 并且最好写到Head标签中去!

例如

01	<html>									<!---------HTML文档开始------->
02		<head>								<!---------文档头开始--------->
03			<title>							<!---------标题开始----------->
04			</title>						<!---------标题结束----------->
05		</head>								<!---------文档头结束--------->
06		<body>								<!---------文档体开始---------->
07			<script language="JavaScript">	<!---------脚本程序------------>
08				// JavaScript程序语句
09				// ......
10			</script>						<!---------脚本结束------------>
11		</body>								<!---------文档体结束----------->
12	</html>	

当然后期我们也可以通过<script>标记的 src属性链接外部的 JavaScript脚本文件 也可以!

那么我们第一个经典的程序如下:


01	<html>				    		<!---------HTML文档开始----------->
02	<body>							<!---------文档体开始------------->
03	<script>  						<!---------脚本程序--------------->
04		document.write("Hello World!");	// 输出经典的Helloworld
05	</script>						<!---------脚本结束--------------->
06	</body>							<!---------文档体结束------------->
07	</html>							<!---------HTML文档结束----------->

然后打开浏览器运行一下,你这个html页面,看看效果, 我这里使用的编辑器是WebStorm

如图

看到了吧,就这么简单,有浏览器就能运行JavaScript

而且基本上主流浏览器都支持,放心食用😈!

浏览器对JavaScript的支持
在互联网发展的过程中,几大浏览器之间也存在激烈的竞争。JavaScript是Netscape公司的技术,其它浏览器并不能和Navigator一样良好的支持JavaScript,因为得不到使用许可。微软公司为能使其IE浏览器能抢占一定市场份额,于是在IE中实现了称为JScript的脚本语言,其兼容JavaScript,但是和JavaScript间仍然存在版本差异。因此,编程人员在编码时仍然考虑不同浏览器间的差别。

我们其实可以用一些JavaScript代码来检测一下当前所用的浏览器的一些信息

document.write("名称:" + navigator.appName+"<br>"); 	// 浏览器名称
document.write("版本号:" + navigator.appVersion+"<br>"); 	// 浏览器版本号
document.write("发行代号:"+navigator.appCodeName+"<br>"); // 浏览器的内部发行代号

你可以去各种浏览器中去尝试运行一下以上代码所打印的效果是什么!

JavaScript编辑器的选择

关于编辑器的选择,这里我还是建议刚刚入门的朋友可以使用Dreamweaver来编写,
当然你也可以根据个人喜好使用以下工具:

	记事本vscodeEclipseJBuilterHBuilterWebStormEditPlus..... 等等....

编辑器有很多,我这里就不过多挨个去介绍了,但是有一点大家一定要记住:
我曾经说过的,不要去纠结要使用什么编辑器,重点是学好语言本身,你是程序员,不是倒卖软件的,也不是用这些软件去给小白装逼用的,😈😈😈

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

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

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

相关文章

0201安装报错-hbase-大数据学习

1 基础环境简介 linux系统&#xff1a;centos&#xff0c;前置安装&#xff1a;jdk、hadoop、zookeeper&#xff0c;版本如下 软件版本描述centos7linux系统发行版jdk1.8java开发工具集hadoop2.10.0大数据生态基础组件zookeeper3.5.7分布式应用程序协调服务hbase2.4.11分布式…

Neo4j 新手教程 环境安装 基础增删改查 python链接 常用操作 纯新手向

Neo4j安装教程&#x1f680; 目前在学习知识图谱的相关内容&#xff0c;在图数据库中最有名的就是Neo4j,为了降低入门难度&#xff0c;不被网上很多华丽呼哨的Cypher命令吓退&#xff0c;故分享出该文档&#xff0c;为自己手动总结&#xff0c;包括安装环境&#xff0c;增删改查…

server win搭建apache网站服务器+php网站+MY SQL数据库调用电子阅览室

一、适用场景&#xff1a; 1、使用开源的免费数据库Mysql&#xff1b; 2、自己建网站的发布&#xff1b; 3、使用php代码建网站&#xff1b; 4、使用windows server作为服务器&#xff1b; 5、使用apache作为网站服务器。 二、win server 中apache网站服务器搭建 &#xff0…

集群下锁失效的问题(JAVA)

一&#xff0c;出现问题的原因 因此每一个锁对象&#xff0c;都会指向一个锁监视器&#xff0c;而每一个锁监视器&#xff0c;同一时刻只能被一个线程持有&#xff0c;这样就实现了互斥效果。但前提是&#xff0c;多个线程使用的是同一把锁。 但问题来了&#xff0c;我们的服务…

C语言之练手题

题目1&#xff1a; 思路&#xff1a;我们定义两个变量left和right分别为数组的左端下标和右端下标。 左端下标的元素为奇数时&#xff0c;left继续往前走&#xff0c;为偶数时就停下 右端下标的元素为偶数时&#xff0c;right- -往回走&#xff0c;为奇数时停下 停下后对应的元…

ubuntu18.04编译OpenCV-3.4.19+OpenCV_contrib-3.4.19

首先确保安装了cmake工具 安装opencv依赖文件 sudo apt-get install build-essential sudo apt-get install git libgtk-3-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev sudo apt-get install python3-dev python3-numpy libtbb2 libtbb-dev libjpeg-dev li…

Linux操作系统的vim常用命令和vim 键盘图

在vi编辑器的命令模式下&#xff0c;命令的组成格式是&#xff1a;nnc。其中&#xff0c;字符c是命令&#xff0c;nn是整数值&#xff0c;它表示该命令将重复执行nn次&#xff0c;如果不给出重复次数的nn值&#xff0c;则命令将只执行一次。例如&#xff0c;在命令模式下按j键表…

03:HAL---中断

目录 一:中断 1:简历 2:AFIO 3:EXTI 4:NVIC基本结构 5:使用步骤 6:设计中断函数 二:中断的应用 A:对外式红外传感计数器 1:硬件介绍 2:计数代码 B:旋转编码计数器 1:硬件介绍 2:旋转编码器代码 C:按键控制LED D:代码总结 一:中断 1:简历 中断&#xff1a;在主程序…

基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程(五)——多条件搜索并分页展示

前后端数据交互 书接上文&#xff0c;我们上节课通过前后端数据交互实现了分页查询和单条件搜索分页查询的功能&#xff0c;最后留了个小尾巴&#xff0c;就是把其他两个搜索条件&#xff08;email,address&#xff09;也加进来&#xff0c;实现多条件搜索并分页展示。这节课我…

ThreadLocal 内存泄漏问题

ThreadLocal 用于存储线程本地的变量&#xff0c;如果创建了一个 ThtreadLocal 变量&#xff0c;在多线程访问这个变量的时候&#xff0c;每个线程都会在自己线程的本地内存中创建一份变量的副本&#xff0c;从而起到线程隔离的作用。 Thread、ThreadLocal、ThreadLocalMap 之…

RabbitMQ架构详解

文章目录 概述架构详解核心组件虚拟主机&#xff08;Virtual Host&#xff09;RabbitMQ 有几种广播类型 概述 RabbitMQ是⼀个高可用的消息中间件&#xff0c;支持多种协议和集群扩展。并且支持消息持久化和镜像队列&#xff0c;适用于对消息可靠性较高的场合 官网https://www.…

ShardingSphere-SQL 解析 Issue 处理流程

ShardingSphere-SQL 解析 Issue 处理流程 这是之前给社区写的 SQL 解析 Issue 的处理流程&#xff0c;可以帮助社区用户快速参与到 ShardingSphere-SQL 解析任务当中。 ShardingSphere SQL 解析 issue 列表 Issue 背景说明 当前 Issue 使用自定义的爬虫脚本从对应的数据库官…

数据中台驱动:高效交付之道

如何保证数据中台高效交付&#xff1f; 在数据行业中&#xff0c;项目交付难题尤为突出&#xff0c;尤其在数据中台领域。数据中台项目交付面临诸多挑战&#xff0c;若不妥善解决&#xff0c;将会降低服务质量&#xff0c;影响企业数字化建设的顺利开展&#xff0c;甚至影响项目…

智能合约语言(eDSL)—— proc_macro实现合约init函数

我们通过属性宏来实现合约的init函数&#xff0c;call函数其实和init是类似的&#xff1b; GitHub - XuHugo/xwasm 构建属性宏&#xff0c;要在cargo.toml里面设置一些参数&#xff0c;这是必须的。一般来说&#xff0c;过程宏必须是一个库&#xff0c;或者作为工程的子库&…

桑晋秋:个性化头相关传递函数的研究动态及展望 | 演讲嘉宾公布

一、3D 音频专题论坛 3D 音频专题论坛将于3月27日同期举办&#xff01; 3D音频技术不仅能够提供更加真实、沉浸的虚拟世界体验&#xff0c;跨越时空的限制&#xff0c;探索未知的世界。同时&#xff0c;提供更加丰富、立体的情感表达和交流方式&#xff0c;让人类能够更加深入地…

前端javascript的DOM对象操作技巧,全场景解析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属的专栏&#xff1a;前端泛海 景天的主页&#xff1a;景天科技苑 文章目录 1.js的DOM介绍2.节点元素层级关系3.通过js修改&#xff0c;清空节点…

第九篇 – 过程发现(Process Discovery)是如何赋能数字化市场营销全过程?- 我为什么要翻译介绍美国人工智能科技巨头IAB公司

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先后为700多家媒体…

Kubesphere前端项目分析

1 KubeSphere console功能导图 模块&#xff1a; 命令行工具 (kubectl) 日志&#xff08;Logging&#xff09; 平台设置&#xff08;Platform Settings&#xff09; 服务组件&#xff08;Service Components&#xff09; 监控和警报&#xff08;Monitoring & Alerting&…

iOS-系统弹窗调用

代码&#xff1a; UIAlertController *alertViewController [UIAlertController alertControllerWithTitle:"请选择方式" message:nil preferredStyle:UIAlertControllerStyleActionSheet];// style 为 sheet UIAlertAction *cancle [UIAlertAction actionWithTit…

纳斯达克大屏:NASDAQ广告大屏多少钱?

大舍传媒 近期&#xff0c;美国纽约纳斯达克大屏广告&#xff08;NASDAQ广告大屏&#xff09;备受瞩目&#xff0c;众多企业纷纷关注其广告投放效果以及费用。纳斯达克大屏广告的价格究竟是多少呢&#xff1f;下面我们从事件的经过、相关背景信息以及对其影响和意义的分析等方…