2021-10-17 – 源码巴士

第一章：JavaScript基础

为什么要学JavaScript

1:表单验证	2：页面动态效果

什么是JavaScript

JavaScript是一种基于对象和事件驱动的、跨平台的、并具有安全性能的脚本语言

JavaScript特点

1：向HTML页面中添加交互行为
2：脚本语言，语法和Java类似
3：解释性语言，边执行边解释

JavaScript组成

ECMAScript(核心)：
	JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。
	
DOM（文档对象模型）：
	DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
	
BOM（浏览器对象模型）:
	对浏览器窗口进行访问和操作

JavaScript的基本结构

语法：
	<script type="text/javascript">
        <!—
              JavaScript语句;
        —>
	</script>

备注：有的网页中用缺省type="text/Javascript"，这种写法是正确的，因为HTML5中可省略type属性，HTML5默认为是text/Javascript。

JavaScript的简单应用

<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
    document.write("初学JavaScript");
    document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>

注意： 1：<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存中即可
	  2：document.write()方法可以向HTML输出流中插入你传入的内容，浏览器会按着HTML元素依次顺序依次解析它们，并显示出来。
	    需要注意的是，如果在文档加载完成后（即HTML输出已完成），再使用document.write()方法来要求浏览器来解析你的内容
        则浏览器就会重写整个document，导致最后的这个document.write()方法输出的内容会覆盖之前所有的内容。

网页中引用JavaScript的方式

1：使用<script>标签：
	例如上面例子：JavaScript的简单应用
    
2：外部JS文件:
	<script type="text/javascript"  src="index.js" ></script>

3：直接在HTML标签中:
	<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>

JavaScript核心语法

变量	数据类型	数组	运算符号	控制语句	注释	输入/输出	语法约定

核心语法—变量

先声明变量再赋值
        var   width;	var:用于声明变量的关键字
        width = 5;	    width:变量名

同时声明和赋值变量
        var name="皮皮";
        var x, y, z = 10;

注意：JavaScript区分大小写，特别是变量的命名、语句关键字等

核心语法—数据类型

undefined:
        var width;
        变量width没有初始值，将被赋予值undefined
null:
        表示一个空值，与undefined值相等
number:
        var iNum=23;     //整数
        var iNum=23.0;   //浮点数
boolean:
        true和false
String:	
        一组被引号（单或双引号）括起来的文本
        var string="This is JavaScript";

核心语法— typeof运算符

 typeof：
            检测变量的数据类型
            
 typeof运算符的返回值如下：
             undefined：变量被声明但还未被赋值
             String：用单引号或双引号来声明的字符串
             boolean：true或false
             number：整数或浮点数
             object：javascript中的对象、数组和null

核心语法—String对象

属性:
    字符串对象.length
方法:
    字符串对象.方法名();

String对象方法如下表：

方法名称	说明
charAt(index)	返回在指定位置的字符
indexOf(str)	查找指定字符串在原字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引 index1和index2之间的字符串（包括index1但不包括index2对应的字符）
split(str)	将字符串分割为字符串数组

核心语法—数组

创建数组:
	var  数组名称 = new Array(length);
注意：
	new：数组的关键字
	length：表示数组中可存放的元素总数
	数组名[下标]来访问数组元素
    
数组的常用属性和方法下表：

类别	名称	描述
属性	length	设置或返回数组中元素的个数
方法	join( )	把数组的所有元素组合为一个字符串，通过一个分隔符进行分隔
方法	sort()	对数组排序
方法	push()	向数组末尾添加一个或多个元素，并返回新的长度

核心语法—运算符号

类型	运算符
算术运算符	+ - * / % ++ —
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& \|\| !

===与==的区别：
		1、==（等于）:只比较表面值，如“2”和2 相等    
		2、===（绝对等于）：同时比较表面值和数据类型,所以“2”和2不相等；

核心语法—逻辑控制语句

if条件语句
switch多分支语句
for、while循环语句
for-in
	示例：
		var fruit=[ "apple", "orange", "peach","banana"]; 
        for(var i in fruit){
               document.write(fruit[i]+"<br/>");
        }

核心语法—循环中断

break:跳出此循环
continue:跳出本次循环,进入下一次循环.

核心语法—注释

单行注释:   以 // 开始，以行末结束

多行注释:   /* …… */ ，表示其中的语句是该程序中的注释

核心语法—常用的输入/输出

警告对话框:alert(“警告信息");

提示对话框:prompt("提示信息", "输入框的默认信息");

核心语法—语法约定

代码区分大小写
变量、对象和函数的名称
分号

什么是函数

函数的含义：类似于Java中的方法，是一个能够完成特定任务/功能的代码块

使用更简单：不需要定义函数属于某个类，直接使用即可

函数的分类：系统函数和自定义函数

常用系统函数

parseInt ("字符串")
	将字符串转换为整型数字 
	如: parseInt ("86")将字符串“86“转换为整型值86

parseFloat("字符串")
	将字符串转换为浮点型数字 
	如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45

isNaN()
	用于检查其参数是否是非数字

自定义函数

有参/无参函数:
	语法：
		function 函数名(参数1,参数2,参数3,…){
                 //JavaScript语句
                 [return 返回值] //可有可无
		}

调用函数
	函数调用一般和表单元素的事件一起使用，调用格式：        
语法：
	事件名＝ "函数名( )";	
    
调用无参函数示例：
	<input name="btn" type="button"  value="显示5次js"  onclick="study( )" />
	//单击此按钮时，调用函数study( )，执行函数体中的代码
	
	function study( ){
        for(var i=0;i<5;i++){
            document.write("<h4>js</h4>");
        }
    }    
调用有参函数示例：
	<input name="btn" type="button" value="请输入显示欢迎学习js的次数"
  onclick="study(prompt('请输入显示欢迎学习js的次数:',''))" />
  	//单击此按钮时，调用函数study (count )，执行函数体中的代码
  	
	function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4>欢迎学习js</h4>");
        }
    }

变量的作用域

全局变量的作用域是全局性的，即在整个 Javascript 程序中，全局变量作用处处都存在。定义在 "script" 块中，在 "function" 函数外。

局部变量的作用域是局部性的，在函数内部或函数参数时定义，作用范围是从函数开始到结尾，即在｛｝里。

什么是事件驱动

函数：
    函数被声明后	不会执行
    绑定到元素上后	不会执行
    触发事件后	执行

常用事件

名称	说明
onload	当一个页面或一幅图像完成加载时
onclick	当鼠标单击某个对象时
onmouseover	当鼠标移到某个元素上时
onkeydown	当某个键盘按键被按下时
onchange	当域的内容被改变时

JavaScript基础总结

JavaScript的组成和基本结构
JavaScript基本结构和在网页中引入JavaScript

核心语法：	
            变量的声明和赋值
            数据类型
            数组
            运算符
            逻辑控制语句
            注释
            语法约定
            
程序调试：Chrome开发工具和alert

函数：
	常用系统函数
    自定义函数
    变量的作用域
    事件

原文链接：https://blog.csdn.net/mcsdnyy/article/details/120816162