为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
JavaScript进阶篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • var mynum=5;  //声明变量mynum并赋值

    var mynum;  //  声明变量mynum

    mynum=5;   //给变量mynum赋值

    查看全部
  • document.write("num1的值是:"+num1);

    查看全部
  • alert(“mya的值是:”+mya);

    查看全部

  • window.location.[属性|方法]


    查看全部
    0 采集 收起 来源:Location对象

    2019-05-01

  • continue的作用是仅仅跳过本次循环,而整个循环体继续执行。

    语句结构:

    for(初始条件;判断条件;循环后条件值更新)
    {
      if(特殊情况)
      { continue; }
     循环代码
    }

    上面的循环中,当特殊情况发生的时候,本次循环将被跳过,而后续的循环则不会受到影响。好比输出10个数字,如果数字为5就不输出了。

    执行结果:


    查看全部
  • do while结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次。因为它是先执行代码,后判断条件,如果条件为真,继续循环。

    do...while语句结构:

    do{
        循环语句
     }while(判断条件)

    我们试着输出5个数字。

    <script type="text/javascript">
       num= 1;
       do
       {
         document.write("数值为:" +  num+"<br />");
         num++; //更新条件   }
       while (num<=5)
    </script>

    while 语句无句号结尾。

    查看全部
  • CSS样式--text各种属性

    1-1text-align属性定义及使用说明

    text-align属性指定元素文本的水平对齐方式。

    JavaScript 语法:object.style.textAlign="right"


    属性值


    描述
    left把文本排列到左边。默认值:由浏览器决定。
    right把文本排列到右边。
    center把文本排列到中间。
    justify实现两端对齐文本效果。
    inherit规定应该从父元素继承 text-align 属性的值。


    1-2text-align-last属性定义及使用说明

    定义和用法

    text-align-last 属性规定如何对齐文本的最后一行。

    注意:text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

    text-align: justify;
    text-align-last:right;

    JavaScript 语法:object.style.textAlignLast="right"

    CSS 语法

    text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

    属性值

    描述测试
    auto默认值。最后一行被调整,并向左对齐。测试 »
    left最后一行向左对齐。测试 »
    right最后一行向右对齐。测试 »
    center最后一行居中对齐。测试 »
    justify最后一行被调整为两端对齐。测试 »
    start最后一行在行开头对齐(如果 text-direction 是从左到右,则向左对齐;如果 text-direction 是从右到左,则向右对齐)。测试 »
    end最后一行在行末尾对齐(如果 text-direction 是从左到右,则向右对齐;如果 text-direction 是从右到左,则向左对齐)。测试 »
    initial设置该属性为它的默认值。请参阅 initial测试 »
    inherit从父元素继承该属性。请参阅 inherit

    1-3text-decoration属性定义及使用说明

    属性定义及使用说明

    text-decoration 属性规定添加到文本的修饰。

    注意: 修饰的颜色由 "color" 属性设置。

    JavaScript 语法:object.style.textDecoration="overline"

    属性值

    描述
    none默认。定义标准的文本。
    underline定义文本下的一条线。
    overline定义文本上的一条线。
    line-through定义穿过文本下的一条线。
    blink定义闪烁的文本。
    inherit规定应该从父元素继承 text-decoration 属性的值。

    1-4text-decoration-color属性定义及使用说明

    几乎所有的主流浏览器都不支持 text-decoration-color 属性。

    Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-color 属性。

    定义和用法

    text-decoration-color 属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through)的颜色。

    注意:只有在带有可见的 text-decoration 的元素上,text-decoration-color 属性才起作用。


    默认值:currentColor
    继承:
    可动画化:是。请参阅 可动画化(animatable)尝试一下
    版本:CSS3
    JavaScript 语法:object.style.textDecorationColor="red"尝试一下


    CSS 语法

    text-decoration-color: color|initial|inherit;

    属性值

    描述测试
    color规定文本修饰的颜色。测试 »
    initial设置该属性为它的默认值。请参阅 initial测试 »
    inherit从父元素继承该属性。请参阅 inherit

    1-5text-decoration-line属性定义及使用说明

    几乎所有的主流浏览器都不支持 text-decoration-line 属性。

    Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-line 属性。


    定义和用法

    text-decoration-line 属性规定文本修饰要使用的线条类型。

    注意:您也可以使用 text-decoration 属性设置 text-decoration-line。text-decoration 属性是 text-decoration-line、text-decoration-style 和 text-decoration-color 属性的速记属性。

    注意:您也可以同时使用多个值,比如 underline  overline,来在文本的上方和下方都显示线条。

    默认值:none
    继承:
    可动画化:否。请参阅 可动画化(animatable)
    版本:CSS3
    JavaScript 语法:object.style.textDecorationLine="overline"尝试一下



    CSS 语法

    text-decoration-line: none|underline|overline|line-through|initial|inherit;

    属性值

    描述测试
    none默认值。规定文本修饰没有线条。测试 »
    underline规定文本的下方将显示一条线。测试 »
    overline规定文本的上方将显示一条线。测试 »
    line-through规定文本的中间将显示一条线。测试 »
    initial设置该属性为它的默认值。请参阅 initial测试 »
    inherit从父元素继承该属性。请参阅 inherit

    1-6text-decoration-style属性定义及使用说明

    浏览器支持

    Internet Explorer Firefox Opera Google Chrome Safari

    几乎所有的主流浏览器都不支持 text-decoration-style 属性。

    Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-style 属性。


    定义和用法

    text-decoration-style 属性规定线条如何显示。

    默认值:solid
    继承:
    可动画化:否。请参阅 可动画化(animatable)
    版本:CSS3
    JavaScript 语法:object.style.textDecorationStyle="wavy"尝试一下



    CSS 语法

    text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

    属性值

    描述测试
    solid默认值。线条将显示为单线。测试 »
    double线条将显示为双线。测试 »
    dotted线条将显示为点状线。测试 »
    dashed线条将显示为虚线。测试 »
    wavy线条将显示为波浪线。测试 »
    initial设置该属性为它的默认值。请参阅 initial测试 »
    inherit从父元素继承该属性。请参阅 inherit



    1-7text-indent属性定义及使用说明

    属性定义及使用说明

    text-indent 属性规定文本块中首行文本的缩进。

    注意: 负值是允许的。如果值是负数,将第一行左缩进。

    默认值:0
    继承:yes
    版本:CSS1
    JavaScript 语法:object.style.textIndent="50px"

    属性值

    描述
    length定义固定的缩进。默认值:0。
    %定义基于父元素宽度的百分比的缩进。
    inherit规定应该从父元素继承 text-indent 属性的值。

    1-7text-justify属性定义及使用说明

    属性定义及使用说明

    text-justify属性指定文本对齐设置为"justify"的理据。

    此属性指定应怎样对齐文本以及对齐间距。

    默认值:auto
    继承:yes
    版本:CSS3
    JavaScript 语法:object.style.textJustify="inter-word"



    语法

    text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;


    描述
    auto浏览器决定齐行算法。
    none禁用齐行。
    inter-word增加/减少单词间的间隔。
    inter-ideograph用表意文本来排齐内容。
    inter-cluster只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐。
    distribute类似报纸版面,除了在东亚语系中最后一行是不齐行的。
    kashida通过拉伸字符来排齐内容。

    1-8text-outline属性定义及使用说明

    任何主流浏览器都不支持text-outline属性。


    属性定义及使用说明

    text-outline属性指定文字大纲。

    默认值:none
    继承:yes
    版本:CSS3
    JavaScript 语法:object.style.textOutline="2px 2px #ff0000"



    语法

    text-outline: thickness blur color;


    描述
    thickness必需。轮廓的粗细。
    blur可选。轮廓的模糊半径。
    color必需。轮廓的颜色。参阅 CSS 颜色值 。

    1-9text-overflow属性定义及使用说明

    属性定义及使用说明

    text-overflow属性指定当文本溢出包含它的元素,应该发生什么。

    默认值:clip
    继承:no
    版本:CSS3
    JavaScript 语法:object.style.textOverflow="ellipsis"



    语法

    text-overflow: clip|ellipsis|string;


    描述
    clip修剪文本。
    ellipsis显示省略符号来代表被修剪的文本。
    string使用给定的字符串来代表被修剪的文本。

    1-10text-shadow属性定义及使用说明

    属性定义及使用说明

    text-shadow 属性应用于阴影文本。

    默认值:none
    继承:yes
    版本:CSS3
    JavaScript 语法:object.style.textShadow="2px 2px #ff0000"



    语法

    text-shadow: h-shadow v-shadow blur color;

    注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

    描述
    h-shadow必需。水平阴影的位置。允许负值。
    v-shadow必需。垂直阴影的位置。允许负值。
    blur可选。模糊的距离。
    color可选。阴影的颜色。参阅 CSS 颜色值

    1-11text-transform属性定义及使用说明

    属性定义及使用说明

    text-transform 属性控制文本的大小写。

    默认值:none
    继承:yes
    版本:CSS1
    JavaScript 语法:object.style.textTransform="uppercase"

    属性值

    描述
    none默认。定义带有小写字母和大写字母的标准的文本。
    capitalize文本中的每个单词以大写字母开头。
    uppercase定义仅有大写字母。
    lowercase定义无大写字母,仅有小写字母。
    inherit规定应该从父元素继承 text-transform 属性的值。

    1-11text-wrap属性定义及使用说明

    任何主流浏览器都不支持text-wrap属性。


    属性定义及使用说明

    text-wrap属性指定文本换行规则。

    默认值:normal
    继承:yes
    版本:CSS3
    JavaScript 语法:object.style.textWrap="none"



    语法

    text-wrap: normal|none|unrestricted|suppress;


    描述
    normal只在允许的换行点进行换行。
    none不换行。元素无法容纳的文本会溢出。
    unrestricted在任意两个字符间换行。
    suppress压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。


    查看全部
  • 多种选择(Switch语句)

    当有很多种选项的时候,switch比if else使用更方便。

    语法:

    switch(表达式) { case值1:   执行代码块 1   break; case值2:   执行代码块 2   break; ... case值n:   执行代码块 n   break; default:   与 case值1 、 case值2...case值n 不同时执行的代码 }

    语法说明:

    Switch必须赋初始值,值与每个case值匹配。满足执行该 case 后的所有语句,并用break语句来阻止运行下一个case。如所有case值都不匹配,执行default后的语句。


    查看全部
  • 创建数组

    我们创建数组的同时,还可以为数组指定长度,长度可任意指定。

    var myarray= new Array(8); //创建数组,存储8个数据。

    注意:
    1.创建的新数组是空数组,没有值,如输出,则显示undefined。
    2.虽然创建数组时,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为8,仍然可以将元素存储在规定长度以外。

    52ca004b0001c81103980228.jpg

    查看全部
  • 使用数组进行两次迭代进行过滤

    查看全部
    0 采集 收起 来源:编程练习

    2019-04-30

  • 较量较量(比较操作符)

    两个操作数通过比较操作符进行比较,得到值为真(true)和假(false)。

    在JavaScript中,这样的比较操作符有很多,这些操作符的含义如下: 


    看看下面例子:

    var a = 5;//定义a变量,赋值为5var b = 9; //定义b变量,赋值为9document.write (a<b); //a小于b的值吗? 结果是真(true)document.write (a>=b); //a大于或等于b的值吗? 结果是假(false)document.write (a!=b); //a不等于b的值吗? 结果是真(true)document.write (a==b); //a等于b的值吗? 结果是假(false)


    查看全部
  • 另一种答案

    查看全部
    1 采集 收起 来源:编程练习

    2019-04-30

  • //利用双重循环往二维数组里存值

    var array = []

    for(var i =1 ; i<=9;i++){

        array[i] =new Array()

        for(var j=1; j<=i ;j++){

            //通过循环动态下标往二维数组里存值

            array[i][j]=i*j

            //打印九九乘法口诀表(&nbsp行之间加空格)

            document.write(j+"*"+i+"="+(i*j)+"&nbsp&nbsp&nbsp");

        }

        document.write("<br/>");

    }

    //把二维数组里的值打印出来

    for(var i in array){

        var a=[]

        for (var k in array[i]){

           a.push(array[i][k]);

        }

       document.write(a.toString()+"<br/>");

    }

    效果如下:

    https://img1.sycdn.imooc.com//5cc7de260001d00b06300380.jpg

    查看全部
    0 采集 收起 来源:二维数组

    2019-04-30

  • https://blog.csdn.net/k491022087/article/details/52629743

    查看全部
  • 把自己付费买的6500多元优达Udacity全栈视频课po下来了,需要的童鞋可➕某信:sum12358
    查看全部
    0 采集 收起 来源:让你认识JS

    2019-04-29

举报

0/150
提交
取消
课程须知
你需要具备HTML、css基础知识,建议同学们也可以想学习下js入门篇,快速认识js,熟悉js基本语法,更加快速入手进阶篇!
老师告诉你能学到什么?
通过JavaScript学习,掌握基本语法,制作简单交互式页面
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!