JS语法学习笔记｜ 青训营

iiru
84 阅读3分钟

JavaScript 语法基础知识

一、复习回顾 HTML 、 CSS ，Javasripts引入

1.1 一个基本 HTML 、 CSS 页面
  • <head> <body> <foot> <style> <meta> <link>
1.2 实现页面的功能
  • 输入 <button> <input>
  • 输出 控制台、DOM

二、 JavaScript 基础背景知识储备

2.1 JavaScript 介绍

  • JavaScript是什么？

    • JavaScript是一种浏览器脚本语言，是一种运行在浏览器中的解释型的、弱类型的编程语言。诞生之初是专门为浏览器环境设计，但是现在也广泛地运用在各种场景下。
    • Java和JavaScript的关系:取名为JavaScript最初是网景(navigator开发商)希望能借Java名气作推广，实际二者毫不相干...emmm

  • JavaScript有什么用？

    • 在Web设计时,如果只能把图片、文本等元素贴在页面上,那页面就是一张大号的静态海报，显然，这种效果并不理想。
    • JS的在元素和数据之间架起了桥梁，通过变量、常量等的数据变化，使在页面上可以有实现交互。
    • JS的运用可以嵌入动态文本让页面有丰富的变化,借助JS还可以实现动画/3D等效果

  • JavaScript和编译类语言的区别？

    • 学习JS和学习C语言的方法类似,记忆语法,多动手实践操作。C语言是一种典型的编译类语言，需要使用gcc编译库对自然语言(待编译文件.c)处理成机器语言(可执行文件.exe)才能够运行。JS则不需要,JS是脚本语言,可以实时将高级语言转为机器语言自动执行。
    • 相比HTML 和 CSS来说,可以真的称得上是在编程,HTML和CSS是标记语言,而JS具有逻辑性、有编程语言的函数、IPO 结构等,学好JS是成为前端程序猿必要前提。

【文章推荐: JavaScript的语言基本特点】

三、 JavaScript 基础知识

3.1 引入一个 JS 程序的三种方法
  • 1.外部引入(✨推荐)
<script type="text/javascript" src="路径/文件名.js"></script>- 0

  • 在与html文件同一文件夹下面创建一个.js格式文件,任意命名。例"first.js"

    • 那么引入

<script type="text/javascript" src="./first.js"></script>

  • 如果script标签外部引入js文件，那么此标签当中就不能再写js程序

  • 2.内部引入

<script type="text/javascript">
    //js代码
    alert('js hello world!');//弹窗
</script>
  • 3.行内引入
<input type="button" value="行内引入方式" onclick="javascript:alert('蓝山学前端');">

  • 附: 外引式代码框架:

    • HTML文件 index.html
    • 
        <!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>JavaScript基础知识</title>
              </head>
              <body>
                  <div>
                    <input class="btn-1" type="button" value="行内引入方式" onclick="fn()";>
                  </div>
              </body>
          </html>
           <script type="text/javascript" src="./first.js"></script>
    •   CSS文件 index.css
      .body{
          width:100%;
          height:100%;
          margin:25% 25%;
          background-color:#efefef
        }
        .btn-1{
          width:"3rem";
          border:none;
          border-radius:8px;
          background-color:#012eef
        }        -
  • JS文件 first.js
      function fn(){
       console.log("来蓝山找灿灿学前端！");
    }

3.2 执行第一个 JS 程序

  • 页面事件(event)

    • 发生在html标签元素上的事情
    • 一般通过事件的触发让html元素和js函数建起联系，也叫事件绑定函数
    • 几个常见的事件:
事件名执行含义参数约定
onclick鼠标点击事件event.target(点击事件源元素)
onmouseover光标移动到元素上方时event.clientX(横坐标) event.clientY(纵坐标)
onmouseout光标移出元素上方时event.clientX(横坐标) event.clientY(纵坐标)
onkeydown键盘按键按下事件key:键位编号
onkeyup键盘按键松开事件key:键位编号
onfocus输入框获取焦点事件event.clientX(横坐标) event.clientY(纵坐标)
onblur输入框失去焦点事件event.clientX(横坐标) event.clientY(纵坐标)
onstroll文档被滚动时
  • Console 对象
控制台方法执行含义参数约定
log()控制台输出一条信息Number String Object Array
clear()清空控制台
warn()控制台输出警告
assert()断言(断言为false打印err))Boolean
count()调用次数计数器Number
avatar
文章
阅读
粉丝