JavaScript之---嵌入JS代码

JavaScript
嵌入JS代码
- 方式一
- 方式二
- 方式三

JavaScript

概述

JavaScript之前叫LiveScript，由网景公司“布兰登艾奇”开发的。
JavaScript的语法和Java的语法有点类似，但与Java没什么关系。
JavaScript是一门脚本语言：即最终运行的那个程序是以普通文本的形式保存的。和Java的区别也正在于此，Java语言需要先编译源文件，生成字节码文件，运行的是编译后的字节码文件，字节码文件不是普通文本，无法用记事本打开。Java也不是脚本语言。
HTML是主体、CSS用来修饰HTML的、JavaScript是用来操作HTML和CSS的。修改HTML中的元素，修改CSS样式，达到网页的动态效果。

嵌入JS代码

方式一

JS是一种基于事件驱动型的编程语言，一般都是依靠事件来触发JS代码执行的
在JS当中任何一个事件都有对应的一个事件句柄，在事件句柄中提供JS代码，所有的事件句柄都是在事件名称前添加on
鼠标单击事件：click
鼠标双击事件：dblclick
获取焦点事件：focus
失去焦点事件：blur
注意：所有的事件句柄都是以“标签的属性”形式存在
在JS中有一个内置的隐含对象：window
window代表的是浏览器窗口对象，可以直接拿来使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 需求：在页面中有一个按钮，点击该按钮会弹出对话框 --><!-- onclick后面的JS代码不会在页面打开的时候执行，只有当鼠标单击click事件发生之后才会执行这个JS代码。window有一个alert方法，可以完成弹窗操作--><input type="button" value="点击" onclick="window.alert(123)"/></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 需求：在页面中有一个按钮，点击该按钮会弹出对话框 --><!-- onclick后面的JS代码不会在页面打开的时候执行，只有当鼠标单击click事件发生之后才会执行这个JS代码。window有一个alert方法，可以完成弹窗操作 --><!-- JS当中字符串可以使用双引号，也可以使用单引号，window也可以省略不写 --><input type="button" value="点击" onclick="window.alert(123)"/><input type="button" value="点击" onclick="window.alert('hello,world')"/><input type="button" value="点击" onclick='window.alert("hello,world")'/><input type="button" value="点击" onclick='window.alert("hello,world")alert("hi,world")'/></body>
</html>

方式二

脚本块

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 脚本块 --><!-- 脚本块可以写多个，也没有位置的限制 --><script type="text/javascript">//JS的注释，与Java的注释相同//在script标签内部的代码会遵循自上而下的顺序一次逐行执行//在script标签内部的JS代码会在页面打开的时候执行，并不需要事件发生alert("hello,world")alert("hi,world")</script></body>
</html>

方式三

引入外部独立的JS文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 引入外部独立的JS文件 --><script src="JS/003.js" type="text/javascript" charset="utf-8"></script></body>
</html>

文章为学习笔记，如有不足还请指正。

JavaScript之---嵌入JS代码相关推荐

JavaScript系列-02 HTML嵌入js代码的第二种方式
javaScript系列 HTML中嵌入js代码的第二种方式脚本块的方式文章目录 javaScript系列前言一.了解脚本块的方式 1.1运行规则二.执行原理 1.编写代码 2.效果总结 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
HTML嵌入JS代码的三种方式
目录一.HTML嵌入JS代码的第一种方式:直接加一个事件句柄跟表达式二.HTML嵌入JS代码的第二种方式:脚本块三.HTML嵌入JS代码的第三种方式:外部引入js文件一.HTML嵌入JS代码的 ...
高仿【华为消费者业务官网】和精彩动画剖析：练习在低代码平台中嵌入JS代码
本课程是华为消费者业务官网的仿站习作. 页面排版精美,照搬原站UI,一键导入HTML和CSS,还原度非常高,达到以假乱真的程度. 本课程重点是带领读者学习如何在众触低代码应用平台中嵌入JS代码,也有视 ...
JavaScript 技术篇-使用js代码获取浏览器窗口标题名，js获取页面URL地址
用 Google 页面来举例子,Google 是它的窗口标题名,https://www.google.com是它的页面 url 地址. document.title 可以用来获取窗口标题名. loca ...
Web前端 | HTML嵌入JS代码的三种方式
✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!
js怎么使用php代码,js代码怎么用
在学习JavaScript之前我们应该先来了解一下JavaScript代码如何使用?下面我们就来看看js代码的用法. 我们在使用JavaScript代码有两种写法:一种是在HTML页面中直接嵌入js代 ...
java解析js代码----笔记
笔记直接贴代码了 package top.demo.js;import javax.script.Invocable; import javax.script.ScriptEngine; import ...
第一讲javascript入门（js的组成、事件类型、嵌入方式、注释方式、输出方式、变量类型、变量命名规则、字符串转义符、算术运算符、数据类型转换、null和undefined的区别）
目录理论: JavaScript是什么 js的组成二.JavaScript引入方式 1.嵌入式 2.外部引入事件定义三.JavaScript注释方式 1.单行注释 2.多行注释四.JavaS ...

JavaScript之---嵌入JS代码

JavaScript之---嵌入JS代码

JavaScript

嵌入JS代码

方式一

方式二

方式三

JavaScript之---嵌入JS代码相关推荐

最新文章

热门文章