前端的灵魂-JavaScript

最新推荐文章于 2021-05-03 22:40:50 发布

gzcgazc

最新推荐文章于 2021-05-03 22:40:50 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/gzcgazc/article/details/92654451

版权

JavaScript基础

JavaScript的组成

为什么学习JavaScript?
1.可以做表单验证
2.可以作页面的动态交互
JS是什么？
它是一种基于时间和对象驱动的，具有安全性的脚本语言。
JS也是一门面向对象的编程语言，它是一种面向原型(prototype)的面向对象(原型链)。
js的发展史：
JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了…在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape**（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和**Java没什么关系。（语法上模拟了Java）
JavaScript目前发展非常好，而且基于它产生了很多的框架和库。
例：Angular, react, Node, Vue, jQuery…插件等……
JavaScript脚本语言和Java非静态语言有什么区别？

编译器
- 编译器：
  - Java这种非脚本的静态语言，它们是先进行编译，然后编译后的代码才可以在某些机器上运行。
  - 缺点：如果修改了源代码那么Java这种静态语言必须要重新编译。
  - 优点：当编译完之后，如果下次要再执行，无需编译直接执行，速度较快。
- 解释器：
  - 一般解释器作为编译器的都是一些脚本语言/动态语言，无需编译，写完就可以运行。
  - 优点：无需编译，修改完直接可以运行展示最新的。
  - 缺点：每次都需要进行编译(解释)，速度慢。

JavaScript的组成：

ECMAScript - 核心语法(标准) 欧洲计算机制造商协会设立的标准。目前最常用版本为5.1，最新版为6。
BOM 浏览器对象模型
DOM 文档对象模型

JavaScript的基本语法

<script type="text/javascript">
    /* 当初JS标准打的火热  如果有浏览器不支持JS，那么后果就是代码会被认为普通文字展示在页面   */
    /* 所以为了让不支持的浏览器别瞎显示 所以放上了HTML注释 */
    /* 现在没这问题了 不支持的基本凉了 */
    <!--
    document.write("<h1>Hello World！</h1>");
	-->
</script>

JavaScript的引入方式

行内引入

借助于标签内置的事件属性，来实现。

常用的事件属性有：onclick 点击事件 onmouseover 鼠标悬浮事件 onblur 失去焦点事件
```
<input type="button" value="点我清除缓存" onclick="alert('清除成功！');" />
```
内部引入

在</body>上编写<script>标签（规范），然后内部编写JS代码，有些时候行内和内部会结合使用。

<script type="text/javascript">  
  document.write("<h1>Hello World！</h1>");
  </script>

-外部引入

在</body>上编写<script src=""> 标签，来引入外部的JS文件。
  (*.js文件)

<script src="js/index.js" type="text/javascript" charset="utf-8">
</script>

注意事项：
不要将外部引入的JS标签自闭合

<sccript src = "js/index.js" type = "text/javascript" charset = "utf-8"/>
<script>
	alert("xxxx");
<script/>

也不要在外部引入JS标签内写代码，如果想写新的js代码，另外创建一i个新的sccipt标签

JavaScript变量
JavaScript中变量的组成:

变量的数据类型
var (variable) 动态类型识别
变量名
- 它由数字、字母、下划线、$等组成，但是数字不能开头
- 见名知义
- 采用小驼峰命名法
- 也可以采用_连接命名法
- 变量值(单一类型的数据)

//先声明再赋值
var num ;
//声明并赋值
num = 10;

JavaScript数据类型：

undefined：未定义如果一个变量没有赋值过它的类型就是undefined
null：表示一个空值它可以和undefined做相等判断
number：表示数值，整数或浮点数
boolean：表示真和假 true、false
string：表示字符串 (单引号或双引号引起来的内容)
object：表示对象类型 (因为历史原因，以前的bug，所以当你测试null类型的数据时显示的是object)

如果检验是什么类型的？

typeof
JavaScript常用运算符

算术运算符
```
+  -  *  /  %  ++  --
```

关系/比较运算符

>  <  >= <= == !=  ===  !==

全等和==的区别？

==只比较内容
===不仅比较内容还比较类型

var str1 = "12";
var num1 = 12;

alert(str1 === num1); // false
alert(str1 == num1); // true

赋值运算符
```
=  复合赋值：+=  -=  *=...
```
逻辑运算符
```
&&  ||   !
```

2.4 JavaScript控制语句
选择结构：

基础if选择结构
```
if(条件表达式){
    // 代码
}
```

if-else选择结构

if(条件表达式){
    // 代码1
}else{
    // 代码2
}

多重if选择结构

if(条件表达式1){
   // 代码1
}else if(条件表达式2){
    // 代码2
}else{
    // 代码3
}

嵌套if选择结构

if(条件表达式1){
    if(条件表达式2){
       
    }
}

switch选择结构

switch(表达式){
    case 常量1:
    	break;
   	case 常量2:
   		break;
   	....
   	default:
   		break;
}

循环结构：
选择结构：

基础if选择结构
```
if(条件表达式){
    // 代码
}
```

if-else选择结构

if(条件表达式){
    // 代码1
}else{
    // 代码2
}

多重if选择结构

if(条件表达式1){
   // 代码1
}else if(条件表达式2){
    // 代码2
}else{
    // 代码3
}

嵌套if选择结构

if(条件表达式1){
    if(条件表达式2){
       
    }
}

switch选择结构

switch(表达式){
    case 常量1:
    	break;
   	case 常量2:
   		break;
   	....
   	default:
   		break;
}

循环结构：

while循环
```
while(循环条件){
    循环体
}
```

for循环

for(初始化循环变量;循环条件;循环出口){
    循环体/循环操作
}

循环控制关键字：

break 结束循环
continue 结束本次循环，进入下次循环

2.5 数组

// 1.
var arr = new Array(3);
arr[0] = "陈旭";
arr[1] = "梁涛";
arr[2] = "王莉莉";
// 2.
var arr = new Array("邓阔","邓文","邓武");
// 3.
// JSON(非常重要的文本格式 未来学)
var arr = ["豆涵","风力强","翻过墙"];

3掌握JavaScript的函数使用

函数：方法：功能

一系列代码组成的一个完整功能。

3.1 基本的系统函数使用

输出：alert(); 会弹出一个带有确定按钮的提示框

输入：prompt(); 会弹出一个带有输入框的提示框。

// 如果输入了 则返回输入的内容 否则为null
// p1：提示的内容  p2:输入框中默认的文本内容
var pwd = prompt("请输入您的密码：");
alert("您输入的是："+pwd);

parseInt() 转换为整数

parseFloat() 转换为小数

var num1 = prompt("请输入第一个整数：") - 0; // - 0也可以实现下方效果
var num2 = prompt("请输入第二个整数：") - 0;

// 转换为整数
// var num1 = parseInt(prompt("请输入第一个整数："));
// var num2 = parseInt(prompt("请输入第二个整数："));

/*var num1 = parseFloat(prompt("请输入第一个整数："));
			 var num2 = parseFloat(prompt("请输入第二个整数："));*/


// alert("两数的差为："+(num1 - num2));
// prompt()返回的类型是字符串  所以加号自动拼接
alert("两数的和为："+(num1 + num2));

3.2 会自定义函数(方法)

方法的分类(按有返和无返等分类)：

无参无返

// function ： 函数/功能
function 方法名(){
    // 方法代码
}

// 无参无返
function method1(){
    alert("我是无参无返！");
}

// 方法需要调用
method1();

无参有返

function 方法名(){
    // 方法代码
    // 返回值
    return 返回值;
}

function method2(){
    alert("我是无参有返！");
    return "hehe";
}

var result = method2();
alert(result);

有参无返

function 方法名(形参列表){
    // 方法代码
}

function method3(name,age){
    alert("有参无返："+name+"："+age);
}
method3("xxx",12);

有参有返

function 方法名(形参列表){
    // 方法代码
    return 返回值;
}

function method4(name){
    alert("有参有返:"+name);
	return "xx";
}

3.3 函数的使用

/*function dianni(){
	alert(1);
}*/

var btn = document.getElementById("btn");
// 绑定事件
// 匿名函数 没有方法名  只能使用一次
/*btn.onclick = function(){
				alert(1);
			}*/

// 绑定事件  如果函数绑定写上小括号() 表示调用函数并返回结果 
// 如果只是写上方法名 这表示绑定函数
btn.onclick = dianni;
function dianni(){
    alert(2);
}

3.4 函数中的变量作用域

// 成员变量
var i = 11;

function method1(){
    // 局部变量
    var i = 10;
    alert(i);
}

function method2(){
    alert(i);
}

method1();
//	method2(i);

gzcgazc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫