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

发布时间：2024年01月12日

? 上一篇

文章目录

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中指代假的不仅仅有false
    var 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比较为false
    console.log(false == undefined);//undefined 和 false比较为false
    // 为true
    console.log(null == undefined);
    console.log(null === undefined);
</script>

<script>
    let a = 10;
    let result = a / 'abc';
    // NaN:not a number
    console.log(result);
    // number类型的
    console.log(typeof result);

    // NaN之间的比较返回结果永远是false
    // false
    console.log(NaN == NaN);
    console.log(NaN === NaN);
    // true
    console.log(NaN != NaN);
    console.log(NaN !== NaN);
    // 同样的方式产生的NaN 比较的结果仍然为false
    console.log(result == result);
</script>

3.9流程控制语句

if
switch
while
do...while
for

for...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]是value
    for(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>
文章来源:https://blog.csdn.net/CHiN_951/article/details/135560746
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章