【web】ES5知识点小结

js引入方式

行间引入（几乎不用）

 <div onclick="alert('提示')">提示</div>

内部引入（在script标签里写js代码）

• 可以放到head标签中；
• 可以放到body标签中；
• 可以放到body下面。

	<script>
        alert("提示")
    </script>

外部引入方式（使用script标签引入外部js文件）

• src放置外部文件路径，是项目中最常用的

<script src="路径"></script>

onclick：单击事件

1.	<div onclick="alert('我是提示')">我是提示</div>
2.   <a href="javascript:alert('xsxsxs')">xsxsxs</a>

alert（‘ ’）:提示语句

调试语句

• alert（）：给一些友好的提示会用到；

consoloe：控制台输出

log：日志

error：错误

warn：警告

<script>
    console.log("张文浩是一条酸菜鱼")
    console.error("我是故意的")
    console.warn("我警告你") 
</script>

document.write(“不常用”) 不常用，会显示到页面中.

变量

定义变量

• 声明变量 var

定义一个变量

var 变量名=变量值

<script>
	(num：变量名；  =：赋值； 10：变量值)
	 var num=10  
	(输出变量)
  console.log(num)
</script>

定义多个变量

var 变量名1=变量值1，变量名2=变量值2，变量名3=变量值3…

<script>
	var num1=20,num2=30
     console.log(num1,num2)
</script>

定义变量注意点

1. 变量声明后再使用；
2. 变量声明要赋值；

变量命名规则

1. 变量名区分大小写（x和X不是同一个变量）；

2. 变量名由字母、数字、${、}_{组}成，不包含空格或者其他的特殊符号，不可以用数字开头，可以用$和 _ 开头；

3. 不可以使用js中的关键字和保留字命名;eg：class、const、for、var…

4. 如果变量名由多个单词组成的话，用驼峰命名法或者下划线隔开；eg:boxDiv，box_div ；BoxDiv。

数据类型

typeof()：判断某个变量的数据类型.

<script>
  var num1=50
  console .log(typeof(num1));
</script>

数据类型

1. Number：数字（可以参与运算）

2. String：字符串；（用“”/‘’包起来的就是字符串）

   • 任何数据类型和字符串进行拼接都会变成字符串

3. Boolean：布尔值（false、true）一般用在判断语句中

    <script>
       var bool=true
       console.log(typeof(bool));
       if(bool){
           console.log("符合条件")
       }
    </script>
   

4. Undefined：定义变量不赋值

    <script>
       var str5
       console.log(typeof(sr5));
    </script>
   

5. Object：对象

   array：数组（将同一类型的数据放到一起）

   数组中取值，通过数组名[索引值]数组中的索引取值，从0开始

   <script>
    var fruits=['苹果','橘子','葡萄','西瓜','榴莲','香蕉']
    console.log(fruits)
    console.log(fruits[0]);
    console.log(fruits[1]);
    console.log(fruits[2]);
    console.log(fruits[3]);
   
    for(var i=0;i<fruits.length;i++){
        console.log(fruits[i]);
    }
   </script>
   

   object：对象（对某一个东西的具体描述：key:‘value’）

   对象.属性名 可以拿到属性值

   <script>
    var cat={name:'Tom',like:'老鼠',color:'黄色'}
    //对象取值 对象名.key  eg：cat.like
    console.log(cat.like);
   </script>
   

   null：空对象

    <script>
       var x=null
       console.log(typeof(x))
    </script>
   

6. function：函数

分类

基本数量据类型

数字、字符串、undefined、boolean。

引用数据类型

对象、函数。

区别

• 基本数据类型实现拷贝的时候，俩值互不影响；
• 引用数据类型实现拷贝的时候，俩值互相影响。

---

注意

 <script>
    var x=10
    var y=x
    console.log(y);
    y=20
    console.log(x);

    var x=[1,2,3,4,5]
    var y=x
    console.log(y);
    y[0]=100
    console.log(x);
 </script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jb5Q0qNA-1665662533485)(C:\Users\戴俊茹\AppData\Roaming\Typora\typora-user-images\image-20220818201455387.png)]

数据类型转换

字符串转数字

1. Number()

<script>
 var str='999'
	var newStr=Number(str)
	console.log(typeof(str));
</script>

2. 字符串*、-、/

<script>
 var str='999'
	var newStr=str-1
 console.log(typeof(newStr));
</script>

数字转字符串

1. 拼接字符串 eg：变量名+" "

<script>
 var n=100
 var n1=n+""
 console.log(typeof(n1));
</script>

2. 数字.toString()

<script>
 var n=100
 var n2=n.toString()
 console.log(typeof(n2));
</script>

3. String(数字)

<script>
 var n=100
 var n3=String(n)
 console.log(typeof(n3));
</script>

补充

如果字符串无法转化为数字类型会输出NaN（NaN是Number类型）

---

NaN不等于NaN

---