超详细JavaScript入门基础+练手小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS使用</title>
</head>
<body>
    <!-- 元素绑定事件 -->
    <button onclick="
    console.log('hello world')">click me</button>
</body>
</html>

2.文档内嵌

在页面文档中使用<script>加载JavaScript代码的过程。

注意：标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的 JavaScript代码，因此，不同的位置会影响代码最终的执行效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS使用</title>
    <style>
        /* CSS代码 */
    </style>
    <script>
        // JS代码
        console.log('写在head中的代码')
    </script>
</head>
<body>
    <!-- 元素绑定事件 -->
    <button onclick="console.log('hello world')">click me</button>
    <script>
        console.log('写在最后的代码')
    </script>
</body>
</html>

3.外部链接

创建一个外部的JavaScript文件index.js，并在HTML文档中引入使用的过程。

注意：既可以实现内嵌JavaScript代码，也可以实现外部的JavaScript文件，但是只能二选一。

三.JavaScript输出语句

注意：（document.write("")）

1.能识别HTML标签，脚本代码可以下=在文档任何地方书写，区分代码的书写位置。

2.文档渲染结束后（页面元素加载完成），如果再次执行此方法，将会重写网页的全部内容。

四.语法规则

编写JavaScript代码时，必须遵循下列语法的规则：

1.代码由语句组成，语句由关键字，变量，常量，运算符，方法组成。

2.分号可以作为语句结束的标志，也可以省略。

3.JavaScript代码严格区分大小写。

4.注释语法：单行注释使用// 多行注释使用/* */

4.1 输入语句

prompt()方法用于显示可提示用户进行输入的对话框：

1.格式

prompt(text,defaultText)

2.参数说明

text 可选。要在对话框中显示的纯文本

defaultText可选。默认的输入文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS语句</title>
</head>
<body>
    <script>
        // 接收用户输入的用户名
        prompt('请输入用户名');
        // 在页面中显示欢迎xxx
        document.write('欢迎');
    </script>
</body>
</html>

效果如下：

4.2 变量的定义

作用：用于存储程序运行过程中可动态修改的数据。

语法：使用关键var声明，自定义变量名。

    <script>
        // 接收用户输入的用户名
        var userName = prompt('请输入用户名');
        // 在页面中显示欢迎xxx
        document.write('欢迎' + userName);
    </script

最低0.47元/天解锁文章

炒鸡蛋44

关注

8
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
超详细JavaScript入门基础+练手小案例

一.什么是JavaScript它是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。它由下列三部分组成：1.核心语法：规范JavaScript的基本语法。2.BOM：提供了一系列操作浏览器的方法。3.DOM：提供了一系列操作文档的方法。二.使用方法将JavaScript嵌入页面有以下三种方式：1.元素绑定事件事件：指用户的行为（单击，双击等）。事件处理：元素监听事件，并在事件发生后自动执行事件过程
复制链接

扫一扫

专栏目录