HTML+CSS+JS 学习笔记(三)———Javascript(上)

简介: HTML+CSS+JS 学习笔记(三)———Javascript(上)

目录

前言

HTML中使用javascript

JS注释

单行注释

多行注释

JS代码的语法规则

三个常用的输出语句

变量

如何使用变量

变量的命名规则和规范

基础语法

1- if语句

2- 循环

3.contiinue语句

4.break语句

5. try···catch···fnally 语句

Error 对象

使用 throw 语抛出异常


前言

为什么要学习Javascript?

经过之前的学习以后,我们已经能够知道,如果要建立一个网站,我们可以通过

HTML实现整个网站的结构,CSS实现整个网站的样式,完成一个非常漂亮的静态页面,但是这样的页面仅仅是静

态页面,如果我们想让这个网站的功能更加丰富,我们必须给这个网站添加行为也就是我们javascript,那么这个

行为到底是什么意思呢?我们先来看一个例子: 百度图片搜索 动态的加载更多的数据,不使用JS是做不到的

JavaScript是什么?

官方概念:这是一个跨平台的脚本语言

平台:就是运行环境,这里一般指操作系统

JavaScript和HTML、CSS的区别

    1. HTML:提供网页的结构,提供网页中的内容
    2. CSS: 用来美化网页
    3. JavaScript: 可以用来控制网页内容,给网页增加动态的效果

    JavaScript的组成

    image.gif编辑

    ECMAScript JavaScript的核心

    ECMA 欧洲计算机制造联合会

    网景:JavaScript

    微软:JScript

    定义了JavaScript的语法规范

    JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标

    准,定义了一种语言的标准与具体实现无关

    BOM

    浏览器对象模型一套操作浏览器功能的API

    通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率

    DOM

    文档对象模型

    一套操作页面元素的API

    DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操

    HTML中使用javascript

      1. 在html页面中使用<script> 标签包含页面需要执行的 javascript代码
      2. 引入外部的js文件到本html页面中生效
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title></title>
      </head>
      <body>
      </body>
      <!-- 在本页面的 script 标签中书写JS脚本语法 -->
      <script>
      document.write("<p style='background-color:lightgray;'>大家好</p>");
      </script>
      <!-- 引入外部的JS文件 -->
      <script src="./js/main.js"></script>
      </html>
      1. image.gif

      JS注释

      单行注释

      用来注释单条代码 , 也可以用来描述下面一行或多行代码的作用

      // 这是一个变量
      var age = 18;

      image.gif

      说明: subline编辑器下单行注释快键键 ctrl+/

      多行注释

      用来注释多条代码

      /
      var age = 18;
      var username = 'zhangsan';
      console.log(username, age);
      /

      image.gif

      说明: subline编辑器下多行注释快键键 ctrl+shift+/

      JS代码的语法规则

        • JavaScript严格区分大小写
        • JavaScript脚本程序须嵌入在HTML文件中
        • JavaScript脚本程序可以独立保存为一个外部文件 这个文件是不能自己运行的它必须要依赖于HTML文件
        • JavaScript脚本程序中不能包含HTML标记代码
        • 每条语句末尾如果加分号一定是英文下的分号(;),最好加分号,不要省略
        • 一行写了多条JS语句 这个时候每一条语句就必须要加分号

        三个常用的输出语句

        document.write("要输出的内容")

        作用:

          • 它主要是用来向body标签中输出write()小括号里面的内容document它表示是当前的HTML文档对象
          • write在英文中是“写”的意思
          • 对象是由属性与方法组成的 对象.属性与对象.方法 从视觉上面来区分属性与方法 属性不带小括号 方法
          • 带有小括号
          • write它是一个输出的方法 如果输出的内容是HTML标签,浏览器会帮我们解析

          window.alert("要输出的内容")

          作用:

            • alert在英文是“警告”的意思
            • window它表示的是当前的浏览器窗口对象 window对象是js中最顶级的对象 可以省略不写
            • 它主要是用来向当前的浏览器窗口中弹出一个警告提示框
            • 实际开发不太常用 用户体验不好 经常用来检测结果

            window对象与document对象之间的区别:

              • window对象它代表着当前的浏览器窗口对象
              • document对象它代表着当前的HTML文档对象
              • window对象包含document对象
              • 站在window的角度来说document对象是window对象的一个属性

              console.log("要输出的内容")

              作用:

                • 向浏览器的调试工具中的“console” 选项卡里面输出内容
                • console的英文意思是“控制台”
                • log是日志的意思
                • 经常内部测试用的 程序猿看的

                另外: console.log还可以同时输出多个值

                1 console.log(值1,值2,值3,值4...)

                2 或者

                3 console.log(变量名1,变量名2,变量名3,变量名4...)

                变量

                什么是变量

                变量是一种可以变化的量,变量主要是用于存储数据的。我们命令JavaScript去干活的时候,往往需要产生一

                些数据,需要临时性存放起来,方便取用。我们也可以理解为,变量就像一个购物袋,我们可以用来装苹

                果、榴莲(当然也可以用来装玫瑰),变量是存放在内存中,内存是临时存储数据的。

                硬盘:持久性存储

                内存:临时性存储

                总结:

                  • 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
                  • 为什么要用变量: 有些数据我们需要保存起来, 方便后面来使用 我们就可以用变量来做
                  • 变量是用来保存数据的 变量的本质就是一个 盒子 类似我们前面学的html 标签
                  • 变量 就是用来保存数据的容器 变量是保存到内存里面的。

                  如何使用变量

                  var声明变量

                  定义变量需要有一个关键字var 英文单词variable变量的意思

                  声明变量,不赋值

                  var 变量名

                  声明变量,并且赋值

                  var 变量名 = 值

                  var age;

                  age = 18;

                  var username = "zhangsan";

                  变量的赋值

                  将等于号右边的值赋值给等于号左边的变量名!

                  第一种方式:先声明变量然后再来赋值

                  var age;

                  age = 18;

                  第二种方式:声明变量的同时直接给变量赋值

                  var age = 18;

                  可以同时声明多个变量

                  方式一:

                  var age, username, sex;

                  age = 10;

                  username = 'zhangsan';

                  sex = '男'

                  方式二:

                  var age = 10,username = "zhangsan",sex="男";

                  修改变量的值,变量总是喜新厌旧的,变量里面只能存放最后给的值 类似css层叠性

                  声明一个变量已经给其赋了值 然后再来修改这个变量的值!

                  格式:

                  变量名 = "新值" //给变量名重新赋一个值

                  var age = 16;

                  age = 18;

                  //这个时候,age的值为18,而不是16,18.

                  变量的命名规则和规范

                  规则必须遵守的,不遵守会报错

                    • 由字母(A-Za-z)、数字(0-9)、下划线(_)、$符号组成,不能以数字开头
                    • 不能是JS中关键字和保留字,例如:for、while等(其中变量名为name需要注意,不会错,但是不推荐使
                    • 用,因为name是window对象下的一个属性,设置的属性值会被加上双引号,成为字符串类型)
                    • 区分大小写

                    规范建议遵守的,不遵守不会报错

                      • 变量名需要有意义,希望大家在声明变量的时候变量名要做到"见名知意"
                      • 变量名可以由多个英文单词组成 建议使用下划线连接法或者是驼峰法

                      1. 下划线连接法 每一个单词之间使用下划线进行连接 比如:get_user_name

                      2. 驼峰法 第一个英文单词的首字母小写其它的英文单词首字母大写 比如:getUserName

                      基础语法

                      1- if语句

                      <script>
                      //定义变量
                      var score = 90;
                      if(score < 60){
                      document.write("得分:" + score + ", 等级:差");
                      }else if(score < 75){
                      document.write("得分:" + score + ", 等级:中");
                      }else if(score < 85){
                      document.write("得分:" + score + ", 等级:良");
                      }else if(score < 95){
                      document.write("得分:" + score + ", 等级:优秀");
                      }else{
                      document.write("得分:" + score + ", 等级:很秀");
                      }
                      </script>

                      image.gif

                      2- 循环

                      <script>
                      //定义累加和
                      var sum = 0;
                      //数值循环
                      for(var i=1; i<=100; i++){
                      sum += i;
                      }
                      document.write("sum= " + sum +"<br>");
                      //定义变量
                      var sum = 0;
                      var i = 1;
                      //条件循环
                      while(i<=10){
                      sum += i;
                      i++;
                      }
                      document.write(sum);
                      </script>

                      image.gif

                      3.contiinue语句

                      for(i=1;i<=10;i++)
                      {
                        if(i==5) continue;
                      document.write(i+"\n");
                      }

                      image.gif

                      结果:1 2 3 4 5 6 7 8 9 10

                      在使用continue语句跳转本次循环后,如果循环条件的结果为法拉瑟,则退出循环,否则继续下一次循环

                      4.break语句

                      for(i=1;i<=10;i++)
                      {
                        if(i==5) break;
                      document.write(i+"\n");
                      }

                      image.gif

                      结果:1 2 3 4

                      5. try···catch···fnally 语句

                      JavaScript 从 Java 中引入了 ty.catch...fnally 语,具体语法格式如下:

                      try{
                          somestatements;
                      }
                      catch(exception)
                      {
                      somestatements;
                      }
                      finally
                      {
                      somestatements;
                      }

                      image.gif

                      该语法中的参数说明如下

                      (1) try:尝试执行代码的关键字

                      (2) catch: 捕捉异常的关键字。

                      (3)fnally:最终一定会被处理的区块的关键字,该关键字和后面大括号中的语句可以省略。

                      Error 对象

                      try...catch...fnally 语句中的 catch 通常捕提到的对象是 Error 对象,当运行JavaScrip代码时,如果产生了错误或异常,JavaScript 就会生成一个 Error 对象的实例来描述错误或异常,该实例中包含一些特定的错误或异常信息。

                      Error 对象有以下两个属性。

                      (1) name:表示异常类型的字符串

                      (2) message:实际的异常信息。

                      例如,将异常提示信息放置在弹出的提示对话框中,其中包括实际的异常信息和异常类型的字符串。程序代码如下:

                      var str = "I like JavaScript";// 定义字符串变量
                       try(
                      document.write(str.charat (5));//应用错误的方法名charat
                      }
                      catch(exception){
                      //弹出实际的异常信息和异常类型的字符串
                      alert("实际的异常信息为:"+exception.message+"\n异常类型的字符串为:"+exception.name);
                      }

                      image.gif

                      使用 throw 语抛出异常

                      有些 JavaScript 代码并没有语法上的错误,但存在逻辑上的错误。对于这种错误,JavaScript 是不会抛出异常的。这时,就需要创建一个Error 对象的实例,并使用 throw 语句抛出异常。在程序中使用 throw 语句可以有目的地抛出异常。

                      throw 语句的语法格式如下:

                      throw new Error("somestatements");

                      image.gif


                      相关文章
                      |
                      2天前
                      |
                      移动开发 前端开发 JavaScript
                      [HTML、CSS]细节与使用经验
                      本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
                      15 1
                      [HTML、CSS]细节与使用经验
                      |
                      3天前
                      |
                      移动开发 前端开发 JavaScript
                      [HTML、CSS]知识点
                      本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
                      14 1
                      [HTML、CSS]知识点
                      |
                      3天前
                      |
                      JavaScript
                      JS鼠标框选并删除HTML源码
                      这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
                      11 4
                      |
                      2天前
                      |
                      移动开发 HTML5
                      html5+three.js公路开车小游戏源码
                      html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
                      12 0
                      html5+three.js公路开车小游戏源码
                      |
                      10天前
                      |
                      JSON 移动开发 数据格式
                      html5+css3+js移动端带歌词音乐播放器代码
                      音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
                      54 6
                      |
                      9天前
                      |
                      前端开发
                      HTML 样式- CSS3
                      内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
                      HTML 样式- CSS2
                      HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
                      |
                      9天前
                      |
                      前端开发
                      HTML 样式- CSS1
                      CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
                      |
                      2月前
                      |
                      XML 前端开发 JavaScript
                      Html:CSS介绍
                      Html:CSS介绍
                      48 1
                      |
                      2月前
                      |
                      前端开发
                      Html:CSS的书写位置
                      Html:CSS的书写位置
                      32 0