js基础知识

JavaScript介绍

JavaScript是一种运行在客户端 的脚本语言 JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系，只是名字很像。

JavaScript和html、css之间的关系

HTML：提供网页的结构，提供网页中的内容 （结构）

CSS: 用来美化网页 （样式）

JavaScript: 可以用来控制网页内容，给网页增加动态的效果 （行为）

JavaScript组成

image.png

ECMAScript：欧洲计算机制造联合会，是js的核心组成部分

DOM：Document Object Model 文本对象模型，是一套操作页面元素的API

BOM：Bowser Object Model 浏览器对象模型，是一套操作浏览器的API

变量

什么是变量

变量是用来存储数据的

变量的使用

  • 变量的声明

    var name

  • 变量的赋值

    var name = 'zs'

  • 同时声明多个变量

    var age, name, sex;
age = 10;
name = 'zs';

  • 同时声明多个变量并赋值

    var age = 10, name = 'zs';

变量的命名规则

  • 1.规则 - 必须遵守的，不遵守会报错

    • 由字母、数字、下划线、$符号组成，不能以数字开头
    • 不能是关键字和保留字，例如：for、while。
    • 区分大小写

  • 2.规范 - 建议遵守的，不遵守不会报错

    • 变量名必须有意义
    • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

  • 3.下面哪些变量名不合法

    a     
1
age18
18age
name
$name
_sex
&sex
theworld  theWorld

    交换量变量的值

    1. 交换两个变量的值
    var n1 = 5;
var n2 = 6;
// 1.1 临时变量
var tmp;
tmp = n1;
n1 = n2;
n2 = tmp;
console.log(n1, n2);
    1. 不使用临时变量，交换两个数值变量的值
    var n1 = 5;
var n2 = 6;
n1 = n1 + n2;   // 5 + 6 = 11
n2 = n1 - n2;   // 11 - 6 = 5;
n1 = n1 - n2;   // 11 - 5 = 6;
console.log(n1, n2);

数据类型

数值型 Number

  1. 数值字面量：数值的固定值的表示法 110 1024 60.5

  2. 进制

    十进制
 var num = 9;
 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
十六进制
 var num = 0xA;
 数字序列范围：0~9以及A~F
八进制
    var num1 = 07;   // 对应十进制的7
    var num2 = 019;  // 对应十进制的19
    var num3 = 08;   // 对应十进制的8
    数字序列范围：0~7
    如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

  3. 浮点数浮点数的精度问题

 浮点数
   var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
    var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
    console.log(0.07 * 100);
    不要判断两个浮点数是否相等
  1. 数值范围
 最小值：Number.MIN_VALUE，这个值为： 5e-324
 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
 无穷大：Infinity
 无穷小：-Infinity
  1. 数值判断
  • NaN：not a number
    • NaN 与任何值都不相等，包括他本身
  • isNaN: is not a number

字符串类型 String

  1. 字符串字面量

    用 ''包裹起来的都是字符串

  2. 转义符

image.png

  1. 字符串长度

    length属性用来获取字符串的长度

    var name = '嗨喽，我是隔壁老樊';
console.log(name.lenth);

  2. 字符串拼接

    如果想要拼接两个字符串，可以直接用 + 吧两个字符串拼接在一起

    var a = 'hello';
var b = 'word';
console.log(a + b);

  3. 备注说明

    1. 两边只要有一个是字符串，那么+就是字符串拼接功能
    2. 两边如果都是数字，那么+就是算术功能。

Boolean类型Undefined和Null

  1. Boolean字面量： true和false，区分大小写
  2. 计算机内部存储：true为1，false为0
  3. undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
  4. null表示一个空，变量的值如果想为null，必须手动设置

获取变量的类型

  • typeof 检测数据类型

    var age = 18;
console.log(typeof age); // number

数据类型的转换

字符串的转换

  • toString()

    var num = 5;
console.log(num.toString()); // '5'

  • String()

    String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

  • 拼接字符串方式

    num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

    var num = 18;
var isRight = true;
console.log(typeof(num + ''));
console.log(typeof(isRight + ''));

数值类型转换

  • Number()

    Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

  • parseInt()

    var num1 = parseInt('12.3abc');  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt('abc123');   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
var num3 = parseInt('100px');    // 100

  • parseFloat()

    parseFloat()把字符串转换成浮点数 parseFloat()和parseInt非常相似，不同之处在与parseFloat会解析第一个. 遇到第二个.或者非数字结束。如果解析的内容里只有整数，解析成整数

布尔类型转换

  • Boolean()

    0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true

操作符

算术运算符+ - * / %

var x = 5;
    var y = 10;

    console.log(x + y); // 15
    console.log(x * y); // 50
    console.log(x / y); // 0.5
    console.log(x % y); // 5
    // 0不能除数
    console.log(x / 0); // Infinity 
    console.log(x % 0); // NaN

一元运算符

一元运算符：只有一个操作数的运算符

5 + 6 两个操作数的运算符 二元运算符

++ 自身加1

-- 自身减1

  • 前置++

    var num1 = 5;
++num1; // num1 = num1 + 1  先加1在赋值给num1: 6

var num2 = 6;
console.log(num1 + ++num2);

  • 后置++

    var num1 = 5;
num1++; //   1.num1 = num1 = 5   2.num1 = num1 + 1
var num2 = 6 
console.log(num1 + num2++);

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false || 或 两个操作数有一个为true，结果为true，否则为false ! 非 取反

关系运算符(比较运算符)

< > >= <= == != === !==

 // ==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

  var result = '55' == 55;    // true
  var result = '55' === 55;   // false 值相等，类型不相等
  var result = 55 === 55;   // true

表达式和语句

  1. 表达式

    一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

  2. 语句

    语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句

流程控制

  • 程序的三种基本结构

    1. 顺序结构

      从上到下执行的代码就是顺序结构

      程序默认就是由上到下顺序执行的

    2. 分支结构

      根据不同的情况，执行对应代码

    3. 循环结构

      循环结构：重复做一件事情

分支结构

  1. if条件判断

       if (/* 条件表达式 */) {
     // 执行语句
   }

   if (/* 条件表达式 */){
     // 成立执行语句
   } else {
     // 否则执行语句
   }

   if (/* 条件1 */){
     // 成立执行语句
   } else if (/* 条件2 */){
     // 成立执行语句
   } else if (/* 条件3 */){
     // 成立执行语句
   } else {
     // 最后默认执行语句
   }

   // 分数转换，把百分制转换成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A
   var score = 59;
   if (score >= 90) {
     console.log('A');
   } else if (score >= 80) {
     console.log('B');
   } else if (score >= 70) {
     console.log('C');
   } else if (score >= 60) {
     console.log('D');
   } else {
     console.log('E');
   }

三元运算符

  1. 表达式1 ? 表达式2 : 表达式3。如果表达式1条件成立执行表达式2否则执行表达式3。是对if……else语句的一种简化写法

       // 判断一个年龄是否成年, 当年龄超过18 返回  成年  否则返回未成年
   var age = 19;
   // console.log( age >= 18 ? '成年' : '未成年' );

   var msg = age >= 18 ? '成年' : '未成年';
   console.log(msg);

switch

  1. 语法格式

     switch (expression) {
   case 常量1:
     语句;
     break;
   case 常量2:
     语句;
     break;
   case 常量3:
     语句;
     break;
   …
   case 常量n:
     语句;
     break;
   default:  // 默认语句 即 上面的条件都不成立的时候执行默认语句
     语句;
     break;
 }

  2. 注意

    1. break可以省略，如果省略，代码会继续执行下一个case
    2. switch 语句在比较值时使用的是全等(===)操作符, 因此不会发生类型转换（例如，字符串'10' 不等于数值 10）

  3. 对比if/elseif条件可以是范围也可以是具体值，但是switch是具体值判断,不能范围判断

while循环

  1. 在javascript中，循环语句有三种，while、do..while、for循环。

  2. 基本语法：

     // 当循环条件为true时，执行循环体，
 // 当循环条件为false时，结束循环。
 while (循环条件) {
   //循环体
 }

  3. 注意：：避免死循环，要有判断条件跳出循环

         // 计算1-100之间所有数的和
     var i = 1;
     var sum = 0;
     while (i <= 100) {
       sum = sum + i;
       i++;
     }
     console.log(sum);
     // 1 :  i=1;  sum = 0 + 1 = 1;
     // 2 :  i=2;  sum = 1 + 2 = 3;
     // 3 :  i=3;  sum = 3 + 3 = 6;

dowhile

  1. do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。

  2. 基础语法与练习

       // 1. 语法
   do {
     // 循环体;
   } while (循环条件);

   // 2. 案例
   // 2.1初始化变量
   var i = 1;
   var sum = 0;
   do {
     sum += i;//循环体
     i++;//自增
   } while (i <= 100);//循环条件

for循环

  1. 语法格式

    // for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
 // 循环体4
}
// 方式1 常用
for (var i = 1; i <= 100; i++) {
 console.log(i);
}
// 方式2
var i = 1;
for (; i <= 100; ) {
 console.log(i);
 i++;
}

  2. 执行顺序

    1. 初始化表达式
    2. 判断表达式
    3. 自增表达式
    4. 循环体

break和continue 退出循环

  • break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
    // 求整数50～200的第一个能被7整除的数
    for (var i = 50; i <= 200; i++) {
      if (i % 7 === 0) {
        console.log(i);
        break;
      }
    }
    console.log('over');
  • continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
   var sum = 0;
    for (var i = 1; i <= 100; i++) {
      if (i % 10 === 3) {
        // 如果找到个位为3的数字 ，继续执行下一次循环
        continue;
      } 
      sum += i;
    }
    console.log(sum);
  • return:语句就是用于指定函数返回的值。return语句只能出现在函数体内,不能出现在循环中
     function fn() {
       console.log(111);
        return ;
        console.log(222);
     }

更多文章访问个人博客：http://www.lfanliu.top

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,194评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,058评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,780评论 0赞 346
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,388评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,430评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,764评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,907评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,679评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,122评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,270评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,867评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2赞 348

推荐阅读更多精彩内容