第八章 Javascript入门

百密一疏^^

已于 2022-06-13 08:57:23 修改

阅读量177

点赞数 3

分类专栏：前端学习文章标签： javascript

于 2022-06-11 16:57:16 首次发布

本文链接：https://blog.csdn.net/m0_71674778/article/details/125234895

版权

前端学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.回顾练习

使用表单form实现如下效果：

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    table{
        border:1px solid black;
        margin: 0px auto;
        border-collapse: collapse;
    }
    tr,td{
        border: 1px solid black;
    }
    .color1{
        color: red;
    }
    .color2{
        color: green;
    }
    .td1{
        text-align: center;
    }

    </style>
    
</head>
<body>
    <form action="" method="post">
        <table>
            <tr>
                <td class="color1">
                    姓名
                </td>
                <td>
                    <input type="text" value="123">
                </td>
            </tr>
            <tr class="color1">
                <td >
                    密码
                </td>
                <td>
                    <input type="password" value="123">
                </td>
            </tr>
            <tr >
                <td class="color2">
                    性别
                </td>
                <td>
                    <input type="radio" name="sex" id="">男
                    <input type="radio" name="sex">女
                </td>
            </tr>
            <tr>
                <td class="color2">
                    城市
                </td>
                <td>
                    <select name="" id="">
                    <option value="">请选择</option>
                    <option value="hn">河南</option>
                    <option value="hb">河北</option>
    </select>
                </td>
            </tr>
            <tr>
                <td>
                    爱好
                </td>
                <td>
                    <input type="checkbox" name="dq" value="打球" />打球
                    <input type="checkbox" name="dq" value="打球" />听歌
                    <input type="checkbox" name="dq" value="打球" />跳舞
                </td>
            </tr>
            <tr>
                <td>
                    自我介绍
                </td>
                <td>
                    <textarea name="" id="" cols="10" rows="3"></textarea>
                </td>
            </tr>
            <tr >
                <td colspan="2" class="td1">
                    <input type="submit">
                    <input type="reset">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

2.前言

2.1 什么是程序

一组计算机能识别和执行的指令，运行于电子计算机上，满足人们某种需求的信息化工具。

2.2 编程语言的发展史

①人工

②纸带穿孔：0没有孔，1有孔

③机器语言：第一代计算机语言称为机器语言，就是0/1代码。计算机只能识别0/1.

④汇编语言：将一串枯燥无味的机器语言转化成一个英文单词

缺点：可移植性差；

优点：速度贼快！

⑤高级编程语言：

c c++ java python javascript

面向过程: C

面向对象: java,耦合问题，功能扩展/维护

编程思想: 面向接口，面向切面

2.3 JavaScript语言的发展

3.JavaScript基本语法

3.1 ECMA基本语法组成

注释，变量，运算符，数据类型，流程控制，对象

3.2 JavaScript

程序的本质是进行数据处理，数据处理从数据的存取开始

<!--在head标签内定义script标签,用于写js代码--> 
<script type="text/javascript"> 
// 1.存储数据
// 使用var关键字在内存中开辟一个空间，空间名字叫d1 
// 用=号赋值，存储一个数据--10 
    var d1 = 10; 
    var d2 = 4;
// 2.数据运算
// 3.计算结果
// 弹出消息框，显示内容
    alert(d1+d2);
    alert(d1-d2);
    alert(d1*d2);
    alert(d1/d2);
    alert(d1%d2);
</script>

3.3三种定义方式

①页内部脚本

在head标签内部，写script标签

<head>
  <title></title>
  <meta charset="utf-8">
  <!--内部js-->
  <script type="text/javascript">
    
  </script>
</head>

②外部脚本

在页面外部创建js文件，在页面中通过script标签引入进来

③行内js

<!--行内js-->
<a href="javascript:alert('hello,js')">点一下吧</a>

3.4 注释

①HTML语言注释(在HTML页面中)

<!--这是html语言注释-->

②css语言注释(在style标签内使用)

/*   
    在css代码块中用这个注释
    在js,java和其他语言中，
    这种注释方式都比较普遍
*/

③js语言注释

// 单行注释
/* 
    js多行注释
*/

4.JavaScript 变量

4.1什么是变量

变量来源于数学，是计算机语言中能储存计算结果或能表示值的抽象概念。变量可以通过变量名访问。在指令式语言中，变量通常是可变的；在程序运行的时候，变量会对应内存中的一个存储区域，通过变量我们可以向这个内存区域存储数据，或者读取数据。

4.2为什么要用变量

程序的本质是要进行数据处理，通过变量可以存储或访问数据，进行后续的操作。体现一种间接的思维方式。

4.3变量的定义和使用

4.3.1语法

// 定义变量存储数据
    var 变量名 = 数据; 
    let:局部变量
    const:常量
// 定义/声明 变量并同时赋值
    var xm = "张三";
// 定义/声明变量
    var name;
// 为变量赋值
    name = "张三";

var ：定义变量的关键字，程序读到var关键字的时候，就会在内存中开辟一块空间。这个空间的名字用变量名来标识。除了使用var可以定义变量开辟内存空间，在ES6之后，新增了两个关键字也可以定义变量：let(定义局部变量)，const(常量变量)

变量名：用于标记在内存中开辟的一块空间

4.3.2变量名命名

a.变量名由字母、数字、下划线、$符号构成，不能以数字开头

不合法的变量: !a , a b, 3xxx
合法变量: aaa , a_3, a3a

b.写法：小驼峰(studentName)，一个名字有多个单词构成，第一个单词首字母小写，后面单词首字母大写

小驼峰: studentName studentSex goodsPrice goods
大驼峰: StudentName

c. 自己定义的变量名，不能使用javascript语言的保留字

javascript保留字: var,function,Array
错误示范: var var = 10;

d.js中的变量名区分大小写

5.js中的赋值/运算

5.1 "="

表示赋值操作/运算，用于将右边的数据存储到左边的变量空间中

5.2 数据类型

undefined 未定义类型
string 字符

number 数值数据

number
boolean 布尔取值true/false
object:date,array 对象类型

null 表示空空的一种状态，也是一种对象类型

//js数据类型
    var v; 
//typeof:用于输出变量中的数据类型
	document.write(v+" "+(typeof v)+"<br/>");
	v = "张三";
	document.write(v+" "+(typeof v)+"<br/>");
	v = 200;
	document.write(v+" "+(typeof v)+"<br/>");
	v = 1.234;
	document.write(v+" "+(typeof v)+"<br/>");
	v = true;
	document.write(v+" "+(typeof v)+"<br/>");
	v = new Date();
	document.write(v+" "+(typeof v)+"<br/>");
	v = null;
	document.write(v+" "+(typeof v)+"<br/>");

5.3 "；"

分号表示一个语句的结束。在js中按照规范要在一句代码结束后加";"，不加并不影响运行

6.js中的输入输出语句

//输出语句
    alert(内容); // 弹窗显示信息
    console.log(内容);//浏览器控制台输出内容,f12->控制台
//输入语句
    prompt(标题,默认值)

7.js中的运算符

7.1 算术运算符:运算结果是数值

7.1.1普通运算符: +,-,*,/,%

算术运算符:除了加法有二义性，其他运算符对运算的数据都会先转为数值再运算。

+的二义性：

1.如果两边都是数值则做加法运算

2.如果两边有字符串则做拼接

- :减法
* :乘法
/ :除法
% :求余数

通过prompt接收的都是字符串数据！

7.1.2自增、自减: ++,--

	//自增(自己加1)/自减(自己减1)
	var n = 10;
	++n; //当只有一步运算的时候，自增在前/在后效果都一样
	var m = n++; //当有多步运算的时候，自增在前/在后结果不一样
	             //1.自增在前,则先做自增运算，再做其他运算
				 //2.自增在后,则先做其他运算，再做自增运算
	document.write(n+" "+m);

7.1.3 赋值运算

//赋值运算
// = : 将数据赋值给变量
//增强赋值
// +=: 先算加法再赋值
// -=：先算减法再赋值
// *=: 先算乘法再赋值
// /=: 先算除法再赋值
// %=: 先模除再赋值

  <script>
	var n = 10;
	n += 3;
	document.write("13==" + n + "<br />");
	n -=5;
	document.write("8=="+ n + "<br />");
	n *=8;
	document.write("64=="+n + "<br />");
	n /=2;
	document.write("32=="+n + "<br />");
	n %=10;
	document.write("2=="+ n + "<br />");
  </script>

7.2关系运算

比较/关系/条件运算符: 运算结果是布尔值 true/false

比较数据之间的大小关系

  <script>
	var n = "10";
	var m = 10;
	document.write(n==m);
	document.write("<br />");
	document.write(n===m);
	document.write("<br />");
	
	var l =5;
	document.write(m>l);
	document.write("<br />");
	document.write(m>=l);
	document.write("<br />");
	document.write(m<l);
	document.write("<br />");
	document.write(m<=l);
	document.write("<br />");
	document.write(m==l);
	document.write("<br />");
	document.write(m!=l);
	document.write("<br />");
	document.write(n===m);
	document.write("<br />");
  </script>

结果：

true
false
true
true
false
false
false
true
false

7.3逻辑运算

逻辑与(&&): 连接多个条件，要求所有条件都成立，那么逻辑与的结果才为真

逻辑或(||) : 连接多个条件,要求有任意一个条件成立，那么逻辑或的结果就为真

逻辑非(!) : 针对一个条件，求反

运算结果也是布尔值 true/false

  <script>
	alert(!true);
	var flag = 3+5>9 && 5*(2-3)<-12 || 7/2==10 && 34/5!=18 || (!(1==5));
	alert("计算结果是："+flag);
  </script>

7.4 三目运算符

三目运算符(?:):简化的条件判断

语法：

var 变量 = 条件表达式 ? 结果 1 ：结果 2 ;

条件表达式:

指得是由一个或多个关系运算或逻辑运算结合数据组成的表达式。表达式结果是布尔值。

三目运算符的运算逻辑:

1. 如果条件表达式的结果为true，则表达式返回结果1,作为表达式的结果

2. 如果条件表达式的结果为false，则表达式返回结果2，作为表达式的结果

  <script>
	var name =prompt("请输入你的名字","whc");
	var res = name == "whc"?"富豪+帅哥":"应该输入whc的,笨蛋！！！";
	alert(res);
  </script>

结果一：

结果二：

7.5运算的优先级

单目运算符(!,++,--)

算术运算(*/+-)-->比较运算(>,>=,<,<=,==,!=)

逻辑运算符(&&>||)-->赋值运算(=)

7.6 数据类型的转换

将字符串数据转为整数，小数，数值

parseInt(字符串/其他数据):将字符串转为整数类型的数据

parseFloat(字符串/其他数据):将字符串转为小数类型的数据

Number(字符串/其他数据):将字符串转为数值数据

  <script>
	var n1=prompt("请输入第一个数:","请不要放一些奇奇怪怪的米jia");
	var n2=prompt("请输入第一个数:","俺也一样");
	/*
	n1 = parseInt(n1);
	n2 = parseFloat(n2);
	*/
	n1 = Number(n1);
	n2 = Number(n2);
	document.write(n1 + " " + typeof(n1) +"<br />");
	document.write(n2 + " " + typeof(n2) +"<br />");
	
	if(isNaN(n1) || isNaN(n2)){
		alert("输入的是什么呀，算个锤锤");
	}else{
		var res = n1+n2;
		document.write("结果:"+res);
	}
  </script>