01 js语言基础——初识js

火山杨111

已于 2022-09-12 19:50:09 修改

阅读量172

点赞数

文章标签： javascript 前端 html

于 2022-09-06 16:27:15 首次发布

本文链接：https://blog.csdn.net/weixin_55697613/article/details/126719490

版权

一、JavaScript是什么？

是一种运行在客户端的脚本语言。脚本语言是指不需要编译，运行过程中需要由js解释器（js引擎）逐行进行解释并执行。（编译：是指利用编译程序将由语言编写的源程序转变为目标程序的过程）。
现在可以基于Node.js技术进行服务端编辑。客户端：指Client，是指自己的电脑；服务端：是指远程。

二、JS的的作用

表单动态验证（密码强度测试）
网页特效
服务端开发（Node.js）
桌面程序（Electron）
App
控制硬件——物联网（Ruff）
游戏开发（cocos2d-js）

三、HTML/CSS/JS的关系

HTML：决定网页结构和内容，描述类语言（相当于人的身体）
CSS：决定网页呈现给用户的样子，描述类语言（相当于人的衣服，妆容）
JS：实现业务逻辑和页面控制，编程类语言（相当于人的动作）

四、浏览器执行JS简介

浏览器分成两部分：渲染引擎和JS引擎。渲染引擎：俗称内核。 JS引擎：也称作JS解释器，用来读取网页中的JS代码，然后对其处理并运行。
浏览器本身不会执行JS代码，而是通过内置JS引擎（JS解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JS是脚本语言，会逐行解释执行。

五、JS的组成

JS分为三部分组成：ECMAScirpt，DOM，BOM

ECMAScirpt：指JS基础核心语法
DOM：指页面文档对象模型，对页面上的各种元素进行操作（大小，位置，颜色等）
BOM：指浏览器对象模型，对浏览器上的窗口进行操作（弹出框，控制浏览器跳转，获取分辨率等）

六、JS三种书写位置

JS有三种书写位置，分为内嵌，行内，外部。

行内式

新建一个test.html文件，实现点击“中国”按钮，弹出“北京”的弹窗。

错误示范：

浏览器显示：

显示错误结果，连注释都打印出来了。

错误原因：//单行注释，是js中的注释，但是我创建的是html文件，html中的注释为【ctrl+/】

正确示范：

为实现设置一个“中国”按钮，点击之后，出现“北京”：

使用vscode编写代码：

<!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>Document</title>
</head>
<body>
    <!-- 1.行内式的js，直接写到元素的内部 -->
    <input type="button" value="中国" onclick="alert('北京')"
</body>
</html>

浏览器显示：

显示结果：

2.内嵌式

实现弹出“你好”的弹窗。

<!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>Document</title>
    <style></style>
    <!-- 2.内嵌式的js -->
<script>
    alert('你好')
</script>

</head>
<body>
    <!-- 1.行内式的js，直接写到元素的内部 -->
    <input type="button" value="中国" onclick="alert('北京')"
</body>
</html>

显示结果：

3.外部式——适用于代码量比较大的情况。

实现弹出“hello”的弹窗。

step1：新建一个my.js文件，编写弹窗“hello”的弹窗。

step2：通过test.html文件来进行外部调用my.js。

<!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>Document</title>
    <style></style>
    <!-- 2.内嵌式的js -->
<script>
    alert('你好')
</script>
<!-- 3.外部js script 双标签 -->
<script src="my.js"></script>

</head>
<body>
    <!-- 1.行内式的js，直接写到元素的内部 -->
    <input type="button" value="中国" onclick="alert('北京')"
</body>
</html>

显示结果：

七、两种注释方式

JS中有两种注释方式：单行注释和多行注释。

1.单行注释 //，快捷键：Ctrl+/

2.多行注释 /*xxxxx

xxxxx*/

八、JS的输入输出语句

方法	说明	归属
alert（msg）	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt（info)	浏览器弹出输入框，用户可以输入	浏览器

输入代码：

<!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>Document</title>
    <script>
        //这是一个输入框
        prompt('请输入你的年龄')
        //alert 弹出警示框，输出的，展示给用户的
        alert('计算的结果是')
        //console，控制台输出，给程序员调试用的
        console.log('我是程序员可以看到的')
    </script>
</head>
<body>
    
</body>
</html>

显示结果：

prompt（）