发表于: 2018-09-30 23:16:03
2 911
今天完成的事情:
入坑js,学习一些js 的基本知识
Js学习笔记
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
导入 <script></script>
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:
将 JavaScript放入body中,JavaScript 语句会在页面加载时执行。
我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
导入js方式:
1 内联方式:标签内部写入
2 内部方式:html页面中head或者body中集中写入
3 外部方式:通过<script src=“”></script>引入
4 学到了再补充
原生js就是javascript。
JavaScript 代码
JavaScript 代码(或者只有 JavaScript)是 JavaScript 语句的序列。
浏览器会按照编写顺序来执行每条语句。
JavaScript 代码块
JavaScript 语句通过代码块的形式进行组合。
块由左花括号开始,由右花括号结束。
块的作用是使语句序列一起执行。
JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
空格
JavaScript 会忽略多余的空格。
对代码行进行折行
可以在文本字符串中使用反斜杠对代码行进行正确的换行。
JavaScript 变量
提示:可以把变量看做存储数据的容器。
提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。
与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
·变量必须以字母开头
·变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
·变量名称对大小写敏感(y 和 Y 是不同的变量)
声明变量:
var carname;
也可以在声明时赋值:
Var carname=3;
Javascript 数据类型:
·JavaScript 字符串
字符串是存储字符(比如 "Bill Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
·JavaScript数字
数字可以带小数点也可以不带,极大或者极小的数字可以用科学记数法来表示。
·JavaScript 布尔
布尔逻辑只有两个值: true或者 false
·JavaScript 数组
创建数组的三种方式:
下面的代码创建名为 cars 的数组:
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
var cars=["Audi","BMW","Volvo"];
·JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
·Undefined 和 Null(有不同,但是百度了,看不懂)
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
·声明变量类型
当您声明新变量时,可以使用关键词 "new" 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。
属性和方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。
-创建JavaScript对象:
var person = {firstname:”tom”,lastname:”java”,id:666};
或者:
person = new Object();
person.firstname=”tom”;
person.lastname=”java”;
person.id=666;
或者:
var person = new Object();
person.firstname=”tom”;
person.lastname=”java”;
person.id=666;
-访问对象的属性
访问对象属性的语法是:
objectName.propertyName (例如person.id)
-访问对象的方法
调用方法的语法是:
objectName.methodName() (例如message.toUpperCase())
提示:在面向对象的语言中,使用 camel-case 标记法的函数是很常见的。
camel-case 标记法即驼峰规则。
JavaScript函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
语法:函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname()
{
这里是要执行的代码
}
当调用该函数时,会执行函数内的代码。
-调用带参数的函数
在调用函数时,您可以向其传递值,这些值被称为参数。
这些参数可以在函数中使用。
可以发送任意多的参数,由逗号 (,) 分隔:
myFunction(argument1,argument2)
当您声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2)
{
这里是要执行的代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
-带有返回值的函数(没搞太懂)
有时,我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
在您仅仅希望退出函数时 ,也可使用 return 语句。
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明,即使它在函数内执行。
这条语句:
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
运算符 = 用于赋值。
运算符 + 用于加值。
JavaScript 算术运算符:+ - * / % ++ --
JavaScript 赋值运算符:= += -+ *= /= %=
比较运算符: == === != > < >= <=
逻辑运算符: && || !
逻辑运算符用于测定变量或值之间的逻辑。
条件运算符(不懂)
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
语法
variablename=(condition)?value1:value2
JavaScript If...Else 语句
条件语句用于基于不同的条件来执行不同的动作。
在 JavaScript 中,可使用以下条件语句:
-if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
if (条件)
{
只有当条件为 true 时执行的代码
}
-if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
if (条件)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
-if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
-switch 语句 - 使用该语句来选择多个代码块之一来执行
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
明天计划的事情:
学习js
遇到的问题:
收获:
任务名称:css11
成果链接:https://syxycjx.github.io/task/task11/html/task11.html
任务耗时:9.23日-9.26日,4天
官网脑图:
个人脑图:
任务总结:
任务十一中只用到了一部分的sass特性,其他的用到了再来总结
1.变量:
由变量声明符、变量名称、变量值组成,例如:$width:300px;
·声明变量:普通变量、默认变量 $width:300px;/$width:300px !default;
注意: sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。
·变量的调用:$fontSize: 12px;//声明
body{
font-size:$fontSize;//调用
}
·全局变量与局部变量:
全局变量就是定义在元素外面的变量!(在选择器、函数、混合宏…的外面定义的变量为全局变量);
局部变量:定义在元素内部的变量,内部的局部变量不会影响外部的其他元素,局部变量只会在局部范围内覆盖全局变 量。在局部变量的属性值后加上!global关键字可以将变量提升为全局变量。
什么时候声明变量?
该值至少重复出现了两次;
该值至少可能会被更新一次;
该值所有的表现都与变量有关(非巧合)。
2.嵌套
嵌套分为3种:选择器嵌套、属性嵌套、伪类嵌套。
·选择器嵌套:有很好的结构性,可以依照html布局的结构依层依次写下来,嵌套层数最好不要超过四层
·属性嵌套:CSS 有一些属性前缀相同,只是后缀不一样,可以进行嵌套。
//属性嵌套
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
· 伪类嵌套:伪类嵌套和属性嵌套非常类似,需要借助&符号一起配合使用。
.clearfix{
&:before,
&:after { //&代表父元素选择器的名字
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
注意:嵌套不是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深。
3.混合器:当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达目的了。此时混合宏就会变得非常有意义。
·声明混合器:不带参数的混合器、含参数的不设置默认值的混合器、含参数的设置默认值的混合器、多个参数的混合器
注意:使用混合器最大的不足之处是会生成冗余的代码块。Sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合器最不足之处。
4.继承:指继承类中的样式代码块。通过关键词 “@extend”来继承已存在的类样式块,从而实现代码的继承。
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
5.占位符
占位符可以改变以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。
6.注释:
Sass中有两种注释方式:
1、类似 CSS 的注释方式,使用 ”/* ”开头,结属使用 ”*/ ”,会被编译;
2、类似 JavaScript 的注释方式,使用“//”,不会被编译
两者区别,前者会在编译出来的 CSS 显示,后者在编译出来的 CSS 中不会显示
7.运算:
加减乘除、变量运算、数字运算、颜色运算、字符运算等。
混合宏、继承、占位符的使用时机:
1.混合宏的使用:
不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码冗余,但它可以传参数,较为灵活。
建议:如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
2.继承的使用:
使用继承后,编译出来的 CSS 会将使用继承的代码块合并到一起变为组合选择器。编译后的代码相对于混合宏来说要干净整洁,但是它不能传变量参数。
建议:若代码块不需传任何变量参数,且有一个基类已在文件中存在,那么建议使用 Sass 的继承。
3.占位符的使用:
编译后的 CSS 代码和使用继承基本相同,占位符和继承的主要区别是:
占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;
继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。
评论