前端学习 JavaScript

JS基础

JS三种书写位置

1.行内式，直接写在元素内部

 <body>
<input type="button" value="我" onclick="alert('挺好的')">
</body>

2.内嵌式

 <head>
  <script>
    alert('')
  </script>
</head>

3.外部式

写完后引用

 <script src="my.js"></script>

引用中间不能写代码

JS的注释

 单行注释 // Ctrl+/
多行注释 /* */ Shift+Alt+A

JS的输入与输出

 prompt('');        输入
alert('')          浏览器弹出
console.log()      控制台输出

变量

变量的声明

 //声明变量
var age;
//赋值
age = 10;
//输出结果
console.log(age);

 //变量初始化
var age = 10;  //声明变量同时赋值为10

同时声明多个变量，用逗号隔开

变量命名规范

由字母、数字、下划线、$组成
大小写区分
不能数字开头
不能是关键词
遵守驼峰命名法，首字母小写，后面单词大写

简单数据类型

字符串

 '我的名字是'+name+'对吧'

布尔型

true的值为1，false的值为0

DOM

获取元素

根据ID获取

 document.getElementById('id名')
 
1.因为文档从上往下加载，所以script写在标签下
2.返回的是元素对象
3.console.dir可以打印我们返回的元素对象

根据标签名获取

 document.getElementByTagName('标签名')

 也可以指定一个父元素后获取其中的标签名
var ol = document.getElementByTagName('父元素名')
ol[0].getElementByTagName('子标签名')
必须指定父元素的哪一个数组对象

获取body，html元素

 document.body
document.documentElement

事件

事件源事件被触发的对象
事件类型如何触发比如需要鼠标点击或者键盘按下等
事件处理程序通过一个函数赋值的方式完成

 <body>
  <button id = "btn">你好</button>
  <script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
      alert('世界');
    }
  </script>
</body>

改变元素内容

 element.innerText
起始到终止，去除标签、空格、换行
element.innerHTML
起始到终止，保留标签、空格、换行
用的更多

 <body>
    <button>显示系统时间</button>
    <div>时间</div>
    <script>
        //当我们点击按钮，div会发生变化
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        //注册事件
        btn.onclick = function() {
            // div.innerText = '2022.3.23'
            div.innerText = getDate();
        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['日','一','二','三','四','五','六']
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>
</body>

改变元素属性

 <body>
    <button id="Peko">佩可</button>
    <button id="Kokkoro">可妈</button><br><br>
    <img src="D:\Documents\JavaScript\image\Peco.png" alt="佩可">
    <script>
        var Peko = document.getElementById('Peko');
        var Kokkoro = document.getElementById('Kokkoro');
        var img = document.querySelector('img');
        Peko.onclick = function() {
            img.src = 'D:/Documents/JavaScript/image/Peco.png'
        }
        Kokkoro.onclick = function() {
            img.src = 'D:/Documents/JavaScript/image/Kokkoro.jpg'
        }
    </script>
</body>

posted @ 2022-03-29 18:01 旅者与他的雄关漫道阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端学习 CSS

· 前端学习 HTML

· 前端之JavaScript

· 前端之javascript基础

· JavaScript（一）

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？