ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# JavaScript 入门 ## JavaScript 作用 ## JavaScript 历史和发展历史 ## JS是前台语言而不是后台语言 ![](https://box.kancloud.cn/421dcb27462e043eee2dcf340f15d009_633x572.png) ![](https://box.kancloud.cn/83b143d3b26511e92c7579dfa7a3a515_662x487.png) JavaScript是运行在客户的电脑中,而不是服务器上! 所以我们成为"前台语言",就是服务于页面的交互效果、美化、绚丽“后台语言”是运行在服务器上的,比如PHP、ASP、JSP等等,这些语言都能够操作数据库,都能够对数据库进行“增删改查”操作。 (Node.js除外,先别管Node.js是什么)。 ## JavaSctip 组成 ![](https://box.kancloud.cn/49b8f86a790dfd056106c6880cc2dee6_522x213.png) - 语言核心 - 基础课程只学习语言,变量、表达式、运算符、函数、if语句、for语句 - DOM - 就是控制HTML中的元素,比如让盒子移动、变色、轮播图。DOM是啥。 - BOM - 就是控制浏览器的一些东西,比如让浏览器自动滚动。BOM是啥。 ## JavaScript 书写规则 1. 行内 ``` 和标签写在一行,混杂在一块, <标签名 onclick="javascript:alert('行内js)"></标签名> ``` 2. 内部 建议放在body后面 ``` <script type="text/javascript">内容</script> alert('内部js'); ``` alert: 英文表示警告, 用途就是弹出 "警告框" 3. 外部 ``` <script type="text/javascript" src="*.js"></script> alert('外部js'); ``` ## JS 概念 JavaScript 是一种基于事件的,面向对象的脚本语言! - 事件: js的代码都需要通过键盘或鼠标动作触发! 常用事件 - 单击 onclick - 双击 ondblclick - 鼠标滑过 onmouseover - 鼠标移开 onmouseleave 语法,函数 ``` <标签 事件名='函数名()'></标签> 功能定义在函数中 function 函数名 (){......} ``` - 面向对象 ``` <标签 onclick="this.style.各种属性"></标签> ``` - 脚本语法: 可以直接在浏览器上运行的语言叫脚本语言 ## JS基本语法之变量 ![](https://box.kancloud.cn/e8c06f6b63080786e582e238eedfaaee_480x354.png) “编程语言中js是最简单入门的! 编程语言特点:能在电脑中存储数据,能做运算,逻辑处理能力(判断,比较,赋值.....循环....)!!!!!!! ” JS 使用变量存储数据 ``` 数学中: 定义 pi = 3.1415926; JS: var x= 3; [把3赋值给x] 弹框 alert(x) ``` ## 警告框 alert() ## 控制台打印 ## JS数据类型 计算机中变量存储数据是严格区分不同类型的! JS中的数据类型: - 数 int - 数( 单精度小数/双精度小数 ) float/double - 非数/字符串 string - 真假 boolean true false - 未定义 underfined - null 找不到标签 以上 5种是js的基本数据类型,还有1中是对象类型 - Object 对象类型 定义语法 ``` var 变量名 = 值; typof(变量); ``` 弱数据类型语言, 可以被多次赋值! 变量名区分大小写! ## 数字和字符串 “直接量”也称为“字面量”,就是看见什么,它就是什么。 简单的直接量有2种:数字、字符串。 字符串,就是人说的话,比如单词、句子,它们不是数字。一定要加上引号。 你将知道,”100” 和100不是一个东西 ``` alert(今天天气很好); //错误的语句,因为没有加上引号 ``` ![](https://box.kancloud.cn/e43583018b7c3884d42fd0df40687187_718x218.png) ## 注释 - 单行 // - 多行 /**/ 提示 `ctrl+/` ## 变量 ## 数据类型 ## 运算符 1. 算数运算符(++,--) 3. 比较运算符 4. 逻辑运算符 5. 三目运算符 ### 算数 ### 自加自减 ### 比较 ### 逻辑 ### 三目运算符 ## 输入输出 - prompt - alert - console ## 总结