关于JavaScript

客户端脚本语言，可以直接嵌入html
与css的区别在于使网页不再静态

应用场景：

  • 客户端脚本，在浏览器中执行
  • 网页开发，与html和css协同工作
  • 后端开发，通过Node.js，JavaScript也能在服务器端运行

在script标签内，console.log("要输出的日志内容")
alert("弹窗里放的文字")

导入方式

内联式

直接在html文件中嵌入js代码

css是放在<style>中
js放在<script>中

外部引入

通过script标签的src属性引入

JS基本语法

变量

声明变量使用的关键字

  • var x;，具有函数作用域的变量
  • let y = 5;，具有块级作用域的变量。更安全灵活，避免var可能发生的一些问题，在变量提升和块级作用域方面
  • const PI = 3.14，不轻易改变的常量

返回值undefined与null的区别

  • undefined，已定义，但未赋值
  • null，被明确赋值为空，或者不存在了

控制语句

和c一样

条件语句

if,else,else if

循环语句

for,while
唯一与c不同的是，for里的变量声明是用let

break：跳出循环，结束循环的执行
continue：跳过当前循环中的代码，进入下一次循环

函数

1
2
3
4
function name(参数){

    return;
}

函数内部声明的变量，局部作用域
外部声明的，全局作用域

事件处理

alt text

事件绑定方法
HTML

1
2
3
4
5
6
<button oneclick="test()" onblur="test()" onfocus="text()"></button>
<script>
    function test(){
        alert("hello");
    }
</script>

DOM
网页被加载时，浏览器会创建页面的文档对象模型，即DOM
每个HTML可被视为一个文档树，DOM为文档树提供编程接口

alt text

1
2
3
4
5
6
7
8
9
10
<div id="box1"></div>
<div class="box2"></div>
<script>
    var box1 = document.getElementById('box1');//获取节点
    box1.style.width = '100px';
    box1.style.height = '100px';
    box1.style.backgroundColor = 'red';

    var box2 = document.getElementsByClassName('box2');
    document.body.appendChild(box2);

addEventListener

移动端布局