JavaScript的入门简介

最新推荐文章于 2022-08-22 16:46:08 发布

书和咖啡

最新推荐文章于 2022-08-22 16:46:08 发布

阅读量573

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ivenqin/article/details/105944376

版权

JavaScript 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

什么是 JavaScript

JavaScript，我们一般简称为 JS，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

JavaScript 现在已经被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并支持面向对象、命令式和声明式风格。

HTML、CSS、JavaScript三者不同的功能：

HTML：定义网页的内容。
CSS：描述页面的布局。
JavaScript：指定网页的行为。

JavaScript 基本特点

JavaScript 是一种属于网络的脚本语言，已经被广泛用于 Web 应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常 JavaScript 脚本是通过嵌入在 HTML 中来实现自身的功能的（就是写在 HTML 页面中的 <script> 标签中）。

JavaScript 的基本特点如下所示：

Javascript 是一种解释性脚本语言，代码不进行预编译。
Javascript 主要作用是用来向 HTML 页面添加交互行为。
Javascript 代码可以直接嵌入 HTML 页面，但写成单独的 .js 文件有利于结构和行为分离。
脚本语言，Javascript 脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基础程序框架。
跨平台特性，JavaScript 脚本语言不依赖于操作系统，仅需要浏览器的支持。在绝大多数浏览器的支持下，可以在 Windows、Android、Linux、Mac、IOS 等平台下运行。

JavaScript 可以做一些什么事情

JavaScript 可以做一些什么事情呢，我们下面简单的介绍一下，可能还没学过 JavaScript 的同学看不懂，不要急，后面我们都会详细的介绍。

直接写入 HTML 输出流，如下所示，我们可以直接在 JavaScript 中写入HTML 代码：

<script type = "text/javascript">
  document.write("<h1>侠课岛</h1>");
  document.write("<p>侠课岛欢迎你！</p>");
</script>

对事件作出反应，可以使用 onclick 在HTML元素上绑定事件：

<button type="button" onclick="alert('侠课岛')"> 点击弹出 </button>

修改 HTML 中的内容，例如自定义一个 change() 方法，然后绑定到按钮上：

<body>
  <p id="content">原来的内容</p>
  <button type="button" onclick="change()">点击修改</button>
</body>
<script type = "text/javascript">
  function change(){
    document.getElementById('content').innerHTML = '新的内容'
  }
</script>

JavaScript 还可以实现改变 HTML 图像，例如通过 <img> 标签的 src 属性来改变一张 HTML 图像，如下所示：

<body>
  <button onclick="changeImage()">修改图片</button>
  <div>
    <img id="myImage" src="./img/part1-01.jpg">
  </div>
</body>
<script type = "text/javascript">
  function changeImage(){
    element=document.getElementById('myImage');
    if(element.src.match("02")){
      element.src="./img/part1-01.jpg";
    }else{
      element.src="./img/part1-02.jpg";
    }
  }
</script>

JavaScript 可以用来改变 HTML 样式，例如：

<p id="style">JavaScript改变HTML样式</p>

//点击之后呈现的效果是：颜色变绿
<button type="button" onclick="document.getElementById('style').style.color='green'">点击</button>