JavaScript代码存在形式&字符串

一、JavaScript代码存在形式

 

之前我们讲了css和html,下面我们来学习学习javascript,JavaScript代码存在以怎样的形式展现给我们的,今天我们就来研究一下。

1.1、直接在js代码

<head>
    <script type="text/javascript">  //type="text/javascript",表示是js代码,如果不写的话,默认就是这个属性
        //js代码
    </script>
</head>

1.2、直接引用js文件

说明:src="本地js文件或者是其他网站的js文件链接"

<head>
  //引用js文件,这个js文件也可以是其他网站的js文件链接,这个里面不能执行任何脚本,单纯的引用,想执行脚本,需要另写<script>
    <script src="js/s1.js"></script>
</head>

注:html的执行顺序是由上而下,如果JavaScript写在head里,有一段JavaScript加载慢的话,会影响用户访问body的内容,所以js应该写在body的最下面。

 

1.3 js注释

// 单行注释
/*   多行注释  */

 如图:

二、JavaSript字符串操作以及跑马灯例子

 

 1、定义变量

1.1.、定义局部变量

说明:99%的情况下,都是定义的局部变量。定义局部变量:var   变量名="值"。

name = "xiaosusu"  //定义全局变量

1.2、定义全局变量

说明:这个情况下,一般不能乱定义,只有确定下来之后才能定义。 定义全局变量: 变量名="值"

name = "xiaosusu"  //定义全局变量

 2.数字类型

说明:JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。

转换:

  • parseInt(..)    将某值转换成数字,不成功则NaN
  • parseFloat(..) 将某值转换成浮点数,不成功则NaN
>>parseFloat("123.333") 
123.333
>>parseInt("123.333") 
123

特殊值:

  •  NaN,非数字。可使用 isNaN(num) 来判断。
  • Infinity,无穷大。可使用 isFinite(num) 来判断。
>>isNaN('18')
false
>>isNaN("dbjdw")
true

更多数值计算:

常量

Math.E
常量e,自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

Math

3.、字符串

说明:字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。

常见功能:

obj.charAt(n)                       返回字符串中的第n个字符
obj.length                           长度
obj.substring(from, to)           根据索引获取子序列
obj.trim()                           移除两边空白
obj.trimLeft()                       移除左边空白
obj.trimRight()                      移除右边空白
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.slice(start, end)                切片
obj.toLowerCase()                    小写
obj.toUpperCase()                    大写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement)     替换,正则中有g则替换所有,否则只替换第一个匹配项,
                                     $数字:匹配的第n个组内容;
                                     $&:当前匹配的内容;
                                     $`:位于匹配子串左侧的文本;
                                     $':位于匹配子串右侧的文本
                                     $$:直接量$符号

3.1、charAt(n)

说明:返回字符串中的第n个字符

>>name ="xiaosusu"
"xiaosusu"
>>name.charAt(0)  //返回第1个字符
"x"

3.2、substring(from, to)

说明:根据索引获取子序列,顾头不顾尾

>>name ="xiaosusu"
"xiaosusu"
>>name.substring(1,5) //返回从2位到第4位的字符串,顾头不顾尾
"ians"

3、lenght

说明:获取当前字符串的长度

>>name ="xiaosusu"
"xiaosusu"
>>name.length #返回name字符串的长度
8

4、trim()

说明:移除字符串两边的空白

>>name = "  xiaosusu  "
"  xiaosusu  "
>>name.trim()
"xiaosusu"

5、trimLeft()

说明:移除字符串左边的空白

6、trimRight()

说明:移除字符串右边的空白

7、concat(value, ...)

说明:拼接字符串

>>first_name = "xiao"
"xiao"
>>middle_name = "su"
"su"
>>last_name = "su"
"su"
>>full_name = first_name.concat(middle_name,last_name)
"xiaosusu"

8、indexOf(substring,start)

说明:从头往后计算子序列的位置

>>name = "xiaosusu"
"xiaosusu"
>>name.indexOf("a")
2

9、slice(start, end)

说明:切片,遵循顾头不顾尾原则

>>name = "xiaosusu"
"xiaosusu"
>>name.slice(1,3) //顾头不顾尾
"ia"

10、toLowerCase()

说明:小写

>>a = "XIAOSUSU"
"XIAOSUSU"
>>a.toLowerCase()
"xiaosusu"

11、 toUpperCase()

说明:大写

12、split(delimiter, limit)

说明:分割,delimiter:分割符,limit:拿前几个值

>>name = "xiao,su,su"
"xiao,su,su,"
>>name.split(",")   #按逗号分割
["xiao", "su", "su"]
>>name.split(",",1)
["xiao"]
>>name.split(",",2)  //分割之后拿前2个值
["su", "su"]
>>name.split(",",3)
["xiao", "su", "su"]

4.定时器

说明:我们每隔多长时间执行一下某个程序,我们成为定时任务,setInterval("定时任务名",间隔时间),时间是以ms为单位的。

<script>
     function f1(){   //定义一个函数f1
         console.log(1);   //会在浏览器console控制台输出日志
     }
    setInterval("f1()",1000);   //每隔1秒执行一下f1()函数
</script>

 

5.跑马灯例子

我们用上面的知识,来写一个跑马灯示例,这个我们经常会用到,特别我们在某个网站上看到欢迎***来莅临指导,然后这个字返回出现,那这个是怎么做的呐?我们就来写一个。

5.1 代码调试

js的代码为:

<body>
    <div id="i1">欢迎帅高高莅临指导</div>
    <script>
        function  f1(){
            //根据ID指定的标签的内容,定义局部变量
            var tag = document.getElementById("i1");
            //获取标签内部的内容
            var content = tag.innerText;
            //获取第一个字符
            var f = content.charAt(0);
            //获取除第2个到在最后1个的字符串
            var l = content.substring(1,content.length);
            // 重新拼接,获取新的字符串
            var new_content = l + f;
            //替换标签内之前内容
            tag.innerText = new_content;
        }
 
        setInterval("f1()",1000) //每秒执行一次定时任务
    </script>
</body>

如果你想把函数重新写到js文件中,那就可以这样做:

就是你先用<script>引入外联script文件,不会执行中间的内容,只引入js文件->再用另外一个<script>去编写当前页面的js。

 

posted @ 2018-01-24 11:12  人生是一场修行  阅读(247)  评论(0编辑  收藏  举报