网站导航
> 文章列表 > JavaScript基础笔记

JavaScript基础笔记

网友: 文章列表 2024-03-21 19:31:38

JavaScript基础笔记

文章目录

  • JavaScript
  • 输出
  • 语法
  • 数据类型
  • 事件
  • ref

JavaScript

  • Web的轻量级的编程语言, 可插入HTML页面的编程代码, 可由所有现代浏览器执行, 所有现代HTML页面都可用JavaScript
  • HTML定义了网页内容, CSS描述了网页布局, JavaScript控制了网页的行为
  • 历史: 官方名称ECMA-262, Brendan发明, ECMAScript1(1997) -> ECMAScript7(2016)
  • 用法: HTML中JavaScript脚本代码位于<script>与</script>标签之间, 可被放在<body>和<head>部分中

输出

  • window.alert(): 弹出警告框
  • document.write(): 内容写到HTML文档
  • innerHTML: 写入到HTML元素
  • console.log(): 写入到浏览器控制台 
      <!DOCTYPE html><html><body><h1>我的第一个页面</h1><p id='demo'>我的第一个段落。</p><script>window.alert(5 + 6);document.write(Date());document.getElementById('demo').innerHTML='段落已修改';a=5;b=a*4+5;console.log(b);</script></body></html>

语法

字面量: 固定值

  • 数字Number字面量可为整数/小数/科学计数e
    • 3.14 1001 235e6
  • 字符串String字面量可用单引/双引
    • "hi" 'HI'
  • 表达式字面量用于计算
    • 5+6 2*4
  • 数组Array字面量定义数组
    • [40,100,1,2]
  • 对象Object字面量定义一个对象
    • {firstName:'Joe', lastName:'Trump', age:85, eyeColor:'blue'}
  • 函数Function字面量定义一个函数
    • function myFunction(a,b) {return a*b;}
  • 数据类型: Number, String, Array, Object

变量:

  • 存储数据值, JS用关键字var定义变量, 以等号赋值 
    var x,l;
x=5;
    • 局部变量: 在函数内部生命的变量(用var), 仅能在函数内访问, 运行完毕删除
    • 全局变量: 函数外声明的变量, 网页上所有脚本, 函数可访问
    • 生存期: 从被声明的时间开始, 局部变量在函数运行后删除, 全局变量在页面关闭后删除
    • 值赋给未声明的变量, 该变量自动作为window的一个属性
  • 操作: JS用算术运算符计算值, 用赋值运算符给变量赋值
  • 注释: //, /* */
  • 折行: \\
  • JS对大小写敏感

语句

语句 作用
var 声明一个变量
function 定义一个函数
switch 基于不同条件来执行不同动作
if … else 基于不同条件执行不同动作
for 条件true时可执行指定的次数
for … in 遍历数组/对象的属性
while 条件语句为true时, 执行语句块
do … while 执行一个语句块, 条件true时继续执行
continue 跳过循环里的一个迭代
break 跳出循环
throw 抛出(生成)错误
try 错误处理, 与catch一起用
catch 在try语句块执行出错时执行catch
return 退出函数

函数

  function myFunction(a,b){return a*b;}document.getElementById("demo").innerHTML=myFunction(4,3);

标记

  • 语句前加:可对语句进行标记
    • continue语句(有/无标签)只能用在循环内
    • break语句(无标签), 只能在循环/while
    • 通过标签可让break退出任何JS代码块
cars=["BMW","Volvo","Saab","Ford"];
list: 
{document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list;document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); 
}

数据类型

  • 值类型(基本类型): 字符串String, 数字Number, 布尔Boolean, 空NULL, 未定义Undefined, Symbol

  • 引用数据类型(对象类型): 对象Object, 数组Array, 函数Function, 特殊对象: 正则RegExp, 日期Date

  • 数据类型可用typeof查看

    var x = 5;              //  数字
var y = 123e5;          //  科学计数法大数字
typeof 6;               //  查看值类型
var name = "string";    //  字符串
var z = true;           //  布尔类型
var cars = new Array(); //  数组
cars[0] = "BYD";
cars[1] = "NIO";
var cars = new Array("Xpeng", "AITO");
var cars = ["Lixiang", "NeZha"]
var person={            //  对象firstname : "Joe",lastname  : "Trump",age       : 76,
}
age = null;         // 清空变量的值
age = undefined;     // 清空变量的值和类型
var a = new String; //  声明变量类型

  • 对象: 键值对的容器, 可放入方法

    var person = {firstName: "John",lastName : "Doe",id : 5566,fullName : function() {return this.firstName + " " + this.lastName;}
};
document.getElementById("demo").innerHTML = person.fullName();

事件

  • 发生在HTML元素上的事情, 浏览器/用户行为
    • HTML页面完成加载, input字段被点击, 按钮被点击等
    • 添加事件属性 <some_HTML_element some_event='JS代码'>
    <button οnclick="getElementById('demo').innerHTML=Date()">现在时间为</button>
事件 描述
onchange HTML元素改变
onclick 用户点击HTML元素
onmouseover 鼠标指针移动到指定元素
onmouseout 鼠标从元素上移开
onkeydown 用户按下键盘按键
onload 浏览器完成页面加载

感觉语法和C差不多, 但是多了面向对象

ref

菜鸟教程 JavaScript 教程

409小游戏攻略网

网络标签：

相关问题