乐趣区

第一章-JavaScript基础1云图智联

第一章 JavaScript 基础

1、什么是 JavaScript?

HTML+CSS 完成了静态页面的展示,但是想要完成更好更复杂的用户交互和数据交互及展示,就需要使用 JavaScript。JavaScript 是基于对象和事件驱动,并具有安全性能的脚本语言 

2、JavaScript 的特点

a. 可以向 HTML 页面中添加交互行为

b. 脚本语言,语法与 java 语法类似

c. 解释性语言,边执行边解释

3、JavaScript 的组成

a.ECMAScript  标准

b.DOM  Document  Object  Model    文档对象模型

c.BOM   Browser    Object  Model    浏览器对象模型

4、JavaScript 的基本结构

html  <script>document.write("初识 JavaScript");</script>  

5、执行原理

 在浏览器客户端输入一个网址,这个页面是一个包含有 JavaScript 的 HTML 页面,发送到服务器,服务器接收并下载这个包含有 JavaScript 的 HTML 页面,然后返回给浏览器客户端 

6、引入 JavaScript 的方式

a. 内部

html<script></script>  

注:可以放在任意地方,前提是要确保这段 js 已加载

b. 外部

html  <script src="js 路径" type="text/javascript"></script> 

c. 行内

html<input type="button" name="btn" value="弹框" onclick="javascript:alert(' 你好 javascript')"/>  

7、什么是变量?

在内存中开辟空间保存数据

用 var 声明,var 是用于声明变量的关键字 ,变量根据值确认变量类型

javascript  var width; width = 5; // 先声明在赋值  
javascript  var width = 5;  // 同时声明并赋值  
javascript  width = 5;  // 不声明直接赋值,不推荐使用  

8、数据类型?

undefined 类型只有一个值,即 undefined。当声明的变量还未被初始化时,变量的默认值为 undefined。

Null 类型也只有一个值,即 null。null 用来表示尚未存在的对象,常用来表示函数企图返回 一个不存在的对象

number     不论整数还是浮点数,返回的都是 number 类型 

boolean     布尔类型,返回 true 或 false

string       不论单个字符还是字符串,返回的都是 string 类型    var ss=’s’ 表示的还是 string 类型

object       对象

注意:跟 java 有区别

9、typeof() 运算符

用来检测变量是什么数据类型

例:

javascript var a = 10;  var b = "Joy";  var x,y,z =10; var arr = new Array(3);  

javascript
typeof(a);         //number

typeof(b);         //string

typeof(x);         //undefined

typeof(z);         //number

typeof(null);      //object

typeof(arr);       //object

typeof(true);      //boolean

10、数组

数组是一个变量,开辟了一连串的空间存储一连串相同数据类型的数据

javascript
var arr = new Array(5);   // 声明一个名为 arr,长度为 5 的数组

var arr = [“aaa”,”bbb”,”ccc”,”ddd”,”eee”];  // 给数组 arr 赋值

arr[0] = “aaa”;      // 取出数组中的第一个值

a. 数组的属性

javascript  arr.length   // 获取 arr 数组的长度  

b. 数组的方法

javascript  arr.join()  // 把数组元素放到字符串中,并用连字符连接起来  
  
var arr = \["aaa","bbb","ccc"\];  
  
var arrList = arr.join("-");  
  
document.write(arrList);   //aaa-bbb-ccc  
  
arr.sort()       // 数组排序  
  
arr.push()      // 向 arr 数组添加一个元素  

11、运算符

javascript 为了满足逻辑过程中的计算和比较等提供了丰富的运算符

| 运算符类型 |                            运算符                            |
| :——–: | :———————————————————-: |
| 算术运算符 |                   +  –  *  /  %   ++   —                    |
| 赋值运算符 |                          =  +=  -=                           |
| 比较运算符 | > <  >=  <=  ==  !=  ===(先判断类型再判断值)   !==(先判断类型再判断值) |
| 逻辑运算符 |                &&(并且)   \|\|(或者)!(非)                 |

12. 控制语句

a. 条件句

javascript  
if(条件){//JavaScript 代码}else{//JavaScript 代码}  
// 当满足 if 中的条件时,执行 if 块代码  
// 不满足条件时,执行 else 块代码  
  
javascript  
switch(表达式){  
 case 常量://JavaScript 代码  
 break;case 常量://JavaScript 代码  
 break;default:  
 //JavaScript 代码  
 break;  
}  
// 根据 switch 后的表达式去匹配在 case 后的的常量,匹配后执行当前 case 代码  
// 遇到 break 会跳出当前 switch 结构  
// 不写 break 的后果是下面的 case 不用匹配,直接执行  
//default 块是以上 case 块都没有匹配成功时执行的代码  

b. 循环

javascript  
for(初始值;条件;增量){//JavaScript 代码}  
//for 循环由四部分组成一个常规循环,初始值是循环的初始状态,条件是循环的结束条件,增量是修改循环的初始状态  
// 当满足循环条件时,执行 for 循环内的代码块  
// 增量不写会发生死循环的情况  
  
  
javascript  
while(条件){//JavaScript 代码}    
//while 循环中的条件符合时,进入循环  

  
  
javascript  
do{//JavaScript 代码}while(条件)  
   
// 先执行一遍代码,再判断循环条件是否符合,符合则执行循环体  

javascript  
for(var i in 数组名){//JavaScript 代码}    
// 在 for 循环的基础上,简化了 for 循环的表达式部分  
// 针对遍历数组、集合的 for 循环  
// 数组中有多少元素,就循环几遍,i 代表每次循环的下标  

13、注释

a. 单行    //

b. 多行    / JavaScript 代码  

14、输入 / 输出

a. 输出 document.write(); alert();

b. 输入 prompt(” 请输入一个数 ”,””);

15、语法约定

a.javascript 严格区分大小写

b. 遵循变量命名的规范

c. 每句后边写分号

16、程序调试

a.alert()

b. 浏览器的开发者工具模式,结合 alert(),打断点调试

17、函数

a. 系统函数

 javascript  
 parseInt(“12aa”);   //12  把字符串转换成整数  
  
 parseFloat(“33aa1.34”)//  33  把字符串转换成浮点数  
  
 var a = "33vvv";  
  
 var b = "33.2aa3";  
  
 var c = "2";  
  
 document.write(parseInt(a)+","+parseInt(b)+","+parseInt(c));//33,33,2  
  
 document.write(parseFloat(a)+","+parseFloat(b)+","+parseFloat(c));//33,33.2,2  
   
 var d="你好";  
  
 isNaN(d)      //false  判断是否是非数值,返回 true 或 false  
 

b. 自定义函数

javascript
function study(){
//JavaScript 代码
}

1 . 有参

javascript  
function study(参数 1,参数 2,参数......){//JavaScript}  

例:

javascript <input type="button" value="按钮" onclick="study(prompt(' 请输入一个数 '))"/>  

javascript
<script>
function study(num){
document.write(“ 我爱 JavaScript”);
}
</script>

2 . 无参

javascript
function study(){
//JavaScript 代码
}

例:

javascript  
<input type="button" value="按钮" onclick="study()"/>  
<script>  
 function study(){document.write("我爱 JavaScript");  
  
 }  
  
</script>

调用函数:一般是跟表单元素的事件结合使用

18、变量的作用域

a. 局部变量

​ 说明:声明在函数中,只能在当前函数中使用,其他函数访问不到。

b. 全局变量

​ 说明:声明在函数外,所有函数都能使用。

19、事件

当用户进行一些鼠标或键盘操作或者页面发生某些情况时,我们可以对该操作进行捕捉,并进行对应的处理响应

名称 说明

onload 一个页面或一幅图像完成加载

javascript window.onload=function(){};

onlick 鼠标单击某个对象

javascript domObj.onclick=function(){}

onmouseover 鼠标指导移到某元素上

javascript domObj.onmouseover=function(){}

onkeydown 某个键盘按键被按下

javascript domObj.onkeydown=function(){}

onchange 域的内容被改变

javascript domObj.onchange=function(){}

退出移动版