文章目录

  • JavaScript简介
  • ECMAScript
    • JavaScript的引入方式
    • javascript得输出方式：
    • 变量
    • 五种基本数据类型
    • 运算符
    • 数据类型转换
    • if语句
    • switch语句
    • while循环
    • do while循环
    • for循环
    • 双重for循环
    • 复杂数据类型
      • Array
        • 两种创建方式
        • 常用（7个方法3个补充）
        • 清空数组的方式：
      • 补充 字符串方法
      • Math用法
      • 函数
      • 伪数组argument
      • Object对象
      • Date
      • 补充 JSON

JavaScript简介

前端三部分功能定位：

HTML:页面的结构

CSS:描述样式

JavaScript：描述行为，用户响应。

JavaScript的组成：

ECMAScript :定义了js的语法标准。变量，函数等基础语法。
DOM :操作网页上元素。比如检测到用户点击某个区域时，往html文档里添加div标签，显示某些元素。
BOM:操作浏览器部分功能，刷新页面，后退页面等操作。

ECMAScript

JavaScript的引入方式

三种，一种直接在html里body之后写，一种 src 外接式引入，一种直接在行内写。

<!--建议在body之后书写脚本js代码等待所有dom元素标签加载完成后再去执行 --><!-- 1.内接式 直接在此写代码 --><script type="text/javascript">// ;分号 作为js代码一句话的结束符//两种注释方式// 注释内容/*注释内容*/</script>

<!-- 2.外接式-->
<head><meta charset="UTF-8"><title></title><!--外链式--><script type="text/javascript" src="./js/index.js"></script></head>
<!-- 3.行内式-->
<body><p class="" id="" onclick="c()">123</p>
</body><script type="text/javascript">function c(){alert(1)}
</script>

javascript得输出方式：

1.document.write('有一首歌叫123')document.write('<span class="span1">233</span>');window.document.write()2.console.log('我很好');console.error('错误');console.clear();windows.console.log()
3.alert(1);window.alert(1);
4.var a = prompt('输入姓名');console.log(a);

变量

变量名有命名规范：

  • 只能由英语字母、数字、下划线、美元符号$ 构成，
  • 且不能以数字开头，并且不能是JavaScript保留字。
  • 严格区分大小写
  • 推荐驼峰命名：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写
 <script type="text/javascript">// 在js中使用的var关键字来声明  js语言它是一个弱类型的语言。//变量的声明两种方式// 1.变量的声明和定义（赋值） 大部分前端工程师 都是使用的这种方式var a = 100;alert(a);// 2.先声明变量  未来定义var b;b = '200';console.log(a);console.log(b);//数值类型是蓝色，字符串是黑色，在控制台里查看var c;// 没有var会出错，Uncaught ReferenceError: c is not defined  c 没有定义//有var没赋值undifinedconsole.log(c);//控制台不报错但是显示：undefined  未定义</script>

五种基本数据类型

         1.number2.string3.boolean4.null5.undefined

     // 1.number 浮点数，整数，正负 大小都是number//  typeof 变量名 查看数据类型的变量名var a  = 100;console.log(typeof a); //控制台查看输出：numbervar b = 5/0;console.log(b); //Infinity 无限大console.log(typeof b);  //number类型// 2.string/*var a = 'alex'; // 单引号 和双引号 都可以表示字符串console.log(typeof a);//string类型var b = '';console.log(b); 输出空值不报错console.log(typeof b); 输出string

     特殊情况:+ 可能是连字符 也可以是数字的加号// 字符串 + 数值 相当于字符串的拼接 输出：我哎1console.log('我'+'哎'+1);// 数字和数字相加 是加号 表示运算console.log(1+2+3);区别：console.log(‘1+2+3’)// 小技巧  将数值类型转换成字符串类型var c = 10+'';console.log(typeof c) 输出：string;*/// 对字符串 +  是拼接  其他得运算可以 - * /var a1='1';var a2='2';console.log(a1+a2);  // 12 拼接 不是数值console.log(typeof(a1+a2)); // stringconsole.log(parseInt(a1)+parseInt(a2)); // 3console.log(a1*a2); // 2console.log(typeof (a1*a2)); //numbervar b1 = 'one';var b2 = 'two';console.log(b1*b2); // NaN == not a numberconsole.log(typeof (b1*b2)) // number// 3.booleanvar Show=True;console.log(Show); // 输出：booleanvar isShow  = 1>1;console.log(typeof isShow);// 4.null  空对象var d = null; //空对象 输出：objectconsole.log(typeof d);// 5.undefined 未定义的var  d1;console.log(d1); //结果是undefined，灰字体console.log(typeof d1); //undefined 数据类型 黑色字体

运算符

赋值运算符
算数运算符
复合运算符
比较运算符
逻辑运算符 &&（and） || (or)

     var a = 5;//  先将a的值赋值给b输出，然后再对a++ a此时是6var b = a++;// console.log(a); //6// console.log(b); //5var b = ++a;// 先a++ 将a输出 在将输出的值赋值给bconsole.log(a); //6console.log(b);//6

     var x = 5;var y = '5';// == 比较的是值的相同console.log(x==y); //输出 True// === 等同于  比较的是值和数据类型（内存地址）console.log(x===y);  //输出False

数据类型转换

<script type="text/javascript">/*// 1.将number类型转换成string类型//1>隐式转换(内部自动转换） 小技巧var n1 = 123;var n2  = '123';console.log(n1+n2);//2> 强制转换// String() toString()var  str1 = String(n1);console.log(typeof str1); stringvar num  = 2334;var numStr = num.toString();console.log(typeof numStr);*///2.将字符串类型转换成number类型var stringNum = '131313';var num = Number(stringNum);console.log(num); // 131313console.log(typeof num); //numbervar stringNum2 = '13.1313fjkafbh13233dkjf';var num2 = Number(stringNum2);console.log(num2);// NaN (Not a Number)console.log(typeof num2);//number// parseInt() parseFloat() 解析字符串，并且返回整数和浮点型console.log(parseInt(stringNum2));//13console.log(parseFloat(stringNum2));//13.1313</script>

// 在js中所有得数据类型 都会被转换为boolean类型// 0 NaN null undefined 为false 其他得为truevar b1 = '123';var b2 = -123;var b3 = Infinity; //无穷大var b4 = 0;var b5 = NaN;var b6; //undefinedvar b7 = null;console.log(':',Boolean(b1)) //trueconsole.log(Boolean(b2)) // trueconsole.log(Boolean(b3)) // trueconsole.log(Boolean(b4)) // falseconsole.log(Boolean(b5)) // falseconsole.log(Boolean(b6)) // falseconsole.log(Boolean(b7)) // false

if语句

if （条件）{条件为真执行此区域代码} else if（条件）{执行}else{不为真则执行}var age = 20;if(age > 18){console.log('可以考驾照');}console.log(22222); //代码照样执行

switch语句

一定注意要写break

var gameScore = 'good';/*if (gameScore  == 'better') {}else if(gameScore == 'good'){}else if(gameScore == 'best'){}else{}

 switch (gameScore) {case 'good':console.log('玩的很好');// switch语句 case表示一个条件，满足这个条件就会输出，直到遇到break跳出，// 如果break不写，那么程序一直运行，会遇到下一个break停止。这个就是‘case穿透’break;case 'better':console.log('玩的老牛逼');break;case 'best':console.log('恭喜你，吃鸡成功');break;default:console.log('很遗憾，被淘汰了');break;}

while循环

// 1. 初始化循环变量
// 2. 判断循环条件
// 3. 更新循环变量// 例子： 打印1~10之间的数// 初始化循环变量
var i = 1;
// 判断循环条件
while (i <= 10) {console.log(i);// 更新循环变量// i = i+1;i+=1;
}

do while循环

 // 用途 不大，就是不管条件如何 上来先做一次，  然后再去循环var i = 3;do{console.log(i);i+=1;}while(i < 10);

for循环

for循环遍历列表 是最常用的对数据的操作

1.初始化 2.循环条件 3.更新循环变量// 输出1~100之间的数for(var i = 1; i <= 100; i ++){console.log(i);}// 1.输出1~100之间所有数之和var sum = 0;for(var i = 1; i <= 100; i ++){sum = sum + i;}console.log(sum);//2. 将1~100所有是2的倍数在控制台打印for(var i = 1;i <= 100; i++){if (i % 2 == 0) {console.log(i);}}

双重for循环

     for(var i = 0; i < 3;i++){ //控制着你的行数for(var j = 1;j <=6;j++){ //控制的星星数document.write("*");}document.write('<br>');}for(var i=1; i<=6;i++){for(var j=0;j<i;j++){document.write('*');}document.write('<br>');}for(var i=1;i<=6;i++){for(var s=i;s<=6;s++){document.write('&nbsp');}for(var j=0;j<i;j++){document.write('*');}document.write('<br>')}

复杂数据类型

     Function  函数Object   Arrary  Date     时间模块

Array

两种创建方式

     // Array /*// 1.字面量方式  推荐大家使用这种方式 简单粗暴var colors = ['red','green','blue'];console.log(colors); //第一次打开输出Arry(3),再次刷新输出['red','green','blue'],//console.log(colors);相当于在console里直接输入window.colors回车。// 所有的变量 都挂载到了全局对象window，相当于console.log(window.colors);//console页面浏览器里相当于解释器。*/// 2.使用构造函数（js中创建对象）的方式来创建var colors = new Array();//创建了空数组console.log(colors);colors[0] = 'red';colors[1] = 'green';colors[2] = 'blue';console.log(colors);// for循环 遍历列表for(var i = 0; i < colors.length; i++){console.log(i,colors[i]);}

常用（7个方法3个补充）

    // 1.数组的合并 concatvar north = ['北京', '山东', '天津'];var south = ['东莞', '深圳', '上海'];var newCity = north.concat(south);console.log(newCity);//["北京", "山东", "天津", "东莞", "深圳", "上海"]// 2.join  将数组中的元素使用指定得字符串连接起来，它会返回一个新的字符串var score = [92, 342, 42, 52];var str = score.join('|');console.log(str);//92|342|42|52// 3.slice (start,end) 返回数组的一段记录，相当于切片，顾腚不顾尾var arr = ['张三', '李四', '王文', '赵六'];var newArr = arr.slice(1, 3);console.log(newArr); //["李四", "王文"]// 4.push  向数组最后添加一个元素arr.push('小马哥');console.log(arr); //["张三", "李四"，"王文"，"赵六"，"小马哥"]// 5.移除数组元素arr.pop();// 6.reverse 翻转数组var names = ['alex', 'xiaoma', 'tanhuang', 'angle'];//.反转数组names.reverse();console.log(names);// ["angle", "tanhuang", "xiaoma", "alex"]// 7 sort 对数组排序 按照26个字母排序var names2 = ['alex', 'xiaoma', 'tanhuang', 'abngel'];names2.sort();console.log(names2); // ["abngel", "alex", "tanhuang", "xiaoma"]// isArray() 判断是否为数组  返回为ture|falsevar a = 2;var iArray = Array.isArray(a);if (iArray) {console.log('是数组');}else{console.log('不是数组')}// 补充：// forEach（fn）==回调函数  匿名函数  通过forEach遍历数组的每一项内容  回调函数中的参数 第一个参数为item (每一项内容) 第二个参数 是数组的索引names2.forEach(function(item,index){console.log(item);console.log(index);});var sc = [98,97,66,100];//toString() 直接转换为字符串 每个元素使用逗号隔开var st = sc.toString();console.log(st);//98,97,66,100// 对“hello world”进行翻转处理 要求变为："dlorw olleh"// 先把字符串转化成数组，再借助数组的reverse方法翻转数组顺序，最后把数组转化成字符串。var words='hello world';var newwords = words.split("").reverse().join("");console.log(newwords);//dlrow olleh

清空数组的方式：

var array = [1,2,3,4,5,6];array.splice(0);      //方式1：删除数组中所有项目array.length = 0;     //方式2：length属性可以赋值，在其它语言中length是只读array = [];           //方式3：推荐

补充 字符串方法

    // 字符串创建// var str  = '';/*var str = newString();str[0]  = 'a';console.log(str);*/// 1.charAt() 返回指定索引位置的字符var str = 'alex';var charset = str.charAt(1);console.log(charset); //l// 2.concat() 返回字符串值，表示两个或者多个字符串拼接var str1 = 'al';var str2 = 'ex';console.log(str1.concat(str2, '|', str1, str2)); //alex|alex// 3.replace(a,b) 将字符串b替换成了字符串avar a = '1234567755';var newStr = a.replace("4567", "****");console.log(newStr); //123****755// 4.indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 var str = 'alex';console.log(str.indexOf('e')); //2console.log(str.indexOf('p')); //-1// 5.slice(start，end) 左闭右开 分割字符串 切分var str2 = '小马哥';console.log(str2.slice(1, 2)); //马var str4 = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';console.log(str4.substr(0, 4)); //我的天呢// 6.split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组var str3 = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';console.log(str3.split('a', 3)); //["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]//特殊：var num = 132.32572;//四舍五入var newNum = num.toFixed(3);console.log(newNum);//132.326// trim() 清除 字符串的前后空格var str10 = '                 alex                   ';console.log(str10.trim());

Math用法

     // 1.向上取整   Math.ceil()var x = 1.2334;var a = Math.ceil(x);console.log(a);//2// 2.向下取整  Math.floor()console.log(Math.floor(x));//1// 3.求两个数的最大值和最小值console.log(Math.max(2,5));console.log(Math.min(2,5));// 4.求随机数 Math.random()  在[0,1) 之间console.log(Math.random());// 200~ 500   求min~max之间的随机数  min + Math.random()*(max-min);console.log(200+Math.random()*(500-200));

函数

两种写法

 // 1.普通函数（常用）function add(x,y){return x + y;}alert(add(1,2));//可以在任意地方调用// 2.函数对象 将匿名函数赋值给addvar add = function(x,y){return x + y;};console.log(typeof add);//functionconsole.log(add(1,2));

伪数组argument

     // arguments  伪数组，获取实参，只在函数中使用，// 它有数组的索引 ,length 属性 但是它没有数组的方法add('xiaoming','xiaohong');//没有形参function  add() {console.log(arguments);// ["xiaoming", "xiaohong", callee: ƒ, Symbol(Symbol.iterator): ƒ]//遍历实参for(var i =0; i < arguments.length; i ++){console.log(arguments[i]);}}

Object对象

四种创建方式的演化

            // 1.使用Object或对象字面量创建对象，//最基本创建对象的方式，//常用，缺点是需要一个一个创建var person =  new Object();// 给对象赋值person.name = 'xiaoming';person.age = 20;person.func=function(){alert(this.name);};var person2 = {name:'xiaoming',age:26,fav:function(){// this 指的是当前的对象 跟python中的self类似console.log(this.name);}};console.log(person2);//{name: "xiaoming", age: 26, fav: ƒ}person2.fav();//xiaoming// 2.工厂模式创建对象,//将字面量对象创建过程封装起来以便于重复调用。//只不过创建的都是Object类型，无法区分人还是水果function createPerson(name, age) {var o = new Object();o.name = name;o.age = age;return o;}var person1 = createPerson('xiaoming', 20);// instanceof 检测类型console.log(person1 instanceof Object);//True function createFruit(name,color) {var o = new Object();o.color = color;o.name=name;return o;}var f = createFruit('苹果','red');console.log(f instanceof Object);//True //3、构造函数模式创建对象，可以区分类型
//对于任意函数，使用new操作符调用，那么它就是构造函数；
//不使用new操作符调用，那么它就是普通函数。
//约定构造函数名以大写字母开头，普通函数以小写字母开头function Student(name, age) {this.name = name;this.age = age;this.alertName = function(){alert(this.name)};
}function Fruit(name, color) {this.name = name;this.color = color;this.alertName = function(){alert(this.name)};
}//再分别创建Student和Fruit的对象：var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");//用instanceof操作符来检测以上对象类型alert(v1 instanceof Student);  //true
alert(v2 instanceof Student);  //falsealert(v1 instanceof Fruit);  //false
alert(v2 instanceof Fruit);  //truealert(v1 instanceof Object);  //true 任何对象均继承自Object
alert(v2 instanceof Object);  //true 4.原型的模式创建对象
//把构造函数的对象的方法提取出来添加到父类，常用。
function Student() {this.name = 'easy';this.age = 20;
}Student.prototype.alertName = function(){alert(this.name);//this 指的是Student
};var stu1 = new Student();
var stu2 = new Student();stu1.alertName();  //easy
stu2.alertName();  //easyalert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数

Date

     var myDate = new Date();console.log(myDate);//Wed Feb 13 2019 15:57:11 GMT+0800 (中国标准时间)// 获取本地时间  月份中第几天（1~31）console.log(myDate.getDate());// getMonth()  获取指定日期对象月份（0~11）console.log(myDate.getMonth()+1);//  返回四位数的年份console.log(myDate.getFullYear());// 0 代指的是星期天// getDay() 返回一星期中星期几   0~6console.log(myDate.getDay());//getMinutes() 分钟数 getSecond()秒数console.log(myDate.getMinutes());console.log(myDate.getSeconds());// 返回本地时间console.log(myDate.toLocaleString())//2019/2/13 下午3:57:11

补充 JSON

// 在数据传输过程中，JSON通常是以字符串的形式传递，
//但是js更喜欢操作JSON对象，所以Jjson对象和json字符串转换非常重要

JSON字符串:
var jsonStr ='{"name":"alex", "password":"123"}' ;
JSON对象：
var jsonObj = {"name":"alex", "password":"123"};JSON字符串转换JSON对象
var jsonObject= jQuery.parseJSON(jsonstr);JSON对象转化JSON字符串
var jsonstr =JSON.stringify(jsonObject );

// 3.遍历JSON对象和JSON数组// （1）遍历JSON对象var packJSON = {"name":"alex","pwd":123};// for  infor(var k in packJSON){// k指的是键值的索引console.log(k+' '+packJSON[k])}// (2) 遍历JSON数组var packJSON = [{"name":"alex","pwd":123},{"name":"wusir","pwd":123}];for(var i in packJSON){console.log(i+'  ' + packJSON[i].name + ' ' + packJSON[i].pwd );}

前端——javascript基础-ECMAScript相关推荐

  1. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  2. JavaScript基础(ECMAScript)

    Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...

  3. 前端---JavaScript基础4

    文章目录 前端---JavaScript基础3 call&apply 原型链 原型链操作 例子:按钮组件封装:(类似于Bootstrsp里的按钮组件封装) 前端-JavaScript基础3 c ...

  4. 前端---JavaScript基础3

    文章目录 前端---JavaScript基础3 普通对象与函数对象 原型及属性判断 构造函数继承 原型继承 组合继承 寄生组合式继承 前端-JavaScript基础3 普通对象与函数对象 原型及属性判 ...

  5. 前端---JavaScript基础2

    文章目录 前端---JavaScript基础2 对象类型判断 call函数 对象属性操作 深拷贝方法 前端-JavaScript基础2 重构以下代码:(以面向对象的方式) 重构后:(其中this指针问 ...

  6. 前端---JavaScript基础1

    文章目录 前端---JavaScript基础1 数据类型 面向对象 对象创建方式 对象类型判断 前端-JavaScript基础1 JS是 解释型语言:跨平台 慢 编译型语言:不能跨平台 快 数据类型 ...

  7. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  8. 前端JavaScript基础知识点

    JavaScript基础 阶段说明 JavaScript基础 Web API JavaScript高级 ##第一天重点内容 变量的声明及使用 数据类型 类型转换 运算符 JavaScript的组成 E ...

  9. 菜鸟学前端--javascript基础

    在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语 ...

最新文章

  1. C++_STL——stack
  2. android onitemclicklistener 参数,android – OnItemClickListener从模型中获取数据
  3. 拒绝暴力调参！推荐一个模型Debug神器！
  4. leetcode - 461. 汉明距离
  5. Vnc-server——linux远程桌面配置
  6. Linux编程训练网站,OK6410汇编程序练习
  7. 三维重建笔记_相机标定_求本质矩阵E
  8. android数码管字体,matplotlib绘图时显示额外的“figure”浮窗
  9. UG 6.0软件安装教程
  10. PMP专题练习-整合管理
  11. 【HighCharts系列教程】七、导出属性——exporting
  12. 操作系统概论02323-2110期
  13. netstat -ano 查看端口是否被占用
  14. 写给理工科人看的乐理（三）五线谱进阶与和声理论
  15. 苹果无需越狱了！通过苹果签名轻松安装IPA文件
  16. 分享：ThinkPad E40无线网卡驱动安装 FOR CENTOS6.3
  17. 虚拟主机能建立mysql数据库吗_虚拟主机如何创建数据库
  18. 85后湖南伢子专注五子棋推广 在传承中增强文化自信
  19. NOIP 2017 逛公园 记忆化搜索 最短路 好题
  20. HHVM安装（centos6.3下）

热门文章

  1. 2022年重庆导游资格考试精选复习题及答案
  2. 计算机毕设Python+Vue疫情医疗物资管理系统（程序+LW+部署）
  3. liquibase常见操作
  4. php 服务器计算机名称,php 服务器计算机名
  5. html单选计算总价,JavaScript由单价、数量计算总价
  6. 面了一个25岁的学妹，把synchronized关键字讲的那叫一个透彻
  7. Luogu P1110 [ZJOI2007]报表统计 multiset
  8. 力扣刷题-阶乘尾数有多少个0
  9. 解决调用torch_geometric报错No module named ‘torch_sparse‘等问题，以及torch_sparse torch_scatter等的安装问题
  10. Server使用过程中的常用命令记录