前端学习总结HTML5+CSS3+JavaScript）

Posted 小土豆要越来越厉害哦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习总结HTML5+CSS3+JavaScript）相关的知识，希望对你有一定的参考价值。

嗨！我又来了！今天是javascript的到来哈！我总结的这些都很浅显，基本都可以查得到，w3c网站大家可以去玩玩。最近在学算法结构，和JS结合真是美妙极了，我甚至觉得JS比python都简单。哈哈哈哈哈哈哈哈哈哈或或或或或这是什么狂徒。


众所周知，要想页面具有交互功能，JS必须是大头，把静态页面做成动态交互页面。html只用来观看。


  • JavaScript在HTML的引用共有4种：

  • （1）页头引入（head标签内）；

  • （2）页中引入（body标签内）；

  • （3）元素事件中引入（标签属性中引入）；

  • （4）引入外部JS文件；


  • 引入外部JS文件，说白了就是把JavaScript程序存放在一个后缀名为.js的文件中，然后使用script标签来引用。其他几种方式就是在head 和body中增加script标签，在里面填程序。

  • 变量名声明赋值！必须声明，必须赋值！只声明不赋值，未定义！

  • 基本数据类型：number；string；boolean

  • 特殊数据类型：null；undefined；转义

  • 数据类型和其他语言差不多，略过

  • \n 换行 \'单引号 \" 双引号

  • 数据类型转换：转字符串：1.加号拼接；2.tostring；3.string

  • 转换数字：parseInt；（得到整数）parseFloat（得到浮点数；）没有加号运算也可以转（力扣题两数之和我就用这个解的）

  • i++和++i区别：

i=1;j=i++;j的值为1，i的值为2i++，使用i后，i的值加1
i=1;j=++i;j的值为2，i的值为2使用i时，先让i的值加一

  • 算术运算符/比较运算/赋值运算/逻辑/条件

  • typeof用来检测是什么数据类型

  • 三元表达式：条件表达式？表达式1：表达式2

  • 输入：prompt；弹出：alert；打印输出：console.log

  • 数字+字符串”返回值一定是字符串，因为JavaScript会自动将数值型数据转换成字符串型数据。算术运算符的两边必须都是数值，若在“+”运算中存在字符或字符串，则该表达式将是字符串表达式。

  • 流程控制


  • 选择：if/if else/if elseif/if 嵌套

  • switch

  • 循环：while/do while/for

  • do while 结尾有分号；do…while语句将先执行一遍循环体中的语句，然后才判断条件表达式的真假。这是它与while语句的本质区别

  • 跳转：break/continue：break是彻底结束循环，而continue是结束本次循环

eg：一行打印5个星星、打印n行n列星星、九九乘法表


函数



  • 函数，就是一个一系列JavaScript语句的集合，这是为了完成某一个会重复使用的特定功能。在需要该功能的时候，直接调用函数即可，而不必每次都编写一大堆重复的代码。

  • 不指定函数名的函数：（定义方式）

 //定义函数 var myFunction=function(){ document.write("这是一个没有函数名的函数！"); } //调用函数 myFunction();

  • 指定函数名的函数（定义函数）

 //定义函数 function addNum(a,b){ var m=a+b; return m; } //调用函数 var sum=addNum(1,2); document.write("相加的结果是："+sum);

  • 调用函数：（1）简单调用；（没有返回值，如第一个程序）（2）在表达式中调用；（适用于有返回值的函数，然后函数的返回值参与表达式的计算，和输出语句搭配使用）（3）在事件响应中调用（4）通过链接调用；

  • 函数是一种方法

  • arguments是内置好了的，存储了所有传递过来的实参，具有数组特性与属性。在函数里可以遍历

  • eg：函数封装里的冒泡；最大值等写法

  • 在函数中的形参，实参顺便引出全局作用域和局部作用域。局部作用域在函数内部局部使用；，不占内存，用完就销毁


JS的预解析：把var和function提升到当前作用域之前。变量解析是把所有变量声明提升到最前，但不赋值。函数提升，就是把函数声明提到最前，但是不调用函数；


对象

  • 对象可以保存完整的信息；{}

  • 键属性值，调用对象属性，对象名.属性

  • 遍历对象：for 变量 in 对象 。log（变量）输出的是属性名；log（obj[变量]）输出的是属性值

  • javascript内置对象：字符串；日期；数组；数值


  • 字符串

  • str.length（属性）

  • str.match检索字符串是否存在（方法）

  • str.indexOf 返回字符串的值在字符串首先出现的位置（不存在是-1）（方法）

  • str.replace 用一些字符代替另一些字符（方法）

  • charAt 截取特定下标的字符（方法）

  • toLowercase/toUppercase

  • concat连接

  • str.split(" ")表示字符串以空格作为分割符

  • substr（开始，结束）截取字符串


  • 日期

  • 创建date对象：必须用new

  • 日期方法主要分为get/set/to

  • var 日期对象名 = new Date();这句话直接返回系统当前日期

JavaScript获取当前年、月、日
方法 说明
getFullYear() 返回一个表示年份的4位数字
getMonth() 返回值是0（一月）到11（十二月）之间的一个整数
getDate() 返回值是1~31之间的一个整数

  • getMonth 返回值是0-11.所以求当前月份必须加1

  • set是设置日期，与get获取不同之处在于，getFullYear()只能获取当前年份，但是setFullYear()却可以同时设置年、月、日；getMonth只能获取当前月份，但是setMonth()却可以同时设置月、日。

JavaScript获取当前时分秒
方法 说明
getHours() 返回值是0~23之间的一个整数，来表示小时数
getMinutes() 返回值是0~59之间的一个整数，来表示分钟数
getSeconds() 返回值是0~59之间的一个整数，来表示秒数

  • set时分秒和之前的对比记忆

  • 今天星期几？

数组