初识JavaScript

最新推荐文章于 2023-08-06 08:23:15 发布

Super_Robot

最新推荐文章于 2023-08-06 08:23:15 发布

阅读量402

点赞数

分类专栏： JavaScript 文章标签： JavaScript语法基本结构定义域程序调试事件

本文链接：https://blog.csdn.net/Super_Robot/article/details/91357244

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初识JavaScript

JavaScript的组成

JS 前端的灵魂

为什么学习JavaScript?

历史：JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了…在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape**（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和**Java没什么关系。（语法上模拟了Java）

JavaScript这种语言目前也是发展的非常好，而且基于它产生了很多的框架和库。

W3C设立的标准：

结构语言：HTML
表现语言：CSS
行为/交互语言：JS

它是一种基于时间和对象驱动的，具有安全性的脚本语言。

可以做表单验证
可以做页面的动态交互

JS也是一门面向对象的编程语言，它是一种面向原型(prototype)的面向对象。

表单验证-减轻服务器端压力
页面动态效果

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

JavaScript这种语言目前也是发展的非常好，而且基于它长生乐很多的框架和库。

Angular、React、Node、Vue、jQuery……JS插件等

JavaScript这种接本语言和Java这种非脚本静态语言有什么区别?

编译器

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

JavaScript的组成：

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

JavaScript特点

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

JavaScript

对比CSS引入学习：

JavaScript的基本结构

<script>
	JavaScript语句；
</script>

联想记忆CSS。

行内引入

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

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

在上编写

JavaScrip核心语法

核心语法

Java中变量的组成：

变量的数据类型
变量名
变量值

JavaScript中变量的组成：

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

声明变量在赋值

var width; var-用于声明变量的关键字
width = 5; width-变量名

同时声明和赋值变量

var catName = “皮皮”;
var x,y,z = 10;

不声明直接赋值

width = 5;

变量可以不经声明而直接使用，但这种方法容易出错，也很难查找排错，不推荐使用

数据类型

undefined 未定义

如果一个变量没有赋值过它的类型就是undefined

var width;
变量width没有初始值，将被赋予undefined

null表示一个空值它可以和undefined做相等片段

表示一个空值，与undefined值相等

number表示数值，整数或浮点数

var iNum=23; //整数
var iNum=23.0; //浮点数

boolean表示真和假

true和false;

string表示字符串

一组被引号(单引号或双引号) 括起来的文本
var string1=“This is a string”;

运算符

2.3 JavaScript常用运算符

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

关系/比较运算符

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

全等和==的区别？

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

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

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

赋值运算符
```
=  复合赋值：+=  -=  *=...
```
逻辑运算符
```
&&  ||   !
```
位移运算符
```
&	|	~	^	<<	>>	>>>
```

typeof检测变量的返回值

typeof运算符返回值如下

undefined:变量被声明后，但未被赋值
string:用单引号或双引号来声明的字符串
boolean:true或false
number:整数或浮点数
object:javascript中的对象、数组和null

String对象

属性

字符串对象.length

var str="this is JavaScript";
var strLength=str.length; //长度是18

方法
字符串对象.方法名();

在这里插入图片描述

数组

创建数组

var 数组名称 = new Array(size); // size数组长度

为数组元素赋值

var fruit = new Array("apple","orange","peach","banana");

var fruit = new Array(4);
fruit[0] = "apple";
fruit[1] = "orange";
fruit[2] = "peach";
fruit[3] = "banana";

在这里插入图片描述

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;
}

循环结构：

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

for循环

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

循环控制关键字：

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

for-in

var fruit=new Array("apple","orange","peach","banana");
for(var i in fruit){
	document.write(fruit[i]+"<br/>");
}

循环中断

break和continue

<script type="text/javascript">
var i = 0;
for(i = 0; i <= 5; i++){
	if(i == 3){
		break; // continue;
	}
	document.write("数字："+i+"<br/>");
}
</script>

注释

注释中的语句不会执行

单行注释
```
// var str="this is JavaScript";
```

多行注释

/*
var str="this is JavaScript";
var str="this is JavaScript";
var str="this is JavaScript";
*/

输入/输出

alert

alert("输入信息");

prompt

prompt("提示信息"，"输入框的默认信息");

var a=prompt("提示信息"，"输入框的默认信息");
alert(a);

程序调试

Chrome开发人员工具

停止断点调试
单步调试，不进入函数体内部
单步调试，进入函数体内部
跳出当前函数
禁用所有的断点，不做任何调试

alert方法

控制台输出：console.log(t);

函数

输出：alter();

函数的定义：类似于Java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用
函数分类：系统函数和自定义函数

parselnt(“字符串”)

将字符串转换为整型数字
如：parseInt(“10”)将字符串“10”转换为整型类型10
```
var strToInt=parseInt("10");
document.write(strToInt);
```

parseFloat(“字符串”)

将字符串转换为浮点型数字
如：parseFloat(“3.14”)将字符串“3.14”转换为浮点数3.14
```
var strToFloat=parseFloat("3.14");
document.write(strToFloat);
```

isNaN()

用于检查其参数是否是非数字返回Boolean值

var isNan=isNaN("abc"); // true

定义函数

function 函数名(参数1，参数2，参数3，…){
	// JavaScript
	[return 返回值]
}

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

无参无返

// 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";
}

调用函数

函数调用一般和表单元素的时间一起使用，调用格式

事件名="函数名()";

// 单击此按钮时，调用函数study(),执行函数体中的代码
<input type="button" value="显示5次欢迎学习JavaScript" onclick="study()">
function study(){
	for(var i = 0; i < 10; i++){
		document.write("好好学习，天天向上"+"<br/>");
	}
}
// 直接调用
study();
// 输入次数，按次数调用
<input name="loop" type="button" value="请输入显示欢迎学习JavaScript的次数：" onclick="study(prompt('请输入显示欢迎学习JavaScript的次数：',''))"/>
function study(count){
    for(var i = 0; i < count; i++){
        document.write("好好学习，天天向上"+"<br/>");
    }
}

变量的作用域

全局变量
局部变量

// 成员变量
var i = 11;

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

function method2(){
    alert(i);
}

method1();
//	method2(i);

大括号外的是全局变量，大括号内的是局部变量。

JavaScript 变量的有效期

JavaScript 变量的有效期始于其被创建时。

局部变量会在函数完成时被删除。

全局变量会在您关闭页面是被删除。

事件

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

Super_Robot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识JavaScript

初识JavaScript表单验证-减轻服务器端压力页面动态效果JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言JavaScript特点向HTML页面中添加交互行为脚本语言，语法和Java类似解释性语言，遍执行边解释JavaScript的基本结构<script type="text/javascript"><!-- JavaS...
复制链接

扫一扫

专栏目录