学习JavaScript

VIP文章 Jiettt-_-

已于 2022-04-07 11:41:37 修改

阅读量760

点赞数

分类专栏： js 文章标签： javascript

于 2022-03-30 19:57:47 首次发布

本文链接：https://blog.csdn.net/qq_67858958/article/details/123853776

版权

一 javascript 介绍 ：是一种脚本语言，不需要经过编译，由客户端（浏览器）直接读取运行，实时更新网页中的内容，运行在客户端(浏览器）。

二 js引入方式
       1.页面中使用script标签调试代码时使用
       2.使用scirpt标签+src属性引入js文件注意：引入js文件的script标签，在标签体里再写属性时无效，上线前使用
       3.在元素事件中直接写javascript代码建议不用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript程序</title>
   //<script type="text/javascript" src="test.js"></script> 使用scirpt标签+src属性引入js文件  
    <script type="text/javascript">
        document.write("<h1>百度：www.baidu.com</h1>");
    </script>   //页面中使用script标签 
</head>
<body></body>
</html>

三 js的三大组成部分
ECMAscript 是javascript的核心语言，提供语言的语法和基本对象。是根据 ECMA-262 标准实现的通用脚本语言，主要规定了这门语言的语法、类型、语句、关键字、保留字、操作符、对象等几个部分，目前 ECMAScript 的最新版是 ECMAScript6（简称“ES6”）。
DOM 文档对象模型（Document Object Model，简称 DOM），提供处理网页内容的方法和接口。是一种与平台和语言无关的模型，用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。
BOM 浏览器对象模型（Browser Object Model，简称 BOM），提供与浏览器进行交互的方法和接口。是 JavaScript 的组成部分之一。

四 js变量
弱类型，声明时不需要指明类型；赋值时，根据值得类型决定。数字型 number 字符串 string 布尔型 boolean 未定义或未赋值 undefined 复合类型 Object ，用法和java类似。

var num;    // 定义一个变量 num
num = 1;    // 将变量 num 赋值为 1
var num = 1;     // 定义一个变量 num 并将其赋值为 1
var a = 2, b = 3, c = 4;    // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4

五 js运算符
基本运算符 + - * / % ++ --
赋值运算符 = += -= *= /= %=
比较运算符 < > <= >= == != ===
逻辑运算符 && || ！
js中运算符与java中基本一致，+可以做数字加也可以做字符串拼接
注意：1. 小数相加时会丢失精度如0.1+0.2 需要取位数使用toFixed（位数）
2. ==与===的区别 ==只比较值包含内置类型转化 === 比较值和类型

六 输出语句
1. 使用 alert() 函数来弹出提示框；语法：window.alert(message); message 是要在提示框中输出的内容，alert() 中只能输出文本内容，使用 alert()函数会使程序中断。
2. 使用 confirm() 函数来弹出一个对话框；语法：语法：window.confirm(message); 对话框带有一个确认按钮和一个取消按钮。点击“确定”按钮，该函数会返回一个布尔值 true，点击“取消”按钮，该函数会返回一个布尔值 false。
3. 使用 document.write() 方法将内容写入到 HTML 文档中；
4. 使用 innerHTML 将内容写入到 HTML 标签中；
5. 使用 console.log() 在浏览器的控制台输出内容；语法 console.log(message);

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div id="demo">JavaScript 输出</div>
    <script type="text/javascript">
        //window.alert("警告框");  alert()函数

        /* var res = window.confirm("你确定离开吗？还有3分钟就可以领取大奖！");
        if(res == true){
            alert("你点击了“确定”按钮");
        }else{
            alert("你点击了“取消”按钮"); */
        
        /* document.write("<p>现在的时间是：</p>");
        document.write(Date()); */

        var demo = document.getElementById("demo");
        console.log(demo.innerHTML);
        demo.innerHTML = "<h2>爱生活爱自己</h2>"
    </script>
</body>
</html>

七 js条件和循环语句
语句语法与java基本一致 If...else Switch...case For for...in可循环数组成员 While Do...while

八 js函数
系统函数 parseInt()转成整型 parseFloat()转成浮点型
isNaN()检测是否是NAN(不是数字) eval() 把字符串当脚本运行返回结果
自定义函数语法：
function 函数名(参数列表形参){
           执行的代码
           如果需要返回值加return关键字
           return xxx;
}
使用匿名函数给变量赋值
var 函数名 = function(num1,num2){
          return num1-num2;
}
注意：1. 特殊写法立即执行函数
(function(){
})();
2. 变量作用域全局函数内

function sayHello(name = "World"){
    document.write("Hello " + name);
}
sayHello();                 // 输出：Hello World
sayHello('myWorld');     // 输出：Hello myWorld

九 js事件
Js会自动对行为（例如例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等）进行监听，当触发某些行为时，可以调用自定义函数来完成与用户的交互行为。事件通常与函数配合使用，当事件发生时去调用函数。
常用事件：
onclick 鼠标单击
onmouserover 鼠标移入，悬浮于页面的某个热点之上
onmouseout 鼠标移出
onfocus 获得焦点
onblur 失去焦点
onchange 内容改变文本框下拉列表
onload 页面加载完成后执行
onkeyup 键盘弹起 event.keyCode 键盘码
onsubmit 表单提交 return bol 决定表单是否可以提交
注意：事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过HTML 事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。

<!DOCTYPE html>
<head>
    &

最低0.47元/天解锁文章

Jiettt-_-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习JavaScript

一 javascript 介绍：是一种脚本语言，不需要经过编译，由游览器直接读取运行。用来做页面中的交互效果，运行在客户端(浏览器）。二 js引入方式 1.页面中使用script标签调试代码时使用 2.使用scirpt标签+src属性引入js文件注意：引入js文件的script标签，标签体无效，上线前使用 3.在元素事件中直接写javascript代码建议不用例：<scr...
复制链接

扫一扫