JavaScript基础

Posted 2020-11-12 msgws5762

一、为什么学习javascript

1、客户端表单验证

2、页面动态效果

3、是jQuery的基础

二、什么是JavaScript

1、JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（Even Driven）的，并具有安全性能的脚本语言

2、JavaScript的特点：（弱语言类型、无需预编译）

　　JavaScript　　主要用来在html页面中添加交互行为

　　JavaScript　　是一种脚本语言，语法和Java类似

　　JavaScript　　一般用来编写客户端的脚本

　　JavaScript　　是一种解释性语言，边执行边解释（无需预编译）

3、JavaScript的组成

　　01.ECMAScript 规定了js的基本语法和基本对象

　　02.BOM (浏览器对象模型) 提供了处理网页内容的方法和接口

　　03.DOM (文档对象模型) 提供了与浏览器进行交互的方法和接口

4、JavaScript的基本结构

　

<script type="text/javascript">
    JavaScript 语句;
</script>

5、JavaScript的执行原理

　　浏览器客户端向服务器发送请求==》服务器将包含JavaScript的页面进行处理==》将相应的包含JavaScript的HTML文件返回到浏览器客户端

6、使用客户端的优势

　　01、包含JavaScript的页面只要下载一次，减少不必要的网络通信，提升用户体验

　　02、JavaScript程序由浏览器客户端执行，减轻服务端的压力’

7、在网页中引用JavaScript的方式

　　01、直接在HTML标签中

　　　　

<input name="btn" type="button‘ value="弹出消息框" onclick="javascript:alert(‘欢迎你！‘)"’>

　　02、内部JavaScript文件

　

<script type="text/javascript">
    javascript 语句;
</script>

　　03、外部JavaScript文件

.js文件
document.write("初学JavaScript");
document.write("<h1>Hello,JavaScript</h1>");

.html文件导入.js文件代码
<script type="text/javascript" src=".js文件相对路径">
</script> <!--注意script要成对出现，不能以单标签方式导入外部JavaScript文件-->

注意：无论内部导入还是外部导入，都应当将<script>标签放在body中的最下方，以提升页面的加载速度，优化用户体验

三、JavaScript核心语法

1、变量的声明和赋值

　　JavaScript是一种弱类型语言，没有明确的数据类型，也就是说，在声明变量时，不需要指定变量的类型，变量的类型由赋值给变量的值决定。

　　语法：　　var 合法的变量名;　　　　（变量命名规则：字下美人其后数）

　　JavaScript区分大小写，大小写不同的变量名表示不同的变量。

　　JavaScript是一种弱语言类型，允许不声明变量而直接使用，系统将自动声明该变量

2、数据类型　　typeof返回变量的数据类型

　　undefined（未定义类型）当变量未初始化是，该变量的默认值是undefined

　　null（空类型）表示一个“什么都没有”的占位符

　　number（数值类型）八进制和 十六进制首数字是0　　特殊值NaN（Not a Number）表示非数

　　string（字符串类型） 单引号或者双引号括起来的类型

　　boolean（布尔类型） 只有两个值 true 和false

 

　　如果变量是null类型，或者是一种引用类型，如对象、函数、数组，返回object类型的结果

 3、数组

　　创建数组的四种方式

　　　　var arry1=new Array();//数组长度为0

　　　　var arry2=new Array(3);//数组长度为3

　　　　var arry3=new Array("orange",true,3)//声明的同时给数组赋值，元素的数据类型可以不同，

　　　　var arry4=[1,2,3,4]//注意这里用的是中括号“[ ]”

　

　　length属性：这里的数组可以自动扩容，当arry4[4]=5这样的赋值是允许的，此时arry4.length是5，如果数组元素没有都赋值时长度为声明时的长度

　　join("分隔符")：把数组的所有元素放入一个字符串，并用一个分隔符进行分割

　　sort()：对数组进行排序

　　push()：向数组末尾添加一个或者多个元素，并返回新的数组长度

4、运算符号

　　算数运算符：+ 加 、 - 减、  * 乘、  / 除、  % 取余 、 ++ 自加、  -- 自减

　　比较运算符：> 大于、< 小于、  >= 大于等于、 <= 小于等于、  ==等于、  != 不等于、 ===恒等、 !==不恒等

　　逻辑运算符：&& 且、 || 与、 ! 非

　　赋值运算符：=、 += 、 -=

 

　　==   表示等于，在比较时如果两个数据的类型不同，先将两数都转换成number数据类型，再比较转换后的值

　　=== 严格比较，只要数据类型不匹配就返回false

5、逻辑控制语句

　　条件结构

　　　　if 语句　if-else语句　　else-if 语句　　switch语句（注意加break;）

　　循环结构

　　　　while 循环　　do-while 循环　　for 循环　　for-in 循环

　　　　这里说下 for-in 循环

for(变量    in    对象){
    JavaScript语句;
}//这里的变量并非元素，而是索引

　　　　break:　　立即退出整个循环

　　　　continue:　结束当次循环，进入下次循环

6、注释

　　//　　　　　　单行注释

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

7、关键字和保留字

　　关键字：

　　break　　case　　catch　　continue　　default　　delete　　do　　else　　finally　　for　　function　　if　　in　　instanceof

　　new　　return　　switch　　this　　throw　　try　　typeof　　var　　void　　while　　with

　　保留字：

　　abstract　　boolean　　byte　　char　　class　　const　　debugger　　double　　enum　　export　　extents　　final　　float

　　goto　　implements　　import　　int　　interface　　long　　native　　package　　private　　protected　　public　　short

　　static　　supper　　synchronized　　throws　　transient　　volatile

8、常用的输入/输出

　　alert("提示信息");　　警告框，只有一个确定按钮

　　confirm("提示信息");  确认框，有确定和取消按钮，点确定返回true、点取消返回false

　　prompt("提示信息","输入内容"); 输入框，点击确定返回用户输入 点取消或者不输入，都返回null

四、调试

　　01、　chrome开发人员工具（F12）

　　　　Elements：用于查看和编辑当前页面中的HTML和CSS元素

　　　　Console：用于显示脚本中所输出的调试信息，或运行测试脚本等

　　　　Sources：用于查看和调试当前页面所加载的脚本的源文件

　　　　Network：用于查看HTTP请求的详细信息，如请求头、响应头及返回内容等

　　　　TimeLine：用于查看脚本执行时间、页面元素渲染时间等信息

　　　　Profiles：用于查看CPU执行时间与闪存占用等信息

　　　　Resource：用于查看当前页面所请求的资源文件，如HTML、CSS样式文件等

　　　　Audits：用于优化前段页面，加速页面加载速度等

 

　　　　调试步骤：语法错误的排除==》逻辑错误的排除==》修改错误

　　02、alert()方法

　　　　利用弹窗找到错误位置，修改错误

五、JavaScript的常用语法——函数

1、常用系统函数

　　parseInt()　　返回字符串中的首个非数字符前的数

　　　　var num1=parseInt("78.69");　　　　//返回值为78

　　　　var num2=parseInt("456color");　　  //返回值为456

　　　　var num3=parseInt("this456")　　　  //返回值为NaN

　　parseFloat()　　处理方式同上　　如果出现两个小数点，第二个被看做首字符，返回之前的浮点数

　　　　var floatNum=parseFloat("123.45.67");　　//返回值为123.45

　　isNaN()　　判断字符串是否是一个非数，非数返回true，是数返回false

2、自定义函数

　　关键字 function

　　两种方式：

　　　　一、function 函数名（参数列表）{

　　　　　　　　JavaScript语句;

　　　　　　　　[return 返回值]

　　　　　　}

　　　　二、var 函数名= function（参数列表）{

　　　　　　　　JavaScript语句;

　　　　　　　　[return 返回值]

　　　　　　}

　　　　　第二种类似Java中的匿名内部类

　　调用方式一致：事件名=函数名(实参)

　　注意：onload事件一般写在<body>标签当中，即<body onload="函数名（实参）">

3、变量的作用域

　　全局变量：在所有函数之外的脚本中声明的变量，作用范围是该变量之后的其他所有语句

　　局部变量：在函数内声明的变量，作用范围在该函数中且位于该变量之后的所有语句

　　注意：这里和代码块无关。一下面代码为例，循环块中的变量，可以在块之外使用，只要在同一个函数即可

<script>
    function firstHS(){
       for(var i=0;i<4;i++) {
             j=i;
        }
        alert("i="+i+"，j="+j);//显示结果为 i=4,j=3 显然在j和i都在块外使用了块内的值
    }
    function secondHS(){
        alert(typeof i);//显示结果为 undefined　　不在同一函数，无法使用
    }
</script>

4、事件

　　onload　　　　加载事件

　　onclick　　　　鼠标点击事件

　　onmouseover   鼠标悬浮事件

　　onkeydown　　按键按下事件

　　onchange　　  域的内容被改变事件

 

　　JavaScript：伪协议

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基本事件</title>
</head>
<body>
<!--
 javascript:  伪协议！
  当我们运行到javascript:  的时候，程序会先执行对应的js代码！之后再操作！
  无论是超链接还是提交按钮，都不会立即执行！
 -->
  <a href="javascript:">跳转</a>  <br/>
  <input type="button"  value="普通按钮" onclick="javascript:alert(“此处加判断，控制跳入相应页面”);"> <br/>

 <input  type="text" placeholder="请输入用户名" on  onblur="javascript:alert(‘失去焦点‘);">
<!--
onfocus="javascript:alert(‘获取焦点‘);"
-->
</body>
</html>

 

六、异常

　　

<script type="text/javascript">
/*
 * ex.name 错误名称
 * ex.message  错误信息
 */
    try{
      sasas
    }catch(ex){
        alert(ex.name+":"+ex.message);
    }
    alert("进入了catch块");
</script>

JavaScript中同样也有try-catch-finally