[Js高手之路第一部]JavaScript上百例实战【新版】_1 js代码三种书写方式

小结:

javascript使用的3种方式:

1,页面script方式

2,行间事件触发

3,外部引入方式

1,页面script方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7         alert(1);
 8     </script>
 9 </head>
10 <body>
11
12 </body>
13 </html>

2,行间事件触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="button" value="点击以后弹出1" onclick="alert(1);">
 9 </body>
10 </html>

3,外部引入方式

.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="./js/main.js"></script>
 7 </head>
 8 <body>
 9
10 </body>
11 </html>

.js

alert(1);

原文地址:https://www.cnblogs.com/denggelin/p/8997797.html

时间: 2024-10-28 11:48:14

[Js高手之路第一部]JavaScript上百例实战【新版】_1 js代码三种书写方式的相关文章

[Js高手之路第一部]JavaScript上百例实战【新版】_3 javascript变量的类型

JavaScript 数据类型 字符串.数字.布尔.数组.对象.Null.Undefined 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 //变量的类型由 变量的值来决定 8 // 弱类型语言 9 10 //字符串类型, 用引

[Js高手之路第一部]JavaScript上百例实战【新版】_2 javascript变量命名&amp;使用规则

变量 1,什么是变量 变量是内存中用来存储数据的一块区域 2,变量的命名规则 3,怎么使用变量 var 变量名 =(赋值) 10 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var name='name'; 8

[Js高手之路第一部]JavaScript上百例实战【新版】_8 javascript二重循环,break与continue语句

输出5行5列的表格 使用二重循环实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 table { 8 /*合并单元格之间的线*/ 9 border-collapse: collapse; 10 } 11 th,t

[Js高手之路第一部]JavaScript上百例实战【新版】_9 javascript二重循环乘法表与n行n列的表格

0.隔行变色的表格 HTML style 属性实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 table { 8 /*合并单元格之间的线*/ 9 border-collapse: collapse; 10 }

[Js高手之路第一部]JavaScript上百例实战【新版】_10 javascript输出一个对角线形状的div

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div { 8 width: 50px; 9 height: 50px; 10 background: palevioletred; 11 position: abso

[Js高手之路第一部]JavaScript上百例实战【新版】_20 读取样式与className和屏蔽空的锚

<input type="button" value="恢复样式" onclick="resetStyle();" /> <input type="button" value="修改样式" onclick="setStyle();" /> 1 <!DOCTYPE html> 2 <html lang="en"> 3 &l

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: 1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 2 module.exports = { 3 entry : ['./src/js/main.js', './src/js/

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install [email protected] --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目 首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上) [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下) [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上) [js高手之路]深入浅出webpack教程系