• 带你初识JavaScript基础语法

    文章目录

    在这里插入图片描述

    本文任务

    JavaScript在页面中使用的三种方式
    使用typeof检测JavaScript数据类型
    加减乘除算法题

    本文目标

    理解JavaScript作用
    了解JavaScript组成
    掌握JavaScript基本结构
    掌握JavaScript在页面中使用的三种方式
    掌握JavaScript中的数据类型
    掌握JavaScript中的变量与运算符

    为什么要学习JavaScript

    表单验证——减轻服务器压力
    制作页面特效
    动态改变页面内容

    什么是JavaScript

    JavaScript是一种基于对象和事件驱动的脚本语言
    JavaScript特点

    • 交互、脚本语言、解释性语言
    • 边执行边解释

    JavaScript组成

    在这里插入图片描述

    JavaScript组成

    ECMAScript是一种语法标准

    • 语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象

    编码遵循ECMAScript标准

    讲解：ECMAScript是一种开放的、国际上广为接受的、标准的脚本语言规范。

    • 1、JavaScript与ECMAScript的关系，以及ECMAScript是一种开放的、国际上广为接受的、标准的脚本语方规范，描述的内容：语法、变量、数据类型、逻辑控制语句等
    • 2、编码遵循ECMAScript标准

    BOM：Browser Object Model（浏览器对象模型）

    • 提供了独立于内容与浏览器窗口进行交互的对象

    DOM：Document Object Model（文档对象模型）

    • 是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档

    JavaScript的基本结构

    <script type="text/javascript">
    <!--
          JavaScript 语句;
    -->
</script >


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可。

    JavaScript的应用

    示例

    <title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
    document.write("初学JavaScript");
    document.write("
    Hello，JavaScript
    "    );
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    JavaScript的执行原理

    在这里插入图片描述

    JavaScript在网页中的应用

    在这里插入图片描述
    1、JavaScript直接在HTML标签中应用

    doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript直接在HTML标签中应用title>

head>
<body>
<h1>JavaScript直接在HTML标签中应用h1>
<input name="btn" type="button" value="弹出消息框"  onclick="javascript:alert('欢迎你');"/>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    2、外部JS文件

    doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript基本结构title>
<script  type="text/javascript" src="js/test.js">
script>
head>
<body>
JavaScript基本结构
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    JavaScript核心语法

    在这里插入图片描述

    变量

    先声明变量再赋值
    同时声明和赋值变量
    不声明直接赋值
    在这里插入图片描述

    数据类型

    undefined
    null
    number
    boolean
    string
    在这里插入图片描述
    在这里插入图片描述
    练习：使用typeof检测JavaScript数据类型

    DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>
	<script>
		var width,height=10,name="summer";
		document.write("width: "+typeof(width)+"
    "    );
    	document.write("height: "+typeof(height)+"
    "    );
    	document.write("name: "+typeof(name)+"
    "    );
    	document.write("true: "+typeof(true)+"
    "    );
    	document.write("null: "+typeof(null)+"
    "    );
    	document.write("undefined: "+typeof(undefined));
	    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    运算符

    在这里插入图片描述

    注释

    单行注释以 // 开始，以行末结束
    多行注释以 /* 开始，以 */ 结束

    练习：加减乘除算法题

    doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符title>

head>
<body>
<script  type="text/javascript">
var x=50;
var y=x+10; 
var z=x-8;
var m=x*5;
var n=x/6;
var k=x%6;
var i=10;
i++;
var j=10;
j--;
document.write("x的值为："+x);
document.write("
    y的值为："    +y);
document.write("
    z的值为："    +z);
document.write("
    m的值为："    +m);
document.write("
    n的值为："    +n);
document.write("
    k的值为："    +k);
document.write("
    i++的值为："    + i);
document.write("
    j--的值为："    + j);
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    总结

    在这里插入图片描述
    总结部分主要达到以下几个目的：
    1、回顾内容。注意与与本章任务和目标不一样。本章任务和目标是是强调内容概貌，学到技术，告知要学习什么；总结时，要格外强调观点，把每一个知识点的观点结论都尽量突出出来。
    2、整理逻辑。还应该把观点之间的逻辑联系梳理出来。从而使知识系统化、逻辑化。要帮助学员整清逻辑是总结的一大任务。

  • 相关阅读:
    【Arduino+ESP32专题】使用Arduino类库 TFT_eSPI驱动2.4寸彩屏
    React-Router路由
    【点云处理】点云法向量估计及其加速(4)
    SMB：使用 Ansible 自动化配置 samba 客户端服务端
    新版kafka可视化界面组件
    SpEL 注入 学习笔记
    pands使用openpyxl引擎实现EXCEL条件格式
    Java 世界的法外狂徒：反射
    简单总结Centos7安装Tomcat10.0版本
    Ubuntu上安装docker，并连接vscode详细教程
  • 原文地址：https://blog.csdn.net/hh867308122/article/details/127720240