JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

alert("我的第一个 JavaScript");

</script>

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

	那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

实例

<!DOCTYPE html>

<html>

<body>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落</p>");

</script>

</body>

</html>

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>

<html>

<head>

function myFunction()

{

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</head>

<body>

</body>

</html>

<body> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>

<html>

<body>

function myFunction()

{

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</body>

</html>

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

实例

<!DOCTYPE html>

<html>

<body>

</body>

</html>

你可以将脚本放置于 <head> 或者 <body>中实际运行效果与您在 <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下：

function myFunction(){

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

对JS的了解，是否还停留在jquery？来访问数据库试试吧，做全栈是如此的简单~！
JS访问mysql的工具类，大致需求如下：1，单实例，避免数据库链接浪费。2，连接池功能。3，链接检测。4，提供简单查询和执行的方法，支持异步和同步（返回对象是Promise）。

我会看着你调试代码呢

JavaScript的骨子里面就是简单、优雅、灵活、精致。访问数据库也是如此。

想的越少，做的越快

JavaScript方法封装应该都使用Promise返回，首先是封装了catch异常，更重要的是这样可以任由使用者来决定是同步调用还是异步调用，等于一份代码支持两种场景。

支持一个好，还是支持两个好？

如果有更好的建议，请及时提出指正一起进步哈

// 使用mysql2的  promise包，能更好的适应 同步和异步处理
const mysql = require('mysql2/promise');
// 读取mysql配置，可以先忽略，自行定义即可
var dbbooks = require('../config').db.books

class Db{
    static getInstance(){ //1、单例 多次实例化实例不共享的问题
        if(!Db.instance){
            Db.instance = new Db()
            Db.instance.connect()     /*实例化的时候就连接数据库*/
        }
        return Db.instance;
    }
    constructor(){
        //创建pool, 这个时候不会链接数据库，有需要的时候才链接
        this.pool = mysql.createPool({
            host: dbbooks.host,
            user: dbbooks.username,
            port: dbbooks.port,
            password: dbbooks.password,
            database: dbbooks.database,
            waitForConnections: true,
            connectionLimit: 10,
            queueLimit: 0
          })
    }
    /**
     * 链接数据库
     */
    connect(){
        //测试是否通畅
        this.query('select 1').then(()=>{
            console.log('mysql connected', dbbooks)
        }).catch(()=>{
            console.log('mysql connect fail', dbbooks)
        })
    }

    //  每一个对外公开的方法，都应该尽可能写成Promise，
    //   这样由使用者来决定是同步调用还是异步调用，
    //   而且promise自带对异常的处理，代码更安全。
    
    /**
     * 查询
     * @param {string} sql 
     * @param {Array} param 
     * @returns 
     */
    async query(sql, param){
        return new Promise((resolve, reject) => {
            this.pool.query(sql, param).then((results)=>{
                resolve(results[0])
            }).catch((err)=>{
                reject(err);
            })
        });
    }

    /**
     * 查询只返回一个对象，如果查询不到，返回 {}
     * @param {string} sql 
     * @param {Array} param 
     * @returns 
     */
    async queryOne(sql, param){
        return new Promise((resolve, reject) => {
            this.pool.query(sql, param).then((results)=>{
                // console.log('resutls', results)
                if(results[0].length>=1){
                    resolve(results[0][0])
                }else{
                    resolve({})
                }
            }).catch((err)=>{
                reject(err);
            })
        });
    }
  
    /**
     * 执行新增，修改，删除的sql。也可以执行查询sql
     * @param {string} sql 
     * @param {array} param 
     * @returns 
     */
    async execute(sql, param){
        return new Promise((resolve, reject) => {
            this.pool.execute(sql, param).then((results)=>{
                // console.log(results, '---', fields)
                resolve(results[0]) 
            }).catch((err)=>{
                reject(err);
            })
        });
    }

}
// 这里， Db.getInstance() 每次返回的是同一个对象，以此实现单例调用
module.exports = Db.getInstance()

测试代码

var db = require('../db/mysql')
// 同步调用
const testbook = async ()=>{
  return await db.query('select * from books  where status=0  order by views desc');
}
testbook().then((data)=>{
    console.log(data)
}).catch((err)=>{
	 console.log(err)
})

//或者是 异步调用
db.query('select * from books  where status=0  order by views desc').then((data)=>{
    console.log(data)
}).catch((err)=>{
	 console.log(err)
})

同步和异步调用的区别在于，你是否决定马上处理异常（then,catch），还是以后再说（同步await执行）。

你是最靓的仔，你来决定什么时候执行

关注老胡，带来更多简单优雅的代码。

Flutter中加载网页和使用网页中的方法可以通过多种方式实现，以下是一些常见的方法：

### 使用`webview_flutter`

`webview_flutter`是一个Flutter插件，它可以嵌入完整的Webview，让你可以在Flutter应用中加载和显示网页。

1. 首先，在`pubspec.yaml`中添加依赖：

dependencies:

flutter:

sdk: flutter

webview_flutter: ^2.0.13

2. 使用`webview_flutter`加载网页：

import 'package:webview_flutter/webview_flutter.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Webview Example'),

),

body: WebviewWidget(),

),

);

}

}

class WebviewWidget extends StatelessWidget {

@override

Widget build(BuildContext context) {

return WebviewWidgetState();

}

}

class WebviewWidgetState extends State<WebviewWidget> {

@override

Widget build(BuildContext context) {

return WebviewScaffold(

url: 'https://www.example.com',

withZoom: true,

withLocalStorage: true,

);

}

}

3. 如果需要在网页中调用Flutter的方法，可以使用`webview_flutter`提供的`evaluateJavascript`方法。

String _evaluateJavascript(String script) {

final result = await webViewWidgetState.evaluateJavascript(script);

return result;

}

void _callMethod() {

_evaluateJavascript('console.log("Method called from web page!");');

}

### 使用`url_launcher`

如果你只是想让用户在浏览器中打开网页，可以使用`url_launcher`。

import 'package:url_launcher/url_launcher.dart';

Future<void> _launchUrl(String url) async {

if (await canLaunch(url)) {

await launch(url);

} else {

throw Exception('Could not launch $url');

}

}

void main() {

runApp(MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Open Web Page'),

),

body: Center(

child: ElevatedButton(

onPressed: () => _launchUrl('https://www.example.com'),

child: Text('Open Web Page'),

),

),

),

));

}

### 使用`html`包

如果你只是想显示网页的HTML内容，可以使用`html`包。

dependencies:

flutter:

sdk: flutter

html: ^0.12.0+1

import 'package:html/html.dart';

void main() {

runApp(MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('HTML Example'),

),

body: HtmlWidget(htmlString),

),

));

}

String htmlString = '''

<!DOCTYPE html>

<html>

<head>

<title>Example Web Page</title>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

''';

使用`html`包时，你不能直接从网上加载HTML内容，你需要将HTML内容作为字符串提供。

选择哪种方法取决于你的具体需求。如果你需要完整的Web浏览功能，`webview_flutter`可能是最佳选择。如果你只是想展示HTML内容，`html`包可能更简单。如果你只是想让用户在默认浏览器中打开网页，`url_launcher`就足够了。

在线咨询

上一篇：每天学点JavaScript编程-ES6(ECMAScript5)@“对象”扩展运算符
下一篇：值得收藏学习的最新HTML5学习课程大纲

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 用法

您的项目需求