web 前端3 javascript基础

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1、JavaScript代码存在形式

<!-- 方式一 -->

<script type"text/javascript" src="JS文件"></script>

<!-- 方式二 -->

<script type"text/javascript">

    Js代码内容

</script>

2、JavaScript代码存放位置

HTML的head中
HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>

    alert('123');

</script>

二、变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。　　

<script type="text/javascript">

    // 全局变量

    name = 'seven';

    function func(){

        // 局部变量

        var age = 18;

        // 全局变量

        gender = "男"

    }

</script>

JavaScript中代码注释：

单行 //
多行 /* */

注意：此注释仅在Script块中生效。

三、数据类型

JavaScript 中的数据类型分为原始类型和对象类型

原始类型
- 数值类型:number
- 字符串类型:string
- 布尔类型：boolean
- 空对象：null
- 未定义：undefined
对象类型
- 数组
- “字典”
- function

特别的，数字、布尔值、null、undefined、字符串是不可变。

// null、undefined
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。<br><br>

undefined
undefined表示未定义值

var name;
 
null

null是一个特殊值

1、数字（Number）

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

定义数字的两种方式：

a = 123
123
 

b = Number(234)
234
 

b = Number("123")
123
 
typeof b //判断类型
"number"

转换：

parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

注意：

　　NaN 不等于NaN ，定义数值非数字则返回NaN

b = Number("123sdfas")
NaN

b == NaN
false

Math 对象

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

1 2	`var` `pi_value=Math.PI;` `var` `sqrt_value=Math.sqrt(15);`

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法	描述
abs(x)	返回数的绝对值。
acos(x)	返回数的反余弦值。
asin(x)	返回数的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。

2、字符串（String）

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

要把多个字符串连接起来，可以用+号连接：数字和字符串也能拼接。

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

obj.length                           长度

  
obj.trim()                           移除空白，\t
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接，新值，可以多个。
obj.indexOf(substring,start)         子序列位置 获取字串的第一个字母所在索引,start从哪开始找
obj.lastIndexOf(substring,start)         子序列位置，从后往前找

obj.substring(from, to)              根据索引获取子序列，从哪个位置到哪个位置

obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割，limit分割数量限制
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个索引位置(g无效)，找到之后就不再往后找了。
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。返回列表形式
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，

                                     $数字：匹配的第n个组内容；

                                     $&：当前匹配的内容；

                                     $`：位于匹配子串左侧的文本； #匹配到规则之后取其左侧内容并替换该规则的内容

                                     $'：位于匹配子串右侧的文本  #匹配到规则之后取其左侧内容并替换该规则的内容

1	`$$：直接量$符号<br><br>`

a.replace(/\d+\w\d+/g,"$2eric$1") # 不加分组的正则，后面的$不代表任何意义
"alsdf$2eric$1dsf21sfd"
 
$1 $2 代表分组

a.replace(/(\d+)\w+(\d+)/,"$2"+"eric"+"$1") # \w+代表字母与数字 贪婪匹配
"alsdf1eric123sfd"
 

a.replace(/(\d+)[a-zA-Z]+(\d+)/g,"$2"+"eri"+"$1")
"alsdf21eri123sfd"
 
$&代表正则内的所有匹配内容

a.replace(/(\d+)\w+(\d+)/,":before:"+"$&"+":after:")
"alsdf:before:123dsf21:after:sfd"

a = "alex123kds "
"alex123kds "
a.trim()
"alex123kds"
a.length
11
a.charAt(3)
"x"
b="123"
"123"
c="33"
"33"
b.concat(c)
"12333"
b.concat(c,"lll")
"12333lll"

console 测试

注释：IndexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。

<script type="text/javascript">

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))

</script>

indexof