初识Javascript【持续更新】

小白学JavaScript

JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 插入方法

行内式，直接写到html内部

<body>
	<input type= "button" value = "唐伯虎" onclick = "alert('点秋香')">
</body>

内嵌式

<script>
	alert('hello world!');
</script>

外部js引入

<script src="myScript.js"></script>//两个标签之间不能写东西

function myFunction()
{
    
    
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}//外部js文件不用写<script>标签，之间写js代码即可

JavaScript 输入输出方法

输入

 prompt()//弹出警告框用于输入数据

输出

alert() 弹出警告框显示数据

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
	alert(5 + 6);
</script>
</body>
</html>

表现效果

操作HTML元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识需要访问的HTML 元素，并 innerHTML 来获取或插入元素内容

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
 <!--原本应该展示为“这是我的第一个段落”-->
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
//修改id为demo的段落
</script>
<!--现在展示的是“段落已修改。”-->
</body>
</html>

在这里插入图片描述

写到HTML文档

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>

document.write() 方法可以用在两个方面：

1、页面载入过程中用实时脚本创建页面内容，用来追加一些标签。
2、清除当前页面内容(包括源文档的任何变量或值)。重新生成内容。即“覆盖文档”。

写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。

JavaScript 注释

//单号注释

/*这里是
多行注释*/

JavaScript 变量

变量声明和赋值

var age = 18;
//var为定义变量的关键字，用等号赋值变量，用分号结尾

变量名的大小写敏感，开头不能为数字，符号只能用_和$符作为开头
可以同时声明多个变量，用逗号隔开

var lastname="Doe",
age=30,
job="carpenter";//可以放在同一行，也可以跨越多行

声明变量后，但没有赋值的变量，打印出的结果为undefined

数据类型

在JavaScript中变量为动态类型，即不同事先声明是int还是float等

字符串型
单引号或双信号，引起的部分，为字符串类型
注意：prompt输入的均为字符串类型
数字型
整数或小数
NaN：Not a Number
判断是否为数字型：isNaN()：true为非数字
布尔型
只有true和false
只有：’’，0，null，undefined,NaN为false

typeof 操作符

用于判断变量类型

扫描二维码关注公众号，回复： 12409608 查看本文章

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {
    
    name:'John', age:34} // 返回 object

类型转换

转为字符型
.toString()
String()：强制转化
varname + ‘’：字符串和任何类型拼接都会转化为字符串类型
转为数字型
parseInt()：解析一个字符串，并转换为整型数字，小数型数字用此方法，会被去除小数点后数字
parseFloat()：解析一个字符串，并转化为小数型数字
Number()：强制转换
使用运算符：/、*、-，运算过后均为数字类型

 	console.log(parseInt('3'));// 3
    console.log(parseInt('3.14'));// 3
    console.log(parseInt('3.89'));// 3
    console.log(parseFloat('3'));// 3
    console.log(parseFloat('3.14'));// 3.14
    var age = '18';
    console.log(typeof age);// number
    console.log(typeof Number(age));// number
    console.log(typeof (age - 0));//number

转为布尔型
Boolean()

   console.log(Boolean(undefined));// false
   console.log(Boolean(0));// false
   console.log(Boolean(null));// false
   console.log(Boolean(NaN));// false
   console.log(Boolean(''));// false
   console.log(Boolean(123));// true
   console.log(Boolean('Hallo World!'));// true