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 用法

您的項目需求