JS笔记+案例总结

一、JavaScript简介

1.什么是Javascript？

JavaScript简称JS，由网景公司开发的客户端 脚本 语言（Java服务器端的编程语言），不需 要编译，可以直接运行

Web前端三层：

• 结构层HTML定义页面的结构

• 样式层CSS定义页面的样式

• 行为层JavaScript用来实现交互，提升用户体验

2.JavaScript作用

• 在客户端动态的操作页面 eg:购物车

• 在客户端做数据校验

• 在客户端发送异步请求

二、引用方式

1.内联方式

在页面中使用script标签，在script标签的标签体中编写js代码

<script>  
    js代码
</script>

2.行内方式

在普通标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等

补充：

对象：客观存在的并且可以相互区别的事物 eg:标签 div p span
外观：-----长相-----CSS
行为：-----事件属性-----“我爱你”

<input type="button" value="点我" onclick="alert('我被点了，晕 了！')">
 
    <!--<div onmouseover="alert('走开')">把鼠标移上来</div>-->
 
    <!--<a href="" onclick="alert('超链接被触发了')">我是超链接 </a>-->
 
    <a href="javascript:alert('超链接被触发了我是超链接</a>   
	<!--使用超链接的href属性执行js时，必须添加javascript:-->

3.外部方式

使用单独的 .js 文件定义，然后在面页面中使用 script 标签引入外部脚本文件

<script type="text/javascript" scr="ja文件路径"></script>

注意：如果某个script标签用于引入外部的js文件，则该script标签的标签体中不能再写js代码

三、基本用法

1.变量

js是一门弱类型的语言，声明变量时使用 var 关键字，不需要指定变量的类型

语法： var 变量名=常量或表达式;

注意：数据类型：常量(具体值)和变量(存放常量的量)

在ECMAScript 6规范中新增 let 关键字，也用于声明变量

使用 let 声明的变量支持块级作用域，而 var 声明的变量不支持块级作用域

注意：在IDEA中配置ES版本Settings–>language &frameworks–>javascript->javasscript language version

2.输入和输出

输出：

• lert()弹出警告框

• console.log()输出到浏览器的控制台

• document.write()输出到页面

输入：

• prompt()弹出输入框，获取用户输入的数

​ 使用 typeof 变量名 判断变量的类型

​ 使用Number(变量名)将字符串转换为数值

3.转义字符

常用转义字符：

• \n 换行

• \t 缩进

• \' 单引号

• \" 双引号

4.注释

单行注释： //

多行注释： /*注释内容*/

5.编码范围

代码是区分大小写
每条语句以分号结尾
代码缩进

四、核心语法

1.数据类型

基础数据类型：

• string字符串

• number数值（NaN表示非数字Not a Number,其自身是number类型，表示数值为不正 常状态）

• boolean布尔

• null空类型

• undefined未定义类型

数据类型的转换

• 转换为number

​ 使用Number()、parseInt()、parseFloat()

• 转换为string

​ 拼接空字符串

• 转换为boolean

​ 使用Boolean()

注：0、空字符串、null、undefined、NaN会被转换为false，其他值都会被转换为true

2.运算符

算术运算符：+ 、-、、/、%、**、++、-
比较运算符：>、>=、<、<=、==、= = =、!=
赋值运算符：=、+=、-=、=、/=、%=、**=
逻辑运算符：&& || !
条件运算符：条件?表达式 1:表达式2

3.选择结构

if…else…、switch

4.循环结构

while、do-while、for、for…in
break，continue
break:退出整个循环
continue:退出本次循环，继续进行下一次是否执行循环体的条件判断

                             //for ... in...对集合类型的数据进行遍历      
                            var str = 'welcome to JavaScript';      
                            for(var s in str)           
                                // console.log(s);           
                                console.log(str[s]);

5.数组

5.1定义方式

语法：

var arr = new Array(); 
var arr = new Array(值1,值