专栏首页前端与Java学习前端day07-JS学习笔记
原创

前端day07-JS学习笔记

01-JavaScript入门

1.1-JavaScript简介

1.什么是Javascript?

  • javascript是一种编程语言

2.学习Javascript的意义

  • 一个前端网页主要由三门语言组成,他们之间是缺一不可的关系
    • HTML:确定网页的结构
    • CSS: 确定网页的样式
    • JavaScript: 确定网页的行为(交互)
      • 众所周知,在前端开发中一个网页的源代码主要由三部分组成(HTML,CSS,Javascript),其中HTML确定网页的结构,CSS确定网页的样式,而JavaScript则主要负责网页的行为(动态效果,交互事件等)。
  • JavaScript应用场景
    • 1.网页特效
    • 2.游戏开发(cocos2d-js)
    • 3.服务端开发(Node.js)
    • 4.命令行工具(Node.js)
    • 5.桌面程序(Electron)
    • 6.App(Cordova)
    • 7.控制硬件-物联网(Ruff)
      • js作者有一句经典名言:凡是能用js实现的功能,最终都会用js来实现

3.JavaScript语言的组成

  • ECMAScript - JavaScript的核心
    • ECMAScript定义了JavaScript的语言规范
    • JavaScript的核心:描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
  • DOM - 文档对象模型
    • 一套操作页面元素的API
    • DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
  • BOM - 浏览器对象模型
    • 一套操作浏览器功能的API
    • 通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

1.2-JavaScript的三种写法

1-JS代码三种写法

  • JavaScript也有三种书写方式,并且与CSS的三种书写方式几乎一致
  • 1.行内样式:不推荐,因为不便于维护
    • <button onclick="window.alert('坤哥')">点我就告诉你黑马谁最帅</button>
  • 2.内联样式:写在script标签中,如果界面js代码较少可以使用,复杂的话不推荐
    • <script >alert("这是JS内联样式")</script >
  • 3.外联样式:写在js文件中,使用script的src属性导入
    • <script src="./01-JS外联写法.js"></script>

2-细节注意点

  • 1.无论是CSS还是JS的三种写法,当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
  • 2.如果script标签没有src属性则表示内联样式,如果有src属性则表示外联样式,外联样式JS代码只能写在 js文件中而不能写在script标签中

1.3-JS注释两种写法

  • 代码注释的作用:
    • 1.理清思路,方便自己以后阅读代码
    • 2.规范编程,方便以后别人接手代码便于维护
  • JS注释有两种写法
    • // 注释内容:单行注释:注释内容只能是一行,适用于注释内容较少
    • /* 注释内容 */:多行注释:注释内容可以是多行,适用于注释内容较多,比如一行写不下

1.4-JS常用五句话

  • JS中常用的五句话主要功能是用于调试以及浏览器简单的交互
    • JS是一门面向对象高级编程语言,它对于逻辑思想的要求较高,所以在编写JS程序时我们很难做到一次性编写就可以完成所有功能
    • 通常的做法是,我们逐步的去实现功能,每敲几行代码我们来打印一下检查代码是否有问题,如果没有就继续编写
      • 类似于我们使用HTML和CSS写静态界面时,并不是写完所有的代码才运行而是写一部分就看一下界面效果
<script>
    //第一句话:弹出一个提示框,通常用于提示用户,也可以用于调试
    alert("hello world");
    //第二句话:打印某个数据的值,查看数据是否成功
    //这个写法不是给用户看的,而是给程序员自己调试看的
    console.log("欢迎大家来到黑马程序员");
    //第三句话:弹出一个输入框,可以用来输入数据
    prompt("深圳的前端平均薪资是多少呀?");
    //第四句话:弹出一个确认框,默认会有确定和取消按钮用于提示用户再次确认
    confirm("你确定要来深圳校区找我吗?");
    //第五句话:可以给body加内容
    //用的非常少,因为可能会把body原来的内容替换掉
    document.write("i love you?");
</script>

1.5-js代码执行原理

1.计算机将存储在硬盘中的html文件读取到内存中

2.浏览器内核编译器开始编译代码(cpu只能处理二进制数据,需要将我们写的代码转成二进制)

3.CPU处理与计算

4.CPU将我们代码在运行时产生的数据保存到内存中

==02-数据类型与直接量==

/*
    1.js代码报错原因
        (1) 编译器做两件事 : 识别语法,处理(存储与计算)数据
        (2) 报错的原因只有两个 : 
            a. 语法不识别 : SyntaxErro
            b. 数据不识别 : ReferenceErro
        (3) 一旦代码报错,程序终止运行,后面的代码都不会解析。
    2.直接量 : 可以直接使用的数据  (能够被编译器识别的数据)
        * 哪些数据可以被识别 :  必须要符合js的数据类型
    3.数据类型 : js代码在运行时会产生不同的数据,不同的数据存储与处理方式不一样,
所以要对数据进行分类,称之为数据类型。 
        * JS数据类型一起有7种,分为两大类
            a. 基本数据类型(5种)
            b. 复杂数据类型(2种)
    4.基本数据类型 :
        (1) 字符串类型(String) : 一切以单引号''  或  双引号""  引起来的内容
            * 作用:用于展示文本
        (2) 数值类型(Number) : 一切数学中的数字
            * 作用: 用于数学计算
        (3) 布尔类型(Boolean) : 只有两个值  true(真)   false(假)
            * 作用: 用于表示事物对立面 (条件成立 / 条件不成立)
        小技巧 : 谷歌控制台, 字符串会显示黑色 , 数字和布尔会显示蓝色
        (3) Undefined : 只有一个值undefined,在使用var 声明变量但未对其初始化时,这个变量就为undefined
        (3) Null :只有一个值null,从逻辑角度来看,null值表示一个空对象指针,
        而这也正是使用typeof操作符检测null值时会返回“Object”的原因
    5. 检测数据类型
        (1)语法
            a.  typeof 数据
            b.  typeof (数据)
        (2)结果 : 得到该数据所属类型的字符串
            typeof ('123')  ->  'string'
            typeof (123)    ->  'number'
            typeof (true)   ->  'boolean'
*/

1.1-数据类型介绍

  • 1.如果某行js代码报错,原因只有两个
    • 第一:语法错误
    • 第二:数据不识别
  • 2.在js中,只有符合数据类型的数据才能被识别
  • 3.数据类型:软件在运行时,会产生数据,数据有很多种,不同的数据CPU的处理方式不同 所以需要对数据进行分类,不同的数据对应不同的类型
  • 4.直接量(字面量):只要是符合数据类型的数据都叫做直接量
    • 顾名思义:让你从字面上理解这个数据

1.2-基本数据类型

String类型

  • String:字符串
    • 例如:"张三",'abc'
    • 范围:一切用双引号或者单引号包围起来的内容都是字符串
      • 作用:展示文本内容

Number类型

  • Number:数字
    • 例如: 10 0.1
    • 范围:数学中的一切数字,包含整数和小数
      • 作用:用于数学计算

boolean类型

  • boolean:布尔类型
    • 只有两个值:truefalse
      • 作用:表示现实世界中事物的两种对立面 真假、长短、开关、男女等
        • true表示真
        • false表示假

1.3- typeof关键字

  • 作用:检测一个数据所属的类型
  • 语法:typeof 数据 或者 typeof (数据)
    • 会得到改属性所属类型的字符串: string number boolean

==03-变量==

1.1-变量声明/赋值/取值

  • 1.变量(variable):内存中用来保存数据的一块空间
  • 2.变量作用:在内存中存储数据
  • 3.语法:
    • 1.声明变量:var 变量名
    • 2.赋值:变量名 = 值
    • 3.取值:直接写变量名即可

图解变量工作原理

1.2-变量补充说明

  • 本小节知识点
    • 1.变量的初始化
    • 2.变量的批量声明
    • 3.变量批量声明赋值
    • 4.变量的重复声明
    • 5.变量的重复赋值
    • 6.变量的值是另一个变量的值

图解变量补充说明

1.3-变量命名规则与规范

  • 规则:必须要遵守,否则会报错
    • 规则是由语法决定的,无法更改
      • 1.变量只能以下划线、字母、$开头,后面接任意的数字、下划线、字母、$
      • 2.不能以JS的关键字作为变量名
        • 尽量不要使用关键字和保留字作为变量名,也不需要死记硬背,孰能生巧
        • 关键字:JS内置的一些关键字,代表着特殊的语法含义,不允许程序员擅自声明
        • 保留字:有可能在将来会成为关键字,现在可以用,但是并不能保证以后一直可以用
  • 规范:程序员们在遵守规则时养成的一种习惯
    • 规范是程序员的一种编码习惯,主要目的就是为了提高代码的易读性
      • 1.起名要有意义,最好用名词作为变量名
      • 2.使用驼峰命名法:变量名第一个单词首字母小写,后面如果有其他单词则每一个单词的首字母大写

04-运算符与表达式

  • 1.运算符只是一种运算的符号,单独使用无意义,通常与需要计算的数据在一起组成表达式
  • 2.表达式一定有结果,要么直接打印要么存入变量中
  • 运算符只是一种运算的符号,由运算符参与的式子称之为表达式
  • 表达式一定会得到一个运算的结果:要么直接打印这个结果(直接量),要么用变量保存

复合算术运算符

复合算术运算符是算术运算符的一种简写形式

  • num += 5 只是 num = num + 5的简写形式,他们之间完全等价
  • +=: 在自身值的基础上再加多少
  • -=:在自身值的基础上减多少
  • *=: 在自身值的基础上乘多少
  • /=: 在自身值的基础上除多少
  • %=:在自身值的基础上模多少

Math高级数学计算

<script>
    /** 
     1. Math作用 : 高级数学计算
     2. 常用
        a. Math.ceil(数字) :向上取整 
        b. Math.floor(数字) :向下取整 
        c. Math.max(数字1,数字2,...) :求最大值
        d. Math.min(数字1,数字2,...) :求最小值
        e. Math.random() :返回 (0,1) 之间的小数
    */
    //1.圆周率
    var pi = Math.PI;
    console.log ( pi );//3.1415926.....
    //2.绝对值:一个数字与坐标原点的距离
    console.log ( Math.abs ( - 2 ) )//2
    //3.天花板函数:向上取整
    console.log ( Math.ceil ( 10 ) );//整数得到自身
    console.log ( Math.ceil ( 10.1 ) );//11,小数则向上取整
    console.log ( Math.ceil ( -10.1 ) );//-10
    //4.地板函数: 向下取整
    console.log ( Math.floor( 8 ) );//8 整数得到自身
    console.log ( Math.floor ( 7.9 ) );//7,小数则向下取整
    console.log ( Math.floor ( -7.9 ) );//-8
    //5.四舍五入取整
    console.log ( Math.round ( 4.5 ) )//5
    console.log ( Math.round ( 3.3 ) )//3
    console.log ( Math.round ( - 9.9 ) )//-10
    //6.求最大值。  数值数量不限使用逗号分割
    console.log ( Math.max ( 50, 99, 888, 123 ) )//888
    //7.求最小值。  数值数量不限使用逗号分割
    console.log ( Math.min ( 50, 99, 888, 123 ) )//50
    //8.生成一个随机数  范围 0 - 1 之间的小数
    console.log ( Math.random () );
    //如果想得到0-100之间的整数  可以乘以一百然后向下取整即可
    console.log ( Math.floor ( Math.random () * 100 ) );
    //求随机整数范围的公式
    Math.floor(Math.random() * (max - min + 1)) + min
    //9.幂运算 Math.pow(x,y)  返回x的y次幂
    console.log ( Math.pow ( 2, 8 ) );//256    2的八次方

</script>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript高级语法补充(函数参数传递、in delete关键字、比较运算符隐式转换)

    1.值类型 (5种):  栈中存储的是数据,赋值时拷贝的也是数据。修改拷贝后的数据对原数据没有影响。

    it小小帅
  • 前端day08-JS学习笔记

    不需要刻意的去记,因为开发中很少会遇到多个运算符参与的式子,万一遇到也可以通过()来提升优先级

    it小小帅
  • JAVASE中IO流笔记

    InputStreamReader和OutputStreamWriter是字符和字节的桥梁,字符转换流

    it小小帅
  • 四则运算核心算法(开源)

    前言                                                                              ...

    ^_^肥仔John
  • Pycon2016可视化爬虫技术分享

    机械视角
  • 常用信息收集方法

    开始之前我们了解一下什么是信息收集,信息收集是指通过各种方式获取所需要的信息。信息收集是信息得以利用的第一步,也是关键的一步。信息收集工作的好坏,直接关系到工作...

    网e渗透安全部
  • 首都机场启用人脸识别安检,通过效率提升66%

    上个月底,首都机场T2航站楼,启用了一条全新的智能安检系统,这个系统由自动传输、信息、人脸识别、自助验证等模块组成。

    量子位
  • 3个顶级开源JavaScript图表库【Programming(JavaScript)】

    图表对于数据的可视化和网站的吸引力非常重要。可视化演示使得分析大块数据和传达信息变得更加容易。 图表库使您能够以一种令人惊叹的、易于理解的和交互式的方式可视化数...

    Potato
  • jmeter读取csv文件

    互联网金融打杂
  • Form表单 问题多多(中)

    HTML5学堂 - 刘国利:在上一篇的博文当中,主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中,我主要就具体的样式实现进行一下讲解,并提一下表单相关的浏览器...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券