JavaWEB学习笔记 2024-1-10 --JavaScript

« 上一篇

文章目录

- 3.JavaScript
- - 3.1第一个JS程序
  - 3.2JS的引入方式
  - 3.3JS中函数定义
  - 3.4函数的触发
  - 3.5查看浏览器控制台输出
  - 3.6数据类型
  - 3.7变量
  - 3.8运算符
  - 3.9流程控制语句
  - 3.10JS中的异常处理

3.JavaScript

是由网景公司发布,最开始的名字为LiveScript,之后和sun公司合作,改名为JavaScript
JavaScript简称JS,标准名为ECMAScript简称为ES
JS是面向过程基于对象的语法,运行在浏览器上的脚本语言,可以实现网页交互功能

3.1第一个JS程序

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>alert('hello head');</script></head><body><!-- js使用script标签进行引入,script可以写在head和body中 --><script>alert('hello body');</script></body>
</html>

3.2JS的引入方式

内联式(内嵌式)使用script标签在head或者body中,在script标签中编写js代码
外联式使用js文件,通过script标签的src属性,将外联的js文件进行引入(可以引入多次)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/js.js"></script></head><body><script src="js/js.js">// 外联式的js引入的script中,不要写任何的js代码,不会报错,但是也不会被执行alert('我是卧底');</script></body>
</html>

alert("hello 外联式");

3.3JS中函数定义

函数,面向过程语言中的最小单元,类似于java中的方法
定义语法function 函数名(形参){js代码;[return [返回值]];}
调用语法函数名(实参);形参是变长参数,实参在赋值时不用和形参一一对应,没有被赋值的形参默认为undefined

<script>// 定义函数function m1(){alert('helloworld');}// 调用函数// m1();function m2(a,b){alert(a+","+b);}m2(10,20);m2(10);//10为a赋值 b使用undefined(未定义的)进行赋值
</script>

3.4函数的触发

就是函数的调用1.直接调用的形式 使用很少2.使用html中的触发事件例如:onclick 点击事件

<head><meta charset="utf-8"><title></title><style>#div1 {width: 50px;height: 50px;background: #0cc;}</style>
</head>
<body><script>function m1(){alert('hihihi');}</script><input type="button" onclick="m1();" value="点我."><div id="div1" onclick="m1();"></div><input type="text" onblur="m1();">
</body>

3.5查看浏览器控制台输出

console.log(变长参数);将内容打印到浏览器控制台下

console.log('hello');
console.log(1,3);

3.6数据类型

原始类型number string boolean null undefined
引用类型function object使用typeof关键字可以进行类型判断
定义变量使用var关键字(var一切)

<script>var a = 10;console.log(a);console.log(typeof a);// js中可以重复的定义一个变量var a = 'hello';console.log(a);console.log(typeof a);// string可以使用'' 和 ""var a = "hello";console.log(a);console.log(typeof a);// es6中字符串定义,使用``var a = `hello`;console.log(a);console.log(typeof a);// js中指代假的不仅仅有falsevar a = false;console.log(a);console.log(typeof a);// 不会手动赋值var a = null;console.log(a);console.log(typeof a);//类型为object// 不会手动赋值var a = undefined;console.log(a);console.log(typeof a);
</script>

<script>// 函数可以以变量形式进行输出function m1(){alert('hello');}console.log(m1);console.log(typeof m1);// 函数之间可以进行传递var m2 = m1;console.log(m2);console.log(typeof m2);// m2();// 函数可以使用变量的形式进行定义var m3 = function(){alert()}console.log(m3);console.log(typeof m3);console.log('------------------');// 数组对象var arr = [1,2,3,4,5];console.log(arr);console.log(typeof arr);// 字面量对象var obj = {};console.log(obj);console.log(typeof obj);
</script>

3.7变量

js中叫var一切,所有的数据类型都是var进行定义(弱语言的特点),或者不使用var定义不使用var属于全局变量,属于window对象,会造成全局污染
js中可以使用"use strict"启用严格模式,错误的定义方式不能使用

<script>// 严格模式"use strict"a = 10;console.log(a);console.log(window.a);
</script>

es6语法中新增定义变量的方式1.const:定一个不可修改,必须被初始化的值(java中的静态常量)2.let:定义的变量不能重名

<script>const a = 10;console.log(a);/* const b;console.log(b); *//* a = 20;console.log(a); */let b = 10;console.log(b);/* let b = 10;console.log(b); */
</script>

3.8运算符

+ - * / %
++ --
> >= < <= == != 
& | !
&& ||=== 严格等先判断类型是否一致,在判断值

<script>let a = 10;let b = '10';console.log(a == b);console.log(a === b);// 非严格等console.log(a !== b);
</script>

<script>// js中为假的值:'' 0 false null undefined // 都可以在流程控制语句中使用let b = false;// 表示假console.log(false == 0);console.log(false == '');console.log(0 == '');// null 和 undefined也是假console.log(false == null);//null 和 false比较为falseconsole.log(false == undefined);//undefined 和 false比较为false// 为trueconsole.log(null == undefined);console.log(null === undefined);
</script>

<script>let a = 10;let result = a / 'abc';// NaN:not a numberconsole.log(result);// number类型的console.log(typeof result);// NaN之间的比较返回结果永远是false// falseconsole.log(NaN == NaN);console.log(NaN === NaN);// trueconsole.log(NaN != NaN);console.log(NaN !== NaN);// 同样的方式产生的NaN 比较的结果仍然为falseconsole.log(result == result);
</script>

3.9流程控制语句

if
switch
while
do...while
forfor...in循环类似java中的foreach作用:变量数组和对象

<script>// 遍历数组let arr = [1,2,3,4,5];// i是下标for(let i = 0;i<arr.length;i++){console.log(arr[i]);}// i是下标for(let i in arr){console.log(arr[i]);}// 遍历对象let obj = {name:'tom',age:23,hobby:'学习',};// i是key obj[i]是valuefor(let i in obj){console.log(i,obj[i]);}console.log(obj);
</script>

3.10JS中的异常处理

try catch finally throw

<script>function m1(age){try {if(age > 0){return age;}else{throw '年龄不合法';}}catch(e){// 输出e对象console.log(e,typeof e);return 18;}finally {// 无论怎样都会执行的代码,但是不建议写return}}console.log(m1(10));console.log(m1(-10));
</script>