2019-05-22

1.JS书写的位置强调： 1.最常用 内嵌JS --- 学习期间用 外部JS --- 开发部署最多使用 ，使用时，为了 不让 js 文件 被 爬虫 抓取，会 写一堆比较复杂的 js 动态 加载 其他的外部js页面 行内JS 一般不会直接 写到 html中，而是 通过 webapi 来 动态创建！！ 2.小坑： script标间 一旦 使用了 src属性 来引用外部 js文件的话，标签中间的js代码 就不会被执行了！！！2 JS的注释 /* 注意： a.注释 一般用在 内嵌JS 和 外部JS中 b.用处：对代码业务做备注说明 -- 给其他开发者看 + 也给自己看！！ 面试用的着，代码如果有注释，会专业度更高！ */

  // 1. 单行注释

  alert('我是班长~~~');

  /* 2. 多行注释

  我是班长

  我还没吃早饭

  因为没有女朋友帮忙买

  */

3 js常用的输入与输出 //1. 【输出 函数】 -- 输出内容给 浏览器用户    ----------------------------------------

  //1.1 alert 消息弹出框  -- 主要是给 浏览器用户 看

  //    用法 alert('要输出的内容~~')

​

  //alert('521,死定了~~~~');

  //1.2 console.log 控制台输出 -- 主要是给 开发者 看

  //                内容会输出到 浏览器的 控制台 选项卡中~~~ （通过 f12 可以打开浏览器的控制台）

  console.log('中午回不了家，晚上得开会~~~~');

  //1.3 documnet.write 输出内容到body -- 主要用来 输出局部的 html 代码

  //    注意：使用频率非常低，基本上不用！！！！

​

  document.write('<h1>晚上回家估计被反锁~~~所以先去订间房~~~</h1>');

  //2. 输入 函数 -- 接收浏览器用户输入的内容  -------------------------------------------

  //2.1 prompt 内容输入框 -- 接收浏览器用户输入的内容

  //    prompt('提示用户要输入的内容~~~')

  //    会返回用户 输入的内容  -- 讲变量时 再介绍

​

  // prompt('请输入班长女朋友的电话号码：');

  //2.2 confirm 确认选择框 -- 接收 浏览器用户 确认/取消 按钮的选择

  //    confirm('提示用户的消息~~~')  

  //    会返回用户 选择的结果  -- 讲变量时 再介绍

​

  confirm('班长，你确认要把自己女朋友的电话号码给他吗？');

</script>

4 直接量和数据类型 //1.因为 使用 代码 来做的业务，大部分 都是 包含数据的，所以 需要 数据(直接量) 和 储存数据(变量等) 的 语法！！！

  //2.直接量（数据）-- 直接 可以被 js引擎（浏览器） 解析的数据 就是 直接量！！

  console.log(110);

  console.log(35);

  console.log(18.5);

​

  console.log('我爱你，老婆~~~');

  console.log('知道了~~~ 我也爱你哦~~~~');

  console.log("爸爸妈妈，我也爱你们~~~");

  console.log('i love u ~~~');

  console.log('110');

​

  console.log(true);

  console.log(false);

​

  // console.log(james);


  //3.数据类型：由于 JS中的 数据 有多种，所以 为他们分了类别，这些了别的统称：数据类型

  //3.1 数值类型 Number

  //        作用：用来 在 js中 表示  各种 数字 -> 整数(整型数值) ， 小数(浮点数) ，负数

  console.log(110);

  console.log(112);

  console.log(520);

​

  console.log(1.314); // 加了小数点 的小数

  console.log(-1); // 负数

​

  //a. 数值类型的 取值范围 -- 因为内存是有限的，数字是无限的，所以 在js中 已经规定好数字范围！

  //   最大值 和 最小值

  console.log('最大值为：');

  console.log(Number.MAX_VALUE); // 最大值：js能够显示的 最大值

​

  console.log('最小值为：');

  console.log(Number.MIN_VALUE); // 最小值：js能够显示的 最小值


  //  无穷大 和 无穷小 ---- 因为 数学 的范畴中 数字 是无限的，所以 JS中 使用 无穷大和无穷小来表示 这个两个概念

  console.log(Infinity); //Infinity 无穷大

  console.log(-Infinity); //-Infinity 无穷小

  //3.2 数值类型里 两个特殊的地方

  //a. Infinity 和 任何数值运算 结果都是 Infinity

  console.log(Infinity + 1);

​

  //b. JS中 由于 处理的机制问题，相除时，可能得到 的无穷循环小数 只会 显示 15-17 位

  console.log(10 / 3);

5字符串类型 //1. 在 js 中 如果要表达 一句话~~~ 就需要 使用 到字符串类型了！！！！      //  凡是 使用 ''  或者  "" 包裹起来的 ，都是 字符串类型 的数据

  console.log('我是邹老师，今天上课第一天，很开心班上有100多人！！！竟然还有 会 散打 的~~~竟然还戴眼镜~~~');

  console.log("我是班长，我有女朋友~~~~！");

​

  //2. 字符串嵌套使用

  // console.log('i love u ~~~"); // 报错：因为 js引擎 无法找到 结束字符串用的 '

  // console.log("i hate u ~~~~'); // 报错：因为 js引擎 无法找到 结束字符串用的 "

  // 注意：可以 在 '   ""  '

  console.log('我爱你，"小蛮腰" ~~~~'); // 没报错：因为 js 引擎 找到了 结束字符串用的 '，中间的 " " 被当做字符串的一部分

  console.log("我爱你，'小蛮腰' ~~~~"); // 没报错：因为 js 引擎 找到了 结束字符串用的 '，中间的 " " 被当做字符串的一部分


  // 思考：打印 一句话 内容为 ：   我是天真烂漫的小天使，是"裙姐"的好朋友

  console.log('我是天真烂漫的小天使，是"裙姐"的好朋友');


  // -----【强调：】开发时，一般使用【单引号】来表示字符串

​

  //3.字符串的转义符

  //  转义符：字符串中 有时候 需要 使用到一些特殊的效果，那么就需要 特殊的命令 来 告诉 js引擎，特殊的命令 就叫做 转义符

  //         【转义符的 核心 就是  \】 ，后面可以匹配一些指定的 字母 带代表 特殊命令！！！

  //  常见转义符：  

  //            换行 \r (相当于 Html 里的 p标签)  或者 \n（相当于 html里的 br标签）

  //            \'   代表 一个 单引号

  //            \"   代表 一个 双引号

  //            \t   制表符(tab键)

  //            \\   带包 一个 \

​

  // 思考：打印一句话： 我爱你

  //                  但是我不敢说

  //                  说了\怕你\打我

07布尔值类型 //1.在 JS 中 经常会遇到 要 表示 两种对立状态：对错，是否，好坏，男女........      //  【布尔值数据类型】：专门用来表示  两种 对立状态      //        只有两个值：true  和 false

  console.log(true);

  console.log(false);

​

  //2.扩展：

  //  true  本质上 就是 1

  //  false 本质上 就是 0

​

  // js 执行时，true 和 false  都会被转成 1 和 0 来 保存 及 运行

08typeof 检测数据类型

//1.typeof      //  用法：      //      a. tpyeof 直接量  -> 直接量的 数据类型名字      //      b. typeof(直接量)  -> 直接量的 数据类型名字

  //      c. typeof 返回的 类型名字 也是  字符串类型的数据

​

  console.log( typeof '内容是啥？要不要选择大宝剑'); // string

  console.log( typeof "班长，要不要来一个大宝剑？"); // string

  console.log( typeof "\t\n\\"); // string

  console.log( typeof ''); // string

  console.log( typeof '110'); // 加了引号，就是 字符串！！！ -> string

​

  console.log(typeof(110)); // number

  console.log(typeof 1.1); // number

  console.log(typeof -101); // number

​

  console.log(typeof true); // boolean

  console.log(typeof false); // boolean

09变量 //1.需求：要 在 内存中 开辟一个空间，保存 浏览器用户 输入的 数据      var bzGfNumber = prompt('请输入班长的女朋友的电话号码：'); // 将用户 输入的值 保存到 【变量空间】      console.log(bzGfNumber); // 打印【变量空间】里保存的值

  //2.什么是变量：本质上 就是 内存里的 一块空间 , 变量名 就是 这个空间的 代号~~~

  //             通俗的说 就是 一个容器（盒子），往里面 可以保存 一个苹果！！

​

  //2.1 变量的 声明---------------------------------------------

  //    语法 ： var 变量名;

  //            变量名 = 值; // 声明后，赋值

  //    a.声明变量，但没有赋值 之前，变量中的默认值为 undefined

  //

  var bzBFNumber; // 在内存中开辟一个空间 ，默认值为 undefined

  console.log(bzBFNumber); // undefined


  bzBFNumber = 1123310819;

  console.log(bzBFNumber); // 1123310819

​

  //2.2 变量的 声明赋值   ----------------------------------------

  //    语法： var 变量名 = 值；

  var bzrBFNumber = 18620909999;

  console.log(bzrBFNumber);


  //强调 ：一个变量 只能 存 1 个 数据

​

  //2.3 访问和设置 变量里的值 -------------------------------------

  // a. 访问变量：只需要 使用 变量名就可以了！！！

  var usrName = '小苍苍';

  console.log(usrName);

  // alert(usrName);

​

  // b. 修改变量空间里的值 -- 本质上 是 覆盖了 原来 变量空间里的值

  usrName = '小波波';

  console.log(usrName);


  //2.4 小坑：变量名 和 字符串容易弄混

  var a = 110;

  console.log('a'); // -> a

  console.log(a); // -> 110

10变量的拓展 //1.不使用 var 关键字，也能声明变量 ---- 强调：不推荐使用！！！！ --------------------------------        var a = 110;        a = 120; // 修改 已经存在的 变量的值！！！        console.log(a);       

   b = 250; // JS 引擎 检查之后 发现 页面上没有 叫做 b 的变量，所以 就 自动创建了一个 变量b!!!

   console.log(b);

   //1.1 注意：不使用 var 关键字 来声明变量时，变量声明和赋值 必须在一行！！！

   // c; //报错： c is not defined

   c = 11;

   console.log(c);

​

   //2.批量声明变量

   var a,b,c;

   a = 1;

   b = 2;

   c = 3;

   //3.批量声明变量并赋值

   var a = 1,b = 2, c = 3;

   //4.变量给变量赋值 -------------------------------------------------

   //  注意：变量之间赋值：本质上 是将 变量 a 的值 复制一份 给 了 变量 b

   var usrName = '小波波';

   var usrName2 = usrName;

11变量的命名规范//1.变量的 命名规则 --- 规则 相当于 法律，违反了 就会 要收到严惩！！    //a. 变量名 只能用 英文字母 数字  _  $  四种构成    var usrName234;    var _name;    var $xiaobai;    var __3234234aabc$$$111aaabb;

//b. 变量名 不能用 数字开头

// var 23aa; // 报错

​

//c. 不能是 js系统关键字 或 保留关键字 （凡是 在vscode中成 蓝色的字都是 关键字 -- var）

// var var = 1;

//2.变量的 命名规范  -- 规范，相当于 道德，违反了 不用坐牢，但是 边上的人可能 鄙视 指责你！！

//a. 命名要有意义

var usrName;

var abc; // 没有意义，不推荐

​

//b. 驼峰命名法 :当 变量名由多个 单词构成，首字母 小写，后面的 每个单词 首字母 大写！

var usrLoverName;

var usrDogAge;

//注意：

//    js中的 变量名 区分大小写

var a = 1;

var A = 2;

12交换两个变量的值//1. 将 两个 变量 中保存的 值 交换位置      var a = '苹果';      var b = '梨子';      console.log(a,b);

  // a = b;

  // b = a;

​

  //1.1 将 a 的值 保存到 临时变量中

  var temp = a;   // temp = 苹果  a = 苹果  b = 梨子


  //1.2 将 b 的值 保存到 a 中

  a = b;          // temp = 苹果  a = 梨子  b = 梨子

​

  //1.3 将 临时变量 的值 保存到 b 中

  b = temp;       // temp = 苹果  a = 梨子  b = 苹果

​

  console.log(a,b);

13算数运算符//加减乘除      //1. 加法      console.log( 1 + 1);

  var res = 1 + 1;

  console.log(res);

​

  //2. 减法 除法 /  乘法 *

​

  //3. 取余(取模)  % -> 用来 获取两个数  除不尽的值

  var res = 10 % 3; // 3 -> 1

  console.log('10 / 3 的 余数为：' + res);


  //4.神奇的+号

  //4.1 在两边 都是 数值类型 的情况下，进行 求和 运算，返回 两个数的和

  var res = 1 + 1;

  //4.2 当两边 有任意一边 为 字符串时，会先将 另一边 自动转成字符串，然后 将 两个 字符串 拼接字一起 返回一个 新的字符串

  var str = '我爱' + '你~~';

  console.log(str);

​

  //补充：如果变量 的值 为 字符串，那么 也会起到 拼接字符串的 作用

  var qunJie = '裙姐黑';

  var kunGe = '坤哥jian~~';

  var str = qunJie + kunGe +',天下无敌~~~';

  console.log(str);

14会魔法的Math//1. Math中的 PI ，保存了 一个 圆周率 的数值      console.log(Math.PI); // 3.141592653589793

  //2. 求绝对值

  console.log(Math.abs(-10));

​

  //3. 天花板函数 ceil  -- 整数位 + 1，小数位 去掉

  //                   注意：只针对 有小数的 数值，如果是整数，返回原来的值

​

  console.log(Math.ceil(1.111));// 2

  console.log(Math.ceil(2.01));// 3

  console.log(Math.ceil(100.0000001));// 101

​

  console.log(Math.ceil(100));// 100

​

  //4. 地板函数 floor --- 整数位 不变，小数位 去掉

  console.log(Math.floor(1.111));// 1

  console.log(Math.floor(2.01));// 2

  console.log(Math.floor(100.0000001));// 100


  //5. 四舍五入函数 round --- 小数位 >= 0.5 ,小数位去掉，整数位 +1

  //                                < 0.5 ，小数位去掉，整数位 不变

  console.log(Math.round(1.111));// 1

  console.log(Math.round(2.01));// 2

  console.log(Math.round(100.5));// 101

​

  //6.求最大值

  var num1 = 99;

  var maxNum = Math.max(2,4,78,1,0,num1,5,9,7);

  console.log('maxNum=' + maxNum);


  //7.求最小值

  var num1 = 99;

  var minNum = Math.min(2,4,78,1,0,num1,5,9,7);

  console.log('minNum=' + minNum);

15使用js生成随机数 //1.计算机中 几乎所有的 随机生成的数 都是 伪随机数！ ---  有规律可循！！

  //2.使用 JS 生成 随机数 很简单， Math.random() 会 返回一个 0 - 1 之间的 随机小数

  //  取值范围： 大于等于0 ，小于 1  --> [0,1)

  var ranNum = Math.random();

  console.log(ranNum);

​

  //3.生成 0 - 100 之间的随机数(包含小数点)

  var ranNum = Math.random() * 100;

  console.log(ranNum);

​

  //4.生成 0 - 100 之间的 随机整数！！！

  var ranNum = Math.random() * 100;

  ranNum = Math.floor(ranNum); // 将 生成的 随机数 传入 floor方法，返回去掉 小数点的 整数 ，从新 赋值给 ranNum 变量

  console.log(ranNum);

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

推荐阅读更多精彩内容

  • 2018-11-05
    01javascript语法规范 <!DOCTYPE html> javascript语法...
    ouyangqinbin阅读 1,305评论 0赞 0
  • js总结（！！！）
    简述JavaScript起源起源于美国的Netscape公司，原名为LiveScript，后改为JavaScrip...
    3ab670b99521阅读 2,996评论 0赞 0
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,171评论 0赞 3
  • JS1
    第一章 前端三大语言：HTML（专门编写网页内容）、CSS（编写网页样式）、JS（专门编写网页交互行为） 能简写尽...
    fastwe阅读 949评论 0赞 0
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,466评论 1赞 45