Hướng dẫn js file not loading in html - tệp js không tải trong html

Tôi có vấn đề tương tự. Dưới đây là mã trong hai tệp chỉ tạo trang trống trắng, không có lỗi nào được báo cáo là mã thực thi, vấn đề là gì?

Tệp index.html:

Tệp chính.js:

function init() {
    var scene = new THREE.Scene();

    var box = getBox(1, 1, 1);
    var plane = getPlane(4);

    box.position.y = box.geometry.parameters.height/2;
    plane.rotation.x = Math.PI/2;

    scene.add(box);
    scene.add(plane);

    var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth/window.innerHeight,
        1,
        1000
    );

    camera.position.x = 1;
    camera.position.y = 2;
    camera.position.z = 5;

    camera.lookAt(new THREE.Vector3(0, 0, 0));

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('webgl').appendChild(renderer.domElement);
    renderer.render(
        scene,
        camera 
    );
}

function getBox(w, h, d) {
    var geometry = new THREE.BoxGeometry(w, h, d);
    var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });
    var mesh = new THREE.Mesh(
        geometry,
        material 
    );

    return mesh;
}

function getPlane(size) {
    var geometry = new THREE.PlaneGeometry(size, size);
    var material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        side: THREE.DoubleSide
    });
    var mesh = new THREE.Mesh(
        geometry,
        material 
    );

    return mesh;
}

init();

Quay lại trang 9 của lớp »

Bao gồm JavaScript trong trang của bạn là một quá trình khá đơn giản.

Đầu tiên, JavaScript là gì?

Từ trang web của các trường W3C:

• JavaScript được thiết kế để thêm tính tương tác vào các trang HTML
• JavaScript là ngôn ngữ kịch bản
• Ngôn ngữ kịch bản là ngôn ngữ lập trình nhẹ
• JavaScript thường được nhúng trực tiếp vào các trang HTML
• JavaScript là một ngôn ngữ được giải thích (có nghĩa là các tập lệnh thực thi mà không cần biên dịch sơ bộ)
• Mọi người đều có thể sử dụng JavaScript mà không cần mua giấy phép

Bao gồm cả JavaScript

Bạn có thể bao gồm JavaScript trong HTML của mình theo hai cách:

• Viết mã trong HTML của bạn
• Bao gồm nó như một liên kết đến một tệp bên ngoài

Đối với hầu hết các phần, bạn sẽ bao gồm JavaScript như một tệp bên ngoài.

Thẻ Script

Thẻ

Khi sử dụng thẻ tập lệnh, chúng ta phải luôn sử dụng tên và giá trị thuộc tính của type="text/javascript".

Sử dụng thẻ script để bao gồm tệp JavaScript bên ngoài

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ tập lệnh với thuộc tính src. Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính SRC phải là đường dẫn đến tệp JavaScript của bạn.

Thẻ tập lệnh này phải được bao gồm giữa các thẻ

function init() {
    var scene = new THREE.Scene();

    var box = getBox(1, 1, 1);
    var plane = getPlane(4);

    box.position.y = box.geometry.parameters.height/2;
    plane.rotation.x = Math.PI/2;

    scene.add(box);
    scene.add(plane);

    var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth/window.innerHeight,
        1,
        1000
    );

    camera.position.x = 1;
    camera.position.y = 2;
    camera.position.z = 5;

    camera.lookAt(new THREE.Vector3(0, 0, 0));

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('webgl').appendChild(renderer.domElement);
    renderer.render(
        scene,
        camera 
    );
}

function getBox(w, h, d) {
    var geometry = new THREE.BoxGeometry(w, h, d);
    var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });
    var mesh = new THREE.Mesh(
        geometry,
        material 
    );

    return mesh;
}

function getPlane(size) {
    var geometry = new THREE.PlaneGeometry(size, size);
    var material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        side: THREE.DoubleSide
    });
    var mesh = new THREE.Mesh(
        geometry,
        material 
    );

    return mesh;
}

init();

Các tập tin JavaScript

• Luôn kết thúc với tiện ích mở rộng JSjs extension
• Chỉ bao gồm JavaScript

Theo thông lệ, đặt tất cả các tệp JavaScript vào một thư mục có tên JS trên các trang web, như vậy:folder called js on websites, like so:

Bản demo đơn giản bao gồm JavaScript

Dưới đây là một minh chứng rất đơn giản về cách đưa tệp JavaScript bên ngoài vào trang HTML.

• Ví dụ JavaScript cơ bản

JavaScript của người khác

Đối với lớp này, bạn không được kỳ vọng sẽ viết bất kỳ mã JavaScript thực tế nào. May mắn cho bạn, nhiều người đã viết rất nhiều JavaScript và thậm chí cho phép bạn sử dụng nó miễn phí.

Khung JavaScript

Một khung về cơ bản là một thư viện mã cho một ngôn ngữ nhất định. Nói chung, khung tóm tắt các nhiệm vụ phổ biến và giúp các nhà thiết kế và nhà phát triển dễ dàng và nhanh hơn để viết mã cụ thể của họ. Các khung không thực sự tự làm bất cứ điều gì, họ chỉ cung cấp một nền tảng dễ dàng hơn cho mọi người để xây dựng.

Khung JavaScript thông thường:

• JQuery
• Nguyên mẫu
• Mootools
• script.aculo.us

Trong số các khung này, JQuery hiện là phổ biến nhất. Nó cũng là thứ mà bạn thích nhất khi gặp phải được sử dụng như một từ buzz.

Kích thước tệp JavaScript

Nhiều tệp JavaScript có thể có xu hướng khá lớn, có thể làm chậm thời gian tải của trang của bạn. Các khung phổ biến thường cung cấp một phiên bản "thu nhỏ" của mã của họ. Bạn nên luôn luôn sử dụng phiên bản này trong các trang của mình vì nó sẽ có kích thước tệp nhỏ hơn.

Quay lại trang 9 của lớp »

Tại sao tệp JS của tôi không hoạt động trong HTML?

Làm cách nào để mở một tệp JavaScript trong HTML?

Tại sao JavaScript của tôi không hiển thị?

Làm thế nào kết nối JS với HTML?