JavaScript入门学习笔记

目录

1、JavaScript

2、条件语句

3、循环语句

4、函数

5、事件

---

1、JavaScript

可以直接嵌入HTML，并在浏览器中执行；使得网页不再是静态的，而是可以根据用户的操作动态变化的。
作用：
（1）客户端脚本：用于在用户浏览器中执行没实现动态效果和用户交互
（2）网页开发：与HTML、CSS协同工作，使得网页具有更强的交互性和动态性
（3）后端开发：使用Node.js，JavaScript也可以在服务器端运行，实现服务器端应用的开发

CSS嵌入到<style></style>标签内
JS嵌入到<script></script>标签内

例如：

<script>
    console.log('Hello，Head标签的内联样式')
</script>

<script src="./js/myscript.js"> /*选择js文件的当前路径*/
</script>

2、条件语句

用于基于不同的条件执行不同的代码块

（1）if语句：用于执行一个代码块，当指定的条件为ture时执行，语法如下：
if (condition) {
    //如果条件为真，执行这里的代码

}

（2）else语句：用于在上一个if和所有的else if都为假时执行的代码块，语法如下：
if (condition) {
    //如果条件为真，执行这里的代码
} else {
    //如果条件为假，执行这里的代码
}

（3）else if语句：用于基于不同的条件执行不同的代码块。在上一个if语句条件为假时，检查另一个条件。可以有多个else语句。语法如下：
if (condition1) {
    //如果条件1为真，执行这里的代码
} else if (condition2) {
    //如果条件2为真，执行这里的代码
} else {
    //如果以上条件都为假，执行这里的代码
}

3、循环语句

用于重复执行一段代码，直到指定的条件不再满足为止

（1）for循环：用于按照指定的条件重复执行代码块，语法：
for (初始化表达式（循环变量）;循环条件;迭代器（循环次数）) {
    //循环块，执行这里的代码
}

（2）while循环：执行指定条件的代码块，与for最大的区别是没有迭代器，语法：
while （循环条件) {
    //循环体，执行者这里的代码
}

（3）break和continue
1.break用于跳出循环，结束循环的执行
2.continue用于跳出当前循环中的剩余代码，继续下一次循环
例如：

for (var i=0;i<7;i++){
    if (i==2){
        continue;
    }
    if (i==4){
        break;
    }
    console.log(i);
}

4、函数

一段可重复使用的代码块，接受输入（参数）、执行特定任务，并返回输出。

function function_name(参数1,参数2,参数3,...){//参数可以不写，表示不传参
    //函数体，执行这里的代码
    return 返回值;//可选，返回值
}

例如：

function hello(){
    console.log('Hello World');
    }
hello();
function hello_with_return(){
    return'hello,world!-返回值'
}  

注意作用域，全局or局部

5、事件

文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。
事件            描述
onClick        点击事件
onMouseOver 鼠标经过
onMouseOut  鼠标移出
onCharge    文本内容改变事项
onSelect      文本框选中
onFocus        光标聚集
onBlur        移开光标

事件绑定方法：
1.HTML属性
2.DOM属性
3.addEventListener方法

DOM属性：
当网页被加载时,浏览器会创建页面的文档对象模型,也就是DOM(Document Object Model)。
每个HTML或XML文档都可以被视为一个文档树,文档树是整个文档的层次结构表示。
文档节点是整个文档树的根节点。
DOM为这个文档树提供了一个编程接口,开发者可以使用JavaScript来操作这个树状结构。