JS-----第一章 javascript入门_.js 定义一个变量外部可以赋值-CSDN博客

本文链接：https://blog.csdn.net/weixin_68509156/article/details/124917804

1.课程目标

客户端数据计算

客户端表单合法性验证

浏览器对象BOM的调用

浏览器事件的触发

网页特殊显示效果制作

操作HTML元素DOM ：增删改查

购物车。

2.本章目标

1.知道什么是程(流程)序(次序)

2.知道什么是js

3.掌握js的基本用法

4.变量，运算符

3.程序

什么是程序 ?

计算机程序（Computer Program），港、台译做电脑程式。计算机程序是一组计算机能识别和执行的指令，运行于电子计算机上，满足人们某种需求的信息化工具。

4.了解编程语言的发展史

人工
纸带穿孔：

0没有孔 1有孔

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

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

ADD 0100101 1011010

缺点：可移植性差。

优点：速度贼快！

高级编程语言：

c c++ java python javaScript

面向过程：C

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

编程思想：

面向接口，面向切面

5.JavaScript 语言的发展

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。 [1]

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。 [1]

6.JavaScript 基本语法

6.1.ECMA 基本语法组成

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

6.2. JavaScript怎么用

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

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


  </script>

6.2.1 使用HBuilder创建项目

javascript的两种定义方式:

1.页内脚本

在head标签内部，写script标签

2.外部脚本

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

a.创建外部js文件

新建html文件，在html的head标签中，通过script标签的src属性引入外部js文件

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

6.3.JavaScript 注释

各种语言中的注释:.

html语言注释(在html页面中)

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

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

js语言注释(在script标签内使用)

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

6.4.JavaScript 变量

6.4.1 什么是变量

变量来源于数学，是计算机语言中能储存计算结果或能表示值的抽象概念。

变量可以通过变量名访问。在指令式语言中，变量通常是可变的

在程序运行的时候，变量会对应内存中的一个存储区域，通过变量我们可以向这个内存区域存储数据，或者读取数据。

6.4.2 为什么要用变量

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

6.4.3 变量的定义和使用

变量的语法:

// 定义变量存储数据
var 变量名 = 数据;


// 定义/声明 变量并同时赋值
var xm = "张三";
// 定义/声明变量
var name;
// 为变量赋值 
name = "张三";

其中:

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

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

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;

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

js区分大小写:
var a = 10;
var A = 100;

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

3.数据用表示特定信息的内容。数据分为:字符串数据,数值数据,其他类型的数据

4.; 分号表示一个语句的结束。在js中按照规范要在一句代码结束后加";"。

<!--内部js代码块-->
        <script type="text/javascript">
            var name = "张三"; // 字符串数据
            var sex = '男人'; // 字符串数据
            var age = 20;  // 数值数据
            var tall = 1.7; // 数值数据
            var isMarry = false; // 布尔值数据
            
            //alert:系统弹窗函数
            // alert(name);
            // alert(sex);
            // alert(age);
            // alert(tall);
            // alert(isMarry);
            
            // 使用控制台输出的方式，显示变量信息
            // console: 标准浏览器中的工具类，用于向浏览器控制台输出信息
            console.log(name,sex,age,tall,isMarry);
        
        </script>

6.5 JavaScript中的输入输出语句

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

6.6 js中数据类型

<script type="text/javascript">
	// js中的数据类型(表示信息内容):
	// 1. 数值数据(number) : 整数,小数 100,200,3.234,2.34
	// 2. 字符串(string) : 字符串数据要用单引号或双引号包裹 "aaa",'张三','100',"2.2"
	// 3. 布尔值(bool)   : 取值只有两个 true/false
	// 4. undefined: 数据未定义类型，声明了变量没有赋值，则变量内容为undefined
    // 5. null : 表示对象是空的一种状态
	// 6. 对象类型(object): Date,Array

	// 描述一个人的信息
	var name = "张三";
	var sex = '男';
	var age = 20;
	var tall = 1.7;
	var hasFriend = false;

	//alert("姓名:"+"name"); //输出普通的name字符串
	//alert("姓名:"+name); // 输出name这个变量中的内容
    //document,write();//输出到页面上

	// 在浏览器的控制台(f12,右键检查->控制台)输出信息:
	// console:控制台的一个工具对象 log: 这个工具的一个方法，可以输出内容

	/*
	console.log("姓名:" + name);
	console.log("性别:"+sex);
	console.log("年龄:"+age);
	console.log("身高:"+tall);
	console.log("是否有朋友:"+hasFriend);
	//console.log("xxx:"+xxx); 输出未定义的内容，直接报错
	*/

	// 区分数据类型的方式 typeof(变量):测试变量的数据类型
	var a1 = 100;
	var a2 = "100";
	alert(a1+" "+typeof(a1));
	alert(a2+" "+typeof(a2));
  </script>
 </head>

 <body>
  
 </body>
</html>

6.7 js中的运算符

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

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

自增、自减: ++,--

<script type="text/javascript">
	// 算术运算符:除了加法有二义性，
	//            其他运算符对运算的数据都会先转为数值再运算
	// + : 具有二义性，1.如果两边都是数值则做加法运算 
	//                 2.如果两边有字符串则做拼接
	// - : 减法
	// * : shift+8  乘法
	// / : 除法
	// % : 求余数
	// 请输入两个数(通过prompt接收的都是字符串数据)，
	// 进行数据的算术运算
	var num1 = prompt("第一个数",0);
	var num2 = prompt("第二个数",0);


	// typeof(内容):输出输入数据的类型
	alert(typeof(num1)+" "+typeof(num2));


	//alert(num1+num2);
	// Number(内容):可以将内容转为数值类型
	alert(Number(num1)+Number(num2))


	// 如果提供的数据无法转为数值，则结果为NaN(not a number)
	/*alert(num1-num2);
	alert(num1*num2);
	alert(num1/num2);
	alert(num1%num2);*/
	
  </script>

 // 当自增/自减运算和其他运算放在一起的时候
  // ++/--在前或在后的结果是不一样的
  // ++在前: 先做自增再做其他运算
  // ++在后: 先做其他运算，再做自增
<script type="text/javascript">


  // 自增/自减在单独运算的时候，符号(++,--)在前或在后结果都一样
  //var a = 10;
  //a++; //自增运算,自己的值增1
  //++a;   //自增运算,自己的值增1
  //alert(a);
  //a--;//自减运算，自己的值减去1
  //--a; //自减运算，自己的值减去1
  //alert(a);
  
  //var a = 10;
  //var b = a++; //该表达式有2步运算:1.自增 2.赋值
               // 因为++在后,所以先将a赋值给b,再将a自增
			   // 结果 a=11 b=10 
  //var b = ++a;  // 该表达式有2步运算:1.自增 2.赋值
				// 因为++在前,所以先将a自增，再将a赋值给b
				// 结果 a=11 b=11
  //alert(a+" "+b);


  var a = 10;
  alert(a++);//几步运算?
  alert(a);
  </script>

6.7.2 赋值运算符

赋值运算: =
增强赋值: +=,-=,*=,/=,%=


<script type="text/javascript">
	// 赋值运算
	// = :将数据赋值给变量
	//var a = 10;// 将10 赋值给a
	//var b = a; // 将a中的内容赋值给b
	//alert(a+"   "+b)


	// 增强赋值
	var a = 10;
	//a = a+20; // 先做加法，再做赋值
	a += 20;  //既有加法，又有赋值，先加法再赋值,等价于上面的表达式
	alert(a); //30


	a-=5; // 等价 a = a-5
	alert(a);//25


	a*=3; // 等价 a = a*3
	alert(a);//75


	a/=2; // 等价 a = a/2
	alert(a);//37.5


	a%=4; // 等价 a = a%4
	alert(a);//9...1.5


  </script>

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

比较数据之间的大小关系

比较运算符: >,>=,<,<=,==(等值),!=,===(等值等型)
<script type="text/javascript">
	//比较运算符:>,>=,<,<=,==,!=,===
	//其中要注意的是: =(赋值) ==(相等判断)


	/*
	var n1 = 10;
	var n2 = 5;
	alert(n1>n2); // true
	alert(n1>=n2); // n1要么大于n2要么等于n2 举例:5>=5
	alert(n1<n2);//false
	alert(n1<=n2);//false
	alert(n1==n2);//判断是否相等 false
	alert(n1!=n2);//10!=5成立 true
	*/


	// ==(等值判断) ===(等值等型判断)
	var a = 10;
	var b = "10";
	//alert(a==b);// 只比较内容
	alert(a===b); // 既比较内容，又比较类型
  </script>

6.7.4 逻辑运算符: 运算结果也是布尔值 true/false

逻辑运算用于连接多个关系运算

举例: 男生找女朋友 : 要么是女的要么有钱多组条件，满足其一即可

女生找男朋友: 必须帅必须有钱多组条件，所有条件必须成立

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

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

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

<script type="text/javascript">
	//逻辑运算:用来连接多个 关系/条件/比较 运算符
	//逻辑与(&&):所有条件都成立，则结果为真
	//逻辑或(||):任意条件成立，则结果为真
	//逻辑非(!):对条件运算的结果求反
	//     true || false
	alert(10>5 || 5<2); //true
	//     true && false
	alert(10>5 && 5<2); //false
	//       !true
	alert(!(10>5))  // false


	// 运算符优先级
	// 3*5-2+8/3*(5+6)*8
	// 单目运算:操作数只有一个的运算符称为单目运算符 !true
	// 双目运算:操作数需要两个，3+5,3-1,10*2,5>3, 3>5 && 5<2
	// 三目运算:三个操作进行操作 ?:运算符


	// () --> 单目运算符(!,++,--)
	//    -->算术运算(*/+-)-->比较运算(>,>=,<,<=,==,!=)
	//    -->逻辑运算符(&&>||)-->赋值运算(=)
	var flag = 3+5>9 && 5*(2-3)<-12 || 7/2==10 && 34/5!=18 || (!(1==5));
	//         8>9   &&  -1<-12    ||  3.5==10 && 6.8!=18  ||  !(1==5)
	//         false &&   false    ||   false  && true   ||  true
	//         false               ||    false  || true
	//                              false || true
	//                               true
	alert(flag);


	// 1.验证该表达式是否有语法错误
	// 2.没有错误的情况下，口算结果,可以用纸笔
  </script>

6.7.5 三目运算符

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

语法:

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

条件表达式:

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

三目运算符的运算逻辑:

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

6.7.6运算符优先级

    // () --> 单目运算符(!,++,--)
	//    -->算术运算(*/+-)-->比较运算(>,>=,<,<=,==,!=)
	//    -->逻辑运算符(&&>||)-->赋值运算(=,*=,/=)

6.8 数据类型的转换

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

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


<script type="text/javascript">
	// parseInt(数据):将数据转为整数


	//var s = "123";
	//alert(s+" "+typeof(s)) // 123  string
	//var x = parseInt(s); //将s转为整数
	//alert(x+" "+typeof(x)); // 123 number


	//var s = "123.456";
	//alert(s+" "+typeof(s)); // 123.456  string
	//var x = parseInt(s);
	//alert(x+" "+typeof(x)); // 123 number


	// parseFloat(数据):将数据转为小数
	//var s = "123.456";
	//var s = "123"; //如果数据本身只有整数，parseFloat结果还是整数
	//alert(s+" "+typeof(s)); // 123.456 string
	//var x = parseFloat(s);  // 将字符串转为小数
	//alert(x+" "+typeof(x)); // 123.456 number


	// Number(数据):将数据转为数值
	//var s = "123.456";
	var s = "123";
	alert(s+" "+typeof(s)); // 123.456 string
	var x = Number(s); //将字符串转为数值
	alert(x+" "+typeof(x)); // 123.456 number


  </script>