html-7（JavaScript-1）

最新推荐文章于 2021-03-13 19:27:59 发布
最新推荐文章于 2021-03-13 19:27:59 发布
阅读量327 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40666149/article/details/106154526
版权

放在函数里面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dem</title>
<style type="text/css">
 h1 {
  color: red;
 }
</style>
</head>
<body>
<p id="dem">改变内容</p>
<button type="button" onclick="dd()">点击</button>
<script type="text/javascript">
function dd(){
document.getElementById('dem').innerHTML='<h1>Hello Javascript</h1>';
}
  
</script>
</body>
</html>

（一）输入输出

语句功能
window.alert();弹出警告框
document.write();写入HTML，重置文档
innerHTML();写入HTML，不会重置文档
console.log();写入控制台

1.alert（）；

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <button type="button" onclick="alert('hello word!');">点击</button>
</body>
</html>

2.innerHTML
在被选中元素的内部添加新的HTML代码；不会使页面重置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dem</title>
<style type="text/css">
h1 {
 color: red;
}
</style>
</head>
<body>
<p id="dem">改变内容</p>
<button type="button" onclick='document.getElementById("dem").innerHTML="<h1>Hello Javascript</h1>"'>点击</button>
</body>
</html>

3.document.write();

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <p>Frist</p>
 <button type="button" onclick='document.write(5+6);'>点击</button>
</body>
</html>

4.console.log();

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <p>Frist</p>
 <button type="button" onclick='console.log("sssaa")'>点击</button>
</body>
</html>

常用输入
1.prompt对话框

prompt（text，defaultText）；

text:可选，在对话框中显示的纯文本
default：可选，默认的输入文本

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <button type="button" onclick="f_prompt()">点击</button>
 <script type="text/javascript">
  function f_prompt(){
   var name=prompt("请输入姓名！","admin");
   if(name!=null&&name!=""){
    document.write("你好！"+name+"!");
   }
   else{
    alert("Wrong!");
   }
  }
 </script>
</body>
</html>

（二）变量，常量，字面量

常量：const q=10；不可改
变量：可以使用var关键字声明变量，变量的值可以是任意类型

var name="sss";

let与var类似，但是只是声明的变量只在其所在代码块内有效

let name="sss";

变量提升：
浏览器会先解析代码
例子：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  console.log(content);
 </script>
</body>
</html>

以上代码会报错： content is not defined

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  console.log(content);
  var content="sss";
 </script>
</body>
</html>

以上代码不会报错：undefined（为content的值）
因为浏览器将 var content=“sss”;拆分为var content；content=“sss”;然后将var content；提到代码最前面
所以上面代码实际为：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var content;
  console.log(content);
  content="sss";
 </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var content;
  console.log(content);
  content="sss";
  console.log(content);
 </script>
</body>
</html>

1.例题：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <button onclick="foo();">点解</button>
 <script type="text/javascript">
  function foo(){
   if(false){
    //var content="sss";
   }
   console.log(content);
  } 
 </script>
</body>
</html>

var content=“sss”;
注释掉前：undfined
注释掉后：报错
2.例子

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  console.log(vl);
  var vl=100;
  function foo(){
   console.log(vl);
      var vl=200;
   console.log(vl);
  } 
  foo();
 </script>
</body>
</html>

结果为：
undfined
undfined
200

全局污染

1.不写关键字

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dem</title>
</head>
<body>
<script type="text/javascript">
 function foo(){
      vl=200;
 } 
 foo();
 console.log(vl);
 var v1=100;
 console.log(vl);
</script>
</body>
</html>

输出的都是200

(三）基本数据类型

  • number
  • string
  • boolean
  • symbol
number
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var v1=100;
  var v2=100.2;
  console.log(typeof v1);
  console.log(typeof v2);
 </script>
</body>
</html>
NaN

代表非数字的值，两个等于号只能比较值，不能比较类型；三个等于号可以比较类型

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var v1=100;
  var v2="100";
  console.log(v1==v2);
  console.log(v1===v2);
 </script>
</body>
</html>

Number()函数将字符串转化为数字

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var v1=100;
  var v2="100";
  console.log(typeof Number(v2));
  console.log(Number("sss"));//NaN
  console.log(typeof Number("sss"));
 </script>
</body>
</html>

NaN与所有值都不相等，包括他自己

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  console.log(NaN==NaN);
  console.log(NaN===NaN);
 </script>
</body>
</html>

isNaN()判断是否为数字

isNaN(NaN);//true
isNaN(123);//false

isNaN()会隐式的将他们的参数换成数字，所以即便参数是个字符串，他会返回true（因为先调用Number()函数转换，然后对结果调用isNaN（）调用

string

单引号和双引号都是string类型

undefined

已声明、未赋值的值，没有值的值，连数据类型都没有
1.

var test;
console.log(test);//undefined
function() f(x){
return x;
}
console.log(f());//undefined
function() f(x){
alert(x);//弹框
}
console.log(f(1));//undefined
null

空值

null与undefined
console.log(undefined==null);//true
console.log(undefined===null);//false
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(5+null);//5
console.log(5+undefined);//NaN
symbol

给变量创建一个全局唯一的值。属于基本数据类型

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var a=Symbol("qq");
  var b=Symbol("qq");
  console.log(a==b);
  console.log(a===b);
  console.log(a.description);
 </script>
</body>
</html>

description并不是Symbol的值，仅仅对值的描述，就像注释一样

for声明的是全局变量

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var a=Symbol.for("qq");
  var b=Symbol.for("qq");
  console.log(a==b);
  console.log(a===b);
  console.log(a.description);
 </script>
</body>
</html>
特征

值不可变
存放在栈中

m晴朗
关注
专栏目录
HTML-7.1-图片标签
QWH_PYTHON的博客
09-04 200
HTML-7.1-图片标签一：图片类型二：相对路径和绝对路径1、相对路径2、绝对路径3、相对路径和绝对路径的总结三：图片标签的属性 img：代表的就是一张图片，是单边标记 img是自封闭标签，也称单标签 一：图片类型 能插入的图片类型 jpg(jpeg) gif png bmp 不能往网页中插入的图片格式是 psd ai HTML页面不是直接插入图片，而是插入图片的引用地址 所...
vue的报错信息-Property or method "content" is not defined on the instance but referenced during render.
单车去旅行的博客
10-20 2074
错误1 vue.js:634 [Vue warn]: Property or method "content" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-...
解决JS中 元素，方法 is not defined 报错的方案
热门推荐
威少（微笑）
03-18 7万+
目录 元素 is not defined 方法 is not defined 代码层面判断某元素，方法是否存在 1.元素 is not defined 使用 $("#元素ID").click(function(){}) 进行元素的方法绑定时，并没有放在 （1）$(document).ready() （2）$(function(){}) ...
解决$ is not defined 的几种方法
ly3458888的博客
05-18 7448
$ is not defined ，有以下几种可能: 1.没有导入jQuery的jar包 2.jQuery的jar包放进了WEB-INF里，jQuery的jar包最好放在WebContent下，跟WEB-INF同级 3.导入jQuery的路径名没有写对 4.jQuery没有包含js 5.在WEB-INF下的JSP导入JQuery的路径要用绝对路径，不能用相对路径，如： <script type="text/javascript" src="/structs2_day01_atm/js/jquery-1
HTML+CSS+Javascript详细手册大全 含9个chm文档资料合集
04-17
1- CSS2.0中文手册.chm 2- Html和css网页标准指南.chm 3- JavaScript参考手册.chm 4- JavaScript参考手册中文版.chm 5- Javascript高级教程.CHM 6- JavaScript使用手册.chm 7- 网页制作完全手册.chm 8- 样式表滤镜...
HTML+CSS+JAVAscript详细手册（包含9个chm文档）
03-12
1- CSS2.0中文手册.chm 2- Html和css网页标准指南.chm 3- JavaScript参考手册.chm 4- JavaScript参考手册中文版.chm 5- Javascript高级教程.CHM 6- JavaScript使用手册.chm 7- 网页制作完全手册.chm 8- 样式表滤镜...
廖雪峰-JavaScript教程-PDF版
02-18
1. **基础知识**：首先熟悉JavaScript的基本语法，包括数据类型、运算符、控制结构等。 2. **DOM操作**：学习如何通过JavaScript操作HTML文档对象模型(DOM)，这是前端开发的基础。 3. **事件处理**：了解事件驱动...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H20.zip
最新发布
05-09
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
IOS下 内嵌 HTML编辑器 Objective-C与JavaScript数据交互
04-11
1. `stringByEvaluatingJavaScriptFromString:`：这是一个UIWebView的方法，用于执行JavaScript代码并返回执行结果。例如，我们可以用它来获取HTML编辑器中的当前内容： ```objc NSString *htmlContent = [webView ...
初识HTML（七）高级：了解jQuery
Simple子夜
03-13 1114
目录JQuery介绍Jquery优势JQuery版本JQuery的引用jQuery语法原生JS与JQ对象标签操作事件 JQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ Jquery优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会
JS方法is not defined解决办法--方法不能写在导入jQuery包的script标签中
qq_31293215的博客
05-16 3万+
前几天被一个问题坑的很惨，今天用空，来记录一下。在JSP页面的HTML标签里写着onclick触发事件，在script标签里写着这个事件的方法，可是一运行浏览器就报错** is not defined。比如就这个标签：&lt;input type="text" onclick="enter(this)" id="b_login" value="确认"&gt;script标签：&lt;script ...
关于$ is not defined的原因和解决办法
一棵星星
03-27 6万+
用sublime写毕设的时候碰到这个报错三次，但是三次都是不同的错误。 ①.html中没有引入jQuery.js文件 刚刚开始摸索毕设的时候忘了引入这个文件，导致出错。 可从官网下载。我下载的版本是jquery-1.7.2.js。 下载链接jQuery官网下载地址 （注：打开链接后，找到自己想要的版本直接右击保存到电脑即可，不需要点开那个文件链接） ②.引入jQuery.js文件的路径错误 把该...
小程序 内容未定：ReferenceError: xxxx is not defined
weixin_43069179的博客
03-22 1543
错误信息 VM9786:1 thirdScriptError content is not defined;at pages/publish/publish page content function ReferenceError: content is not defined at V. (http://127.0.0.1:12780/appservice/pages/publish/publi...
使用Dreamweaver创建HTML-CSS-JavaScript网页实战
"HTML_CSS_JavaScript网页制作（新）.pdf是2019年的最新文档，涵盖了网页设计的基础知识，包括HTML、CSS和JavaScript的使用。这份文档详细讲解了如何利用这些技术来创建功能丰富的网页。" 在HTML方面，文档涉及到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m晴朗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值