JavaScript基础用法

1.JavaScript是什么？
- 1.1 JS、HTML、CSS关系
- 1.2JS是如何运行的？
2.JS前置知识
- 2.1第一个JS程序
- 2.2 JS 书写格式
- - 2.2.1行内格式
  - 2.2.2内嵌格式
  - 2.2.3外部格式
- 2.3注释
- 2.4消息打印
- 2.5 JS
3.JS基础语法
- 3.1定义变量
- - JS数据类型
- 3.2定义方法
- 3.3条件判断
- - 1.3.1 if
  - 3.3.2switch
  - 3.3.3循环语句
4.JS操作DOM
- 4.1得到控件
- 4.2操纵控件
- - 4.2.1获取元素值
  - 4.2.2设置元素的值
  - 4.2.4实战计算器
  - 4.2.5jQuery框架学习

1.JavaScript是什么？

1.JavaScript（JS)是编程语⾔之⼀,它是一个脚本语言，通过解释器运行，它主要在浏览器运行，现在也可以基于node.js在服务器运行。
2.JS的用处：
(1)网页开发。
(2)网页游戏开发。
(3)服务器开发。
(4)桌面程序开发。
(5)手机app开发。

1.1 JS、HTML、CSS关系

三者关系：
●HTML:网页的结构
●CSS:网页的表现
●JS:网页的行为

1.2JS是如何运行的？

1.JS 通过浏览器可以直接运行，JS 通常是包含在 HTML页面中的，双击 HTML 页面就可以直接运行。
2.浏览器中包含了渲染引擎（HTML 渲染引擎和 CSS 渲染引擎）+ JS 执⾏引擎，JS 引擎也叫做 JS 解释器. 典型的就是 Chrome 中内置的 V8 引擎。

2.JS前置知识

2.1第一个JS程序

<script>alert("你好!");
</script>

2.2 JS 书写格式

JS有3种书写格式：
1.行内格式
2.内嵌格式
3.外部格式

2.2.1行内格式

直接嵌入到html元素内部：

JS 中字符串常量可以使⽤单引号表示, 也可以使⽤双引号表示. HTML 中推荐使用双引号, JS 中推荐使⽤单引号.

2.2.2内嵌格式

写在script:

2.2.3外部格式

写到单独的.js文件中：
1.引入JS
2.使用JS

2.3注释

1.单行注释：

2.多行注释：

2.4消息打印

1.弹出输入框：

2.输出信息到控制台

3.弹出选择框：

confirm("确认删除？");

2.5 JS

1.打开开发者工具

F12打开Chrome浏览器的开发者工具。

2.点击Sources资源面板

3.找到需要调试的js文件，设置断点。

4.触发并执行js.

3.JS基础语法

3.1定义变量

1.创建变量：

var name = "张三";
var name2="李四"

(1)var 是 JS 中的关键字, 表示这是⼀个变量.
(2)初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来. 初始化的值如果是数字, 那么直接赋值即可.
(3)=在Js中表示赋值。

2.使用变量：

console.log(age); // 读取变量内容
age = 30;         // 修改变量内容

JS数据类型

JS中内置的几种类型：

●number: 数字. 不区分整数和⼩数.
●boolean: true 真, false 假.
●string: 字符串类型
●undefined: 只有唯⼀的值 undefined. 表示未定义的值
●null: 只有唯⼀的值 null. 表示空值

所有的数据类型都可以使用 var 来定义，js 是弱类型的数据语言。

3.2定义方法

// 定义⽅法
function myfun(){alert("执⾏了 myfun ⽅法");
}
// 调⽤⽅法
myfun();
// 定义⽅法带参数
function myfun(name){alert(name+"：执⾏了 myfun ⽅法");
}
// 调⽤
myfun('Java');

JS 中使用function 关键字来表示定义⼀个方法，function 后面跟的是方法名。

3.3条件判断

1.3.1 if

1.if语句

// 形式1
if (条件) {语句 }
// 形式2
if (条件) {语句1
} else {语句2 }
// 形式3
if (条件1) {语句1
} else if (条件2) {语句2
} else if .... {语句...
} else {语句N}

(1)if写法1：

(2)if写法2：

(3)if写法3：

2.三元表达式：

3.3.2switch

适合多分支的场景：

switch (表达式) {case 值1:语句1;break;case 值2:语句2:break;default:语句N; }

3.3.3循环语句

1.while循环

while (条件) {循环体; }

先执⾏条件语句
条件为 true, 执⾏循环体代码.
条件为 false, 直接结束循环

跳出循环：

2.for循环：

for (表达式1; 表达式2; 表达式3) {循环体 }

●表达式1: ⽤于初始化循环变量.
●表达式2: 循环条件
●表达式3: 更新循环变量.

4.JS操作DOM

4.1得到控件

1.根据id得到HTML控件：

document.getElementById("元素id")

4.2操纵控件

4.2.1获取元素值

document.getElementById("username").value

4.2.2设置元素的值

document.getElementById("username").value = "java";

4.2.4实战计算器

1.实现方法一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个js案例</title><!-- 1.引入外部js --><script src="base.js"></script>
</head>
<body><h2>计算器</h2>数值1:<input type="text" id="ipt_num1"><br>数值2:<input type="text" id="ipt_num2"><br><input type="button" value="计 算" onclick="mycalc()"><script>function mycalc(){//1.得到第一个输入框的值var num1=document.getElementById("ipt_num1").value;//2.得到第二个输入框的值var num2=document.getElementById("ipt_num2").value;//3.让输入框1的值+输入框2的值并输出alert("相加的结果为:"+(parseInt(num1)+parseInt(num2)));}//定义方法function myset(){//给num1和num2赋一个默认值0//1.得到控件var iptNum1=document.getElementById("ipt_num1");var iptNum2=document.getElementById("ipt_num2");//2.操作控件iptNum1.value=0;iptNum2.value=0;}//调用方法myset();</script><!-- // <div>//    <input value="点击我" type="button" οnclick="myalt()">// </div> -->
</body>
</html>

2.实现方法二：

4.2.5jQuery框架学习

jQuery 是⼀个 JavaScript 库，jQuery 极⼤地简化了 JavaScript 编程.
聚合搜索功能实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聚合搜索</title><script src="js/jquery-1.9.1.min.js"> </script>
</head>
<body><div><div style="height:50px;margin-left:40%;"><input value="必 应" type="button" onclick="switchSearch('https://cn.bing.com/')"> &nbsp;&nbsp;&nbsp;&nbsp;<input value="360" type="button" onclick="switchSearch('https://www.so.com/')"> &nbsp;&nbsp;&nbsp;&nbsp;<input value="搜狗" type="button" onclick="switchSearch('https://www.sogou.com/')"> &nbsp;&nbsp;&nbsp;&nbsp;</div><div><iframe id="ifr" style="width:100%;height:600px;" src="https://cn.bing.com/"></iframe></div></div><script>function switchSearch(site){jQuery("#ifr").attr("src",site);}</script>
</body>
</html>

JavaScript基础用法相关推荐

JavaScript——基础用法以及数据处理
这系列的帖子默认有Java基础,仅作为学习记录笔记,没有编程基础的小伙伴建议学一下先学一下Java 一.JS输出 JavaScript中不提供任何打印或者显示函数. 1.1 显示方案 1.1.1 wi ...
JavaScript在HTML中的基础用法总结
网页主要由三部分组成,分别为HTML.CSS和Javascript.如果说HTML是肉身,CSS是皮相,那Javascript就是灵魂.因此,三者的联系与融合则至关重要.本文就来为大家讲解一下Java ...
Promise基础用法
什么是Promise? Promise是用来处理异步的; Promise就是承诺,对未来的承诺; 所谓的Promise(承诺),里面保存着未来才会结束的事件的结果; Promise是异步编程的一种解决 ...
Promise详解（一） ----基础用法
什么是Promise Promise是由社区最早提出并实现的,后加入到es6规范中.为更好处理javascript异步问题,用于解决其多次异步回掉嵌套问题.下面先尝试下promise的基础用法吧. 创 ...
常见JavaScript基础面试题上（附答案）
常见JavaScript基础面试题上(附答案) 1.JavaScript有哪些垃圾回收机制? 有以下垃圾回收机制. 标记清除( mark and sweep) 这是 JavaScript最常见的垃圾回 ...
JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
前端JavaScript基础知识点
JavaScript基础阶段说明 JavaScript基础 Web API JavaScript高级 ##第一天重点内容变量的声明及使用数据类型类型转换运算符 JavaScript的组成 E ...
前端基础入门四（JavaScript基础）
为什么80%的码农都做不了架构师?>>> 目标: 掌握编程的基本思维掌握编程的基本语法我们先来学习JavaScript基础,后续会讲解JavaScript高级. 自己是个做 ...
第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
JavaScript基础和js概括
js内容概括: Html 结构化 CSS 样式 JavaScript 行为交互 01.JavaScript基础 02.JavaScript操作BOM对象 03.JavaScript操作DOM对象 ** ...

JavaScript基础用法

JavaScript基础用法

1.JavaScript是什么？

1.1 JS、HTML、CSS关系

1.2JS是如何运行的？

2.JS前置知识

2.1第一个JS程序

2.2 JS 书写格式

2.2.1行内格式

2.2.2内嵌格式

2.2.3外部格式

2.3注释

2.4消息打印

2.5 JS

3.JS基础语法

3.1定义变量

JS数据类型

3.2定义方法

3.3条件判断

1.3.1 if

3.3.2switch

3.3.3循环语句

4.JS操作DOM

4.1得到控件

4.2操纵控件

4.2.1获取元素值

4.2.2设置元素的值

4.2.4实战计算器

4.2.5jQuery框架学习

JavaScript基础用法相关推荐

最新文章

热门文章