JavaScript预习

最新推荐文章于 2024-11-13 17:27:29 发布

啊哦357

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量137

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_63844356/article/details/124885667

版权

JavaScript基本语法

书写位置

行内式：直接写在标签里
内嵌式：写在标签间
外部式：创建js后缀文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=initial-scale=1.0">
    <title>Document</title>
    //内嵌式
    <script>
        alert('是否进入该页面');//浏览器弹出警示框
    </script>
    //外部
    <script src="相对路径"></script>
</head>
<body>
    //行内式
     <input type="text" alert="确认输入"/>
</body>
</html>

常用语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('是否进入该页面');//浏览器弹出警示框
        console.log('string');//浏览器控制台打印输出
        prompt('请输入你的姓名');//浏览器弹出框，用户可输入
    </script>
</head>
<body>
     
</body>
</html>

变量声明

var num;//声明变量
num=10;//赋值

var num=10;声明的同时赋值

变量名：

由字母，数字，下划线，美元符号组成
严格区分大小写
不能以数字开头
不能是关键字，保留字
变量必须有意义
遵守骆峰命名法

数据类型

JS中不能定义数据类型
Number整型
Boolean布尔型
String字符串型
Undefined声明没赋值
Null空
Infinity无穷大
-Infinity无穷小
NaN非数值
转换
toString() String() 加拼接符转为字符串
parseInt(String) pareFloat(String) Number()转换为数值
隐转（- * /）转换为数值
Boolean（）转换为布尔型
转义字符
\n换行
\\斜杠
\'单引号
\"双引号
\t缩进
\b空格

JS运算符

算数：+ - * / % ** ++ –
比较： > >= < <= == != ?
逻辑： && || ！
其他：typcof检测数据类型
isNaN判断是否是数字

语句

条件判断
JavaScript使用if(){…} else{…},来进行条件判断，和C语言的使用方法一样。

var role = 20;
if(age >= 18){
    alert ( 'adult ' ) ;} 
else {
    alert ( 'teenager ' ) ;
}

循环
JavaScript的循环有两种:一种是for循环，一种是while循环。

var x = 0;
var i;
for (i=1; i<=100 ; i++){
x = x + i;
}

for循环常用来遍历数组。另外 for循环还有一个变体是for…in循环，它可以把一个对象的所有属性依次循环出来

var person = {
name: 'aiye',
age: 20，
city : 'Beijing'
} ;
for ( var key in person ) {
    alert (key) ; //'name ' , 'age ' , 'city '
}

最后说一下while循环。使用方法和C语言一样，分为while(){…},循环和do{ …}while()

var x = 0;
var i;
while(i<=100){
x = x + i;
i++;
}

var x = 0;
var i;
do{
x = x + i;
i++;
}while(i<=100)

函数

在这里插入图片描述

定义函数：

//标准式
  function demo1(){
   	console.log("Hello Demo1");
   }
   demo1();
   //用Function构造
var demo2 = new Function('console.log("Hello Demo2");');
//用表达式方式
var demo3 = function(){
   	console.log("Hello Demo3");
   }

函数的调用：
1、普通调用：functionName(实际参数…)

2、通过指向函数的变量去调用：

var myVar=函数名;

myVar(实际参数…);
返回值：
1.当函数无明确返回值时，返回的值就是"undefined"。

2.当函数有返回值时，返回值是什么就返回什么。

事件

什么是事件
js使我们有能力去创建动态页面，事件就是可以被js侦测到的行为
简单理解就是用户操作鼠标或者键盘后，触发了js事件，然后产生对应的机制
比如我们点击一个按钮，弹出对话框
事件三要素
事件源>事件类型>事件处理程序
1、事件源：
事件被触发的对象，就是谁触发了这个事件
2、事件类型：
如何触发，什么事件，比如鼠标点击（onclick），鼠标经过，键盘按下。
3、事件处理程序：
通过一个函数赋值的方式完成
事件执行步骤
1、获取事件源
2、注册事件（也叫绑定事件）
3、添加事件处理程序（一般用function函数）
操作元素
1、修改元素内容

element.Text和element.innerHTML
element.innerText
从起始位置到终止位置的内容，但他去除了html标签同时空格和换行也会去掉 不识别HTML标签 非标准
element.innerHTML
起始位置到终止位置的全部内容，包括HTML标签，同时保留了空格和换行，识别HTML标签 属于w3c标准，用的比较多
这两个属性都是可读写的，可以获得元素里面的内容

2、修改元素属性

还是老的操作方法：
先获取元素
注册事件 处理程序
然后直接调用元素的属性赋值

鼠标事件
onclick: 点击事件
onmouseover: 鼠标放上
onmouseout: 鼠标离开
ondbclick: 双击
onmousedown: 鼠标按下
onmouseup: 鼠标抬起
onmousemove: 鼠标移动。
键盘事件
onkeyDown: 键盘按下
onkeyUp: 键盘抬起
onkeyPress: 按键一次(相当于上面的两个事件)
表单事件
onsubmit: 表单提交事件
onreset: 重置事件
onfocus: 获得焦点
onblur: 失去焦点
onchange: 下拉列表框，选项改变事件

+
-
*
/

</option