JAVASCRIPT-CHAPTER-1 JAVASCRIPT基础

最新推荐文章于 2024-07-06 16:47:02 发布

GWENNIE.

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量196

点赞数

分类专栏： JAVASCRIPT 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_57307780/article/details/118655350

版权

JAVASCRIPT 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JAVASCRIPT基础

组成

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

特点

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

JavaScript组成

JavaScript

ECMAScript
DOM
BOM

基本结构

<script type="text/javascript">
<!--
    JavaScript语句;
-->
</script>

应用

可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

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

JavaScript的执行原理

在这里插入图片描述

网页中使用JavaScript的方式

使用

核心语法

变量

先声明变量再赋值

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

width = 5; width --- 变量名

同时声明和赋值变量

var catName = "皮皮";

var x,y,z = 10;

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

在这里插入图片描述

数据类型

undefined

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

null

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

number

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

boolean

true 和 false

string

一组被引号（单引号或双引号）括起来的文本
var string1 = "This is a string";

typeof运算符

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

String对象

属性

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

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

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

数组

创建数组

var 数组名称 = new Array(size);
Array：表示数组的关键字
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";

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

运算符号

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

逻辑控制语句

if条件语句

switch多分支语句

switch(表达式)
{
    case 常量1:
        JavaAScript语句1;
        break;
    case 常量2:
        JavaScript语句2;
        break;
    ...
    default:
        JavaScript语句3;
}

for、while循环语句

for(初始化;条件;增量)
{
    JavaAScript代码;
}

while(条件)
{
    JavaScript代码;
}

for-in

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

循环中断

break

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

continue

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

注释

单行注释

单行注释以//开始，以行末结束
alert("恭喜你！注册会员成功！"); //在页同行上弹出注册会员成功的提示框

多行注释

/*
使用for循环运行“document.write("<h3>Hello World</h3>");”5次
使用document.write在页面上输出“Hello World”
*/

常用的输入/输出

alert( )
```
alert("提示信息");
```

prompt( )

prompt("提示信息","输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");

语法约定

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

程序调试

Chrome开发人员工具

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

alert( )方法

函数

含义

类似于Java中的方法，是完成特定任务的代码语句块

使用

使用更简单：不用定义属于某个类，直接使用

分类

系统函数和自定义函数

常用系统函数

parseInt(“字符串”)
- 将字符串转换为整型数字
- 如：parseInt(“86”)将字符串"86"转换为整型值86
parseFloat(“字符串”)
- 将字符串转换为浮点型数字
- 如：parseFloat(“34.45”)将字符串"34.45"转换为浮点值34.45
isNan( )
- 用于检查其参数是否是非数字

自定义函数

定义函数

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

调用函数

函数调用一般和表单元素的事件一起使用，调用格式
事件名 = "函数名()";

调用无参函数

调用无参函数，输出5次“欢迎学习JavaScript”
function study(){
    for(var i = 0;i<5;i++){
document.write("<h4>欢迎学习JavaScript</h4>>");
    }
}

<input name="btn" type="button" value="显示5次欢迎学习JavaScript" οnclick="study()"/>

调用有参函数

调用有参函数
根据输入的次数，显示“欢迎学习JavaScript”
function study(count){
    for(var i = 0;i<5;i++){
document.write("<h4>欢迎学习JavaScript</h4>>");
    }
}

<input name="btn" type="button" value="显示5次欢迎学习JavaScript" οnclick="study(prompt('请输入显示欢迎学习JavaScript的次数：',))"/>

变量的作用域

全局变量

局部变量

事件

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

on" value=“显示5次欢迎学习JavaScript” οnclick=“study(prompt(‘请输入显示欢迎学习JavaScript的次数：’,))”/>


------

## 变量的作用域

### 	全局变量

### 	局部变量

------

## 事件

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

GWENNIE.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVASCRIPT-CHAPTER-1 JAVASCRIPT基础

JAVASCRIPT基础组成JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言特点向HTML页面中添加交互行为脚本语言，语法和Java类似解释性语言，边执行边解释JavaScript组成JavaScriptECMAScriptDOMBOM基本结构<script type="text/javascript"></script>应用可以包含在文档中的任何地
复制链接

扫一扫