自学前端总结-- JavaScript篇--1

比奇堡第一派总
100 阅读6分钟

  1. 学习一门编程类语言的基本步骤

    1. 了解背景知识：历史、现状、特点、应用场景
    2. 搭建开发环境变量，编写hello world
    3. 变量跟常量
    4. 数据类型
    5. 运算符
    6. 逻辑结构
    7. 通用的小程序
    8. 函数和对象
    9. 第三方的库和框架
    10. 个人的项目

  2. 程序员必做的50道题

  3. 《JavaScript高级程序设计》

  4. JS概述

    1. JavaScript的发展史

    2. JS的现状

      1. 既可以运行在客户端的浏览器中，也可以运行在服务器端

    3. 语言的特点

      1. 代码可以使用任何文本编辑工具编写，语法类似于C和java
      2. 脚本文件无需编译，有JavaScript引擎解释执行（环境太多，不适用编译器）
      3. 弱类型语言
      4. 基于对象
      5. 跨平台性（支持各种操作系统）
      6. 解释型语言，编译一行执行一行

    4. 应用场景

      1. 开发浏览器端的交互效果，服务器端开发，例如操作数据库，调用其他服务器

  5. 搭建开发环境

    1. 浏览器端

      1. 自带JS解释器

    2. 服务器端

      1. 安装node.js：运行在服务器端的JS开发环境
      2. cmd命令行输入node -v查看版本号

    3. 运行JS

      1. 浏览器端创建01.js和01.html两个文件，将js嵌入到html
      2. node.js端，在命令行输入node 拖拽文件 回车
      <script src='01.js'></script>

  6. JS的语法规范

    1. 区分大小写
    2. 每行结束的分号可以省略
    3. 单行注释 //
    4. 多行注释 /* */

  7. 变量

    1. 用于存储数据的容器

      1. 声明变量
      2. var 关键字

    2. 命名规则

      1. 数字不能在前，关键字不能使用
      2. 变量可以为汉字，但可以解析为乱码，不建议
      3. 语义：最好用英文单词起名字，能看出来，如：user_name

    3. 变量赋值

      1. 变量声明后，如果未赋值则值为underfined，变量可以多次赋值，并且赋值不同类型的值，这是弱类语言的特点
      2. 常量

    4. const a=1;

    5. 常量在声明后必须赋值，不允许重新赋值。

  8. 数据类型

    1. 分为两大类：

      1. 原始类型

        1. 数值型：

          1. 整型
          2. 浮点型

        2. 字符串型

          1. 被引号包含的数据就是字符串型，不区分单双引号
          2. 检测数据类型 console.log(typeof str1,typeof str2);
          3. 查看任意一个字符的unicode码 console.log('a'.charCodeAt() );

        3. 布尔型

          1. 只有两个值，分别为true和false

        4. 未定义型

          1. underfined ，只有一个值null
          2. 声明了变量未赋值

        5. 空

          1. 手动的赋值为空
          2. var b=null;
          3. 类型object，常和对象一起使用

      2. 引用类型

  9. 数据类型转换

    1. 隐式转换

      1. 在运算过程中自动产生的转换
      2. 数值+字符串 数值会自动转换成字符串
      3. 数值+布尔型 布尔型会转换成数值
      4. 布尔型+字符串 布尔型会转换成字符串型
      5. NaN：not a number
      6. 所有隐式转换为数值自动调用函数Number

    2. 强制转换

      1. 强制转换成数值型

        1. number()
        var n1=Number('3');//3
var n2=Number(true);//1
var n3=Number(null);//0
var n4=Number(undefined);//NaN
var n5=Number('a');//NaN

      2. 强制转换为整型

        1. parseInt()
        2. 通常用于讲小数和字符串转为整型，其他数据转换结果为NaN。
        var p1=parseInt(3.14);//3
var p2=parseInt('a3');//NaN
var p3=parseInt('2313.2131asdadw');//2313

      3. 强制转换为浮点型

        1. parseFloat()
        2. 用于将字符串转换成浮点型
        var m1=parseFloat('3.14');//3.14
var m2=parseFloat('6.18a');//6.18
var m3=parseFloat('a6.18');//NaN

      4. 强制将数值和bool型转字符串型

        1. toString()

          var num=1;
num.toString();

  10. 运算符

    1. 表达式：由数据本身或者由运算符连接的操作数据组成的形式

    2. 运算符分为算术运算符、比较运算符、逻辑运算符、位运算符、赋值运算符、三木运算符

    3. 算术运算符

            • / % ++ - -

  11. 运算符

    1. 比较运算符

      1. < > < = > = == ! = ===(全等于) ！ ==（不全等于）
      2. ===(全等于) 不仅比较值，还比较类型，像个都相同才是true
      3. ！ ==（不全等于）
      4. NaN和任何值比较（< > < = > = == ===）结果都是false

    2. 逻辑运算符

      1. && || ！（取反）
      2. 短路逻辑：如果第一条件执行了，不在执行第二个条件，就是短路

    3. 位运算符

      1. 模拟计算机底层的运算，先把数据转为2进制然后进行计算，运算完以后再把结果转成10进制
      2. & 按位与 上下比较，两者都是1结果为1，否则为0
      3. | 按位或 上下比较，两者有1结果为1，否则为0
      4. ^ 按位异或 上下比较，两者不同结果为1，否则为0
      5. <<按位左移 删除二进制最后一位位数
      6. >>按位右移 二进制末尾补0

    4. 赋值运算符

      1. = += -= *= /= %=

    5. 三目运算符

      1. 一目运算符：由一个运算符连接一个操作数据或者表达式 ++ - - ！
      2. 二目运算符：由一个运算符连接两个操作数据或者表达式
      3. 三目运算符：由两个运算符连接三个操作数据或者表达式

  12. 浏览器端的函数

    1. alert() 弹出警示框
    2. prompt() 弹出提示框（输入）

  13. 程序=数据+算法

    1. 程序的执行方式

      1. 顺序执行
      2. 选择执行
      3. 循环执行

  14. 流程控制

    1. if语句

      if(条件表达式){
	语句块
};

    2. 以下数据作为条件转为false：0、NaN、' '、undefined、null

      var qm;
if(!qm)
{
	console.log('这个家伙很懒，什么都没有留下');
}
console.log(qm);

    3. if...else()语句

      var sex=1;//boolean类型
if(sex){
	console.log('男');
}
else{
	console.log('女');
}
//结构简单的可以使用三目运算符
console.log(sex?'男':'女');//sex=1

  15. if..else()嵌套

    1. 属于多项判断语句

      if(){
}
else if(){
}
else{
}

  16. switch-case()语句

    1. 属于特殊的多项分支语句，只能进行全等于的比较

      switch(表达式){
	case 值1:
		语句块1;
		break;
	case 值2:
		语句块2;
		break;
	case 值n:
		语句块n;
		break;
..............
	default:
		语句块n+1;//以上比较都是false
}

  17. 循环：一遍右一遍执行相同或者相似的代码

    1. 循环的两个要素

      1. 循环条件：控制循环是否往后执行
      2. 循环体：要重复执行的代码

  18. while循环

    1. while()语句

      while(循环条件){
	循环体;
}

    2. break

      1. 在循环体中使用，用于强制结束循环，不再执行任何循环中的代码

  19. do-while()循环

    do{
	循环体;
}while(循环条件);

  20. for()循环 1.

    for( 表达式1;表达式2;表达式3 ){
	语句块;
}

  21. continue和break

    1. continue：跳过循环，不在执行剩余的代码，还会继续执行增量
    2. break：结束循环

练习：打印2000到2100年前十个闰年

for(var i=2000,n=0;i<=2100 ;i++ ){
	if(i%4===0&&i%100!==0||i%400===0){
		console.log(i);
		n++;
	}
	if(n===10){
		break;
	}
}

练习：使用循环打印12345（******）成一行

for(var i=1,str='';i<=5;i++ ){
	str=str+i;
}
console.log(str);

练习：声明变量保存一个数字，查看是否是素数，如果是，打印‘素数’，否则打印非素数

素数（质数）：在1以上的整数中，除了1和自身以外，不能被其他的数字整除

var num=169;
var a=0;
for(i=2;i<num;i++){
	if(num%i===0){
		a++;
	}
}
if(a===0){
	console.log('是素数');
}
else{
	console.log('不是素数');
}
avatar
文章
阅读
粉丝