JavaScript简介
什么是Javascript
Javascript是一个用于网页编程的脚本语言,需要解析执行(浏览器内置一个JS 解析引擎,来解析js,执行js)
javascript最终在浏览器运行
JavaScript和Java是什么关系?
JavaScript和Java没有一毛钱关系
从JavaScript的诞生史来看,当时JavaScript想要借助Java的东风才在名字中加了Java
JavaScript都能干啥(作用)
搜索过滤 轮播图 倒计时 选项卡等
js的作用:
1.让原来静态的网页变成动态网页
2.可以让网页具有交互功能
3.提升用户体验
4.可以让网页功能变得丰富
如何学习JavaScript
心态
JavaScript是个脚本语言,比其他编译型语言要简单一些
需要大量练习
学习资料
JavaScript高级程序设计
JavaScript权威指南
JavaScript语法
引入JavaScript到HTML
行内:<div onclick-“js代码”>
把html和js混在一起, 容易混淆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入js的方式一:行内写法 ,这种写法把 html和js混淆在一起-->
<div style="color: red;" onclick="console.log('欢迎新同学!')">欢迎新同学!</div>
</body>
</html>
内部:
script标签内部用来写js, jst也必须写在script标签内部,
script标签本身可以多次使用,
script标签可以放在html文档中任何位置,-般放在body标签内部的最下方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入js的方式二:内部写法,script标签内部用来写js, js 也必须写在script标签内部script标签本身可以多次使用,script标签可以放在HTML文档任何位置 一般放在body标签内部最下方-->
<script>
console.log('欢迎新同学!')
console.log('欢迎新同学!')
console.log('欢迎新同学!')
</script>
</body>
</html>
外部: <script src="外部js文件的路径*>
最推荐,js代码单独写在一个外部s文件中,可维护性高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--引入js的方式三:外部引入 -->
<script src="js/01-index.js"></script>
</body>
</html>
console.log('欢迎新同学!')
JS代码语法细节
写js要区分大小写
忽略空白字符(回车,制表符,空格)
注释:
支持两种注释用来解释代码的作用,js不会执 行 注释的内容(主食是给程序员看的,电脑不会执行)
单行注释://注释内容
特点:只能注释当前所在行
所行注释:/* 注释内容*/
特点:也能当单行注释使用,用的多-些
关键字:
也叫保留字 实际使用时必须写对,不能有拼写错误
参考:https://www.runoob.com/js/js-reserved.html
标识符:
用来给变量,函数名等起名字
命名规则:只能由 字母 数字 下划线 $构成
不能以数字开头
不能和关键字冲突
规范的表示符命名:驼峰命名法
var. textTitle 小驼峰俞名法,从第二个单词开始,每个单词首字母大写
var. TxetTitle 大驼峰命名法
三种输出语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>jhfuhjzk官方vi了</h1>
<!-- 点击button,执行document .write 输出的内容会覆盖页而原有的内容 -->
<button onclick="document.write('我只在乎我在乎的你是否和在乎你的我在乎我在乎的你一样在乎在 乎你的我')">按钮</button>
<script>
// 第一种输出语句 console.log(需要输出的数据的内容) 比较常用
console.log('我只在乎你在不在乎我开会坠毁 控制算法滴哦io 总发给好的hi哦组发hi哦害怕政府')
// 第二种输出语句 console.log(需要输出的数据的内容)
alert('我只在乎你在不在乎我开会坠毁 控制算法滴哦io 总发给好的hi哦组发hi哦害怕政府')
// 第三种输出语句 console.log(需要输出的数据的内容)
document.write('我只在乎你在不在乎我开会坠毁 控制算法滴哦io 总发给好的hi哦组发hi哦害怕政府')
/* js中""和''没有区别,都是用来包裹一段文字,包裹的文字都会原样显示,需要注意的是,如果"中再包裹引号只能是单引号。如果单引号中在包裹引号只能是双引号*/
</script>
</body>
</html>
console.log(需要输出的数据的内容) 输出到控制台
alert(需要输出的数据的内容) 以弹框的形式输出到页面(弹框不关闭无法进行其他操作)
document.write(需要输出的数据的内容) 输出到页面(会覆盖原有页面内容)document.write的输出会解析标签
注意事项:
js中""和’'没有区别,都是用来包裹一段文字,包裹的文字都会原样显示,需要注意的是,如果"中再包裹引号只能是单引号。如果单引号中在包裹引号只能是双引号
“水电费看来手动阀上课了”
’是劳动法哈“萨克的返回实例'
`是劳动法哈萨克的返回实例`
双引号和单引号里面的是一个完整的字符串,内部文本不能换行
``反引号里面是一个完整的字符串,内部的文本可以换行
变量
变量就是想是一个盒子,里面装有数据(值)
声明变量
语法:var 变量名;
声明变量默认没有值(默认是undefined)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 声明变量
// 声明一个变量
var title; //这个变量title里面默认装的是undefined
// 申明两个变量
var sex,age;//这两个变量sex,age里面默认装的是undefined
console.log(title);
console.log(sex,age);
//给变量赋值(将一个新值保存到变量中)
title='苹果在本月底会推出se3';
sex=1;
age=18;
console.log(title);
console.log(sex,age);
// 声明变量并且赋值
var desc = "该商品库存有限,起码会尽快下单!"
console.log(desc);
desc = "该商品已下架!"
console.log(desc);
</script>
</body>
</html>
var 变量名,变量名,…
var 变量名=值;
var 变量名=值,变量名=值,变量名=值…;
变量交换
思路一:
num3=num1;
num1=num2;
num2=num3;
思路二:
num1 = num1 + num2;
num2 = num1 - num2;
num1 = num1 - num2;
数据类型
基础数据类型
字符串 类似于“iPhone ’空空如也’ 去结算
数值 类似:3.14 100 -3.14 -100
布尔 类似: true false 例如:人的性别,是否包邮,
undefined 类似:undefined
null 类似:null
复合数据类型(引用数据类型)
object