【Web前端学习笔记】第三章 JavaScript常见使用方法

【Web前端学习笔记】第三章 JavaScript常见使用方法


文章目录

  • 【Web前端学习笔记】第三章 JavaScript常见使用方法
    • 前言
    • 一、JavaScript是什么?
    • 二、JavaScript特点
    • 三、 JavaScript常见使用方法
        • 变量
        • 数据类型
        • 运算符
        • 各种语句
        • 方法/函数
        • DOM 文档对象模型
        • NaN
        • JavaScript对象分类
        • BOM浏览器对象模型
        • DOM文档对象模型
      • 三、前端MVC设计模式
      • 四、Vue
    • 总结


前言

本文记录了JavaScript的一些常见使用方法,以及一些前端常用框架。


一、JavaScript是什么?

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

二、JavaScript特点

1.作用:负责给页面添加动态效果
2.语言特点 :

  • 属于脚本语言(不需要编译直接由浏览器解析执行)

  • 基于面向对象

  • 属于弱类型语言

3.三种引入方式 :

  • 内联: 在标签的事件属性中添加js代码 , 当事件触发时执行

    • 事件 : 就是浏览器窗口中发生的一些特定的交互瞬间

    • 点击事件 : 在用户点击元素时触发浏览器窗口中发生的一些特定的交互瞬间

  • 内部 : 在html页面中的任意位置添加script标签 , 标签体内写js代码

  • 外部 : 在单独的js文件中写js代码 , 然后在html页面中通过script标签的src属性引入到html页面

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--内联:onclick点击事件  alert()弹出提示框-->
<input type="button" value="按钮" onclick="alert('按钮点击了!')">

<!--在内部引入JS-->
<script>
    /*在浏览器的控制台中输出*/
    console.log("内部引入成功!");
</script>

<!--引入外部JS文件,如果script标签引入了外部JS文件,则不能在标签体内写JS代码-->
<script src="my.js"></script>
</body>
</html>

三、 JavaScript常见使用方法

变量

  • JS属于弱类型语言
Java: String name="tom";  int age = 18;  age="abc"; //报错

JS: let name="tom";  let age = 18;   age="xyz"; //不报错 
  • let和var关键字的区别 , 作用域不同

    • 使用let声明的变量 , 为一个局部变量

    • 使用var声明的变量 , 不管在什么位置声明 , 都相当于是一个全局变量

数据类型

  • JavaScript中只有引用类型(对象类型)
  • 常见的对象类型 :
    • number : 数值类型 , 相当于Java中所有数值类型的总和
    • String : 字符串 , 可以用单引号或双引号修饰 : ‘tom’ , “tom”
    • boolean : 布尔值 , true/false
    • undefined : 未定义 ,当变量只声明不赋值时 , 变量的类型为未定义
  • 获取变量类型的方式 : typeof 变量

运算符

  • 算术运算符: + - * / %, JS除法会自动根据结果转换整数还是小数

    - Java : int x = 5;  int y = 2;  x / y = 2;
    - JS : let x = 5; let y = 2;  x / y = 2.5;
    
  • 关系运算符: > < >= <= != == 和 ===

    • == : 先统一等号两边的类型,再比较值 : “666” == 666 true
    • === : 先比较类型,类型相同之后再比较值 : “666”===666 false
  • 逻辑运算符 : && || !

  • 三目运算符 : 条件 ? 值1 : 值2

  • 赋值运算符: = += -= *= /= %= ++ –

各种语句

  • if else
  • while
  • do while
  • for
  • switch case

方法/函数

  • Java : public 返回值类型 方法名(参数列表) { 方法体 }

  • JS : function 方法名(参数列表) { 方法体 }

  • 常见的四种方法:

    • 无参无返回值
    • 无参有返回值
    • 有参无返回值
    • 有参有返回值
  • 声明方法的三种方式 :

    1. function 方法名(参数列表) { 方法体 }
    2. let 方法名 = function(参数列表) { 方法体 }
    3. let 方法名 = new Function(“参数1”,“参数2”,“方法体”);
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script>
    //1.无参无返回
    function f1() {
      console.log("f1");
    }
    //调用
    f1();
    //2.有参无返回值
    function f2(name,age) {
        console.log(name+":"+age);
    }
    f2("孙尚香",50);
    //3.无参有返回值
    function f3() {
      return "我是返回值!";
    }
    //接收返回值
    let info = f3();
    console.log(info);
    //4.有参有返回值
    function f4(x,y) {
        return x*y;
    }
    let result = f4(8,9);
    console.log(result);

    //第二种声明方法的方式
    let f5 = function (name,age) {
      console.log(name+":"+age);
    }
    f5("刘备",70);

    //第三种声明方法的方式
    let f6 = new Function("name","age","console.log(name+':'+age)");
    f6("吕布",40);
script>
body>
html>

DOM 文档对象模型

和页面相关内容

  • 通过元素的id获取元素对象
    • let 元素对象 = document.getElementById(“元素id”);
  • 通过CSS中接触到的选择器获取元素对象
    • let 元素对象 = document.querySelector(“选择器”);
  • 获取和修改元素的文本内容
    • 元素对象.innerText; //获取
    • 元素对象.innerText=“xxx”; //修改
  • 获取和修改表单中的控件的值
    • 控件.value; //获取
    • 控件.value=“xxx”; //修改
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>这是divdiv>
<input type="text" id="i1">
<input type="button" value="点一下" onclick="f()">
<script>
    function f() {
        //得到文本框和div
        let d = document.querySelector("div");
        let i = document.querySelector("#i1");
        //取出文本框的值并赋值给div
        d.innerText = i.value;
    }
script>
body>
html>

NaN

  • Not a Number: 不是一个数
  • isNaN(x) 判断变量是否是NaN

JavaScript对象分类

  • 内置对象 : 包括String , number , boolean等

  • BOM : Browser Object Model , 浏览器对象模型 , 包括和浏览器相关的内容

  • DOM : Document Object Model , 文档对象模型 , 包括和页面标签相关的内容

BOM浏览器对象模型

  • window: 此对象里面的属性和方法称为全局的属性和方法,访问时可以省略掉window.

  • window中常见的方法:

    • alert(“xxx”)弹出提示框

    • confirm(“xxx”) 弹出确认框

    • prompt(“xxx”) 弹出文本框

    • isNaN(x) 判断变量是否是NaN

    • parseInt()和parseFloat() 把字符串转成整数或小数

    • console.log() 控制台输出

    • let timer = setInterval(方法,时间间隔) 开启定时器

    • clearInterval(timer) 停止定时器

    • setTimeout(方法,时间间隔) 开启只执行一次的定时器

  • window对象中常见的属性

    • location位置

      • location.href 获取和修改浏览器的请求地址

      • location.reload() 刷新页面

    • history历史

      • history.length 获取历史页面数量

      • history.back() 返回上一页面

      • history.forward() 前往下一页面

      • history.go(n) n=1是前往下1页面 n=-1 返回上一页面 n=2 前往下2个页面 n=0代表刷新

DOM文档对象模型

包含和页面元素相关的内容

  1. 通过选择器获取页面中的元素对象

    let 元素对象 = document.querySelector(“选择器”)

  2. 获取和修改元素的文本内容

    元素对象.innerText = “xxx”; 修改文本内容

    元素对象.innerText 获取文本内容

  3. 获取和修改input控件的值

    控件对象.value=“xxx”; 修改

    控件对象.value 获取

  4. 创建元素对象

    let 元素对象 = document.createElement(“标签名”);

  5. 添加元素对象到某个元素里面

    document.body.appendChild(元素对象);

    父元素.appendChild(元素对象);

    父元素.append(元素对象,元素对象,元素对象);

三、前端MVC设计模式

  • MVC设计模式 , 其实就是将前端实现某个业务的所有代码划分为三部分
    • Model : 模型 , 指数据模型 , 这个数据一般来自于服务器
    • View : 视图 , 指页面标签内容
    • Controller : 控制器 , 指将数据展示到视图中的过程代码
  • 前端MVC设计模式弊端 : 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作 , 会影响执行效率
  • M,V,VM设计模式
    • Model : 模型, 指数据模型 , 这个数据一般来自于服务器
    • View : 视图 , 指页面标签内容
    • ViewModel : 视图模型 , 将页面中可能发生改变的元素和某个变量在内存中进行绑定 , 当变量的值发生改变时会从内存中直接找到对应的元素让其改变

四、Vue

  • Vue框架是目前最流行的前端框架

    • 执行原理
      Vue对象相当于MVVM设计模式中的VM,负责将页面中可能发生变化的元素和变量进行绑定,绑定完之后会不断监听变量的改变,当变量值发生改变的时候会自动找到对应元素并修改其显示内容。
  • 使用方式:必须引用vue.js文件

    • 直接引用CDN服务器的vue框架
      • Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
        unpkg:https://unpkg.com/[email protected]/dist/vue.min.js
        cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
    • 将vue框架下载到本地导入项目中使用

在web中创建js目录,放入vue.js文件:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
   <h1>{{info}}h1>
div>


<script src="../js/vue.js">script>
<script>
    let v = new Vue({
        el:"#app", /* 告诉vue对象管理的区域 */
        data:{
            info:"Hello Vue!"
        }
    })
    setTimeout(function () {
        v.info = "值改变了!";
    },3000);
script>
body>
html>
  • 相关指令

    • {{变量}} : 插值 , 让此处的文本内容和变量进行绑定

    • v-text=“变量”, 让元素的文本内容和变量进行绑定

    • v-html=“变量”, 让元素的html内容和变量进行绑定

    • v-bind : 属性名 = “变量”, 让元素的xxx属性和变量进行绑定 , 可以省略掉v-bind

    • v-model = “变量”, 双向绑定, 当变量的值发生改变页面会跟着改变 , 页面的内容改变时变量也会跟着改变 , 只有使用form表单中的控件时才会涉及到双向绑定.

    • v-on : 事件名=“方法”, 事件绑定 , 简写@事件名=“方法” , 调用的方法必须声明在Vue里面的methods里面


总结

本文介绍了JavaScript的特点,常见使用方法,以及前端的设计模型和常用框架。

你可能感兴趣的:(学习笔记,javascript,前端,学习)