JavaScript保姆级教程

文章目录

  • 一、JavaScript是什么?
  • 二、Js的三种引入方式
    • 2.1js的初始
    • 2.2js输出
    • 3.3js语句
  • 四、js的数据类型
  • 五、运算符和分支结构
  • 六、函数
  • 七、DOM【重要】
  • 八、动态创建div
    • 7.1DOM的第二种实现方式
  • 九、Window对象
    • 9.1window下面的onload属性
    • 9.2window获取电脑窗体的宽高
    • 9.3Window提示框
    • 9.4window的返回和前进的效果
  • 十、综合案例
  • 总结


一、JavaScript是什么?

一个页面由html css js 组成的!!!

js:相当重要!!!。如果想要学号前端,那些html,css根本没有技术含量的

但是js相当有技术含量!!!,但是咱们主要是做后端的,所以说学js学的比较少!!!可以让你们秀儿出来页面的那种。所以以后不断的学习js,我个人特别喜欢js。因为js是一门独立的语言有自己的语法格式。Js这门语言在语言排名当中没有出过前五名

http://github.com/ 这个需要注册,咱们会讲Git,版本控制,开发必用!!!服务器在国外打开比较慢

JavaScript:简称js。实现网页的动态效果的

JavaSCript和java有什么关系呢?没有关系,借助了java的名气命名。就好比老婆和老婆饼

好比雷锋和雷峰塔没有任何关系的

有自己的独立的语法格式

css修饰html标签的

js也是修饰html标签的,可以标签动起来的一门语言,所以在写代码的时候还是先写html标签

二、Js的三种引入方式

类比css有三种引入方式,这个js也有三种引入方式。因为你也是修饰html标签的
1.相当于行内
2.相当于内联
3.相当于外联

2.1js的初始

代码如下(示例):

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的三种引入方式title>
		
		 <script>
			 var num = 123;//int num = 123;不用指定数据类型,自动识别
			 //控制台打印一些,Java System.out.println()
			 //js控制台打印
			 console.log(num);
		 script>
		 
		  <script src="test.js" type="text/jscript" charset="UTF-8">script>
	head>
	<body>
		
		<button onclick="alert('弹窗,出来了哦!')">点一下button>
	body>
html>

结果如下(示例):
JavaScript保姆级教程_第1张图片

2.2js输出

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

代码如下(示例):

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
	head>
	<body>
	body>
	<script>
		//window是js封装好的一个对象,默认就是在本窗体在调用
		// window.alert("使用window调用一个叫alert函数");
		//document就是封装好的一个对象,当前文档流对象,当成body的对象
		document.write("我是一个页面");
		// console.log("呵呵哒");
	script>
html>

结果如下(示例):
JavaScript保姆级教程_第2张图片

3.3js语句

类似于java中声明变量如何声明
int a = 12;

代码如下(示例):

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>声明js变量title>
	head>
	<body>
	body>
	<script>
		// 如何声明一个js变量
		var a = 20;
		var b = 30;
		var c = 40;
		console.log(a,b,c);
		var d,e,f;
		d = 20;
		e = 30;
		f = 40;
		console.log(d,e,f);
		// 这个分号带不带都行,但是如果写在一行了,就必须带分号
		var name = "狗蛋";var age = 12;console.log(name,age);
	script>
html>

结果如下(示例):

JavaScript保姆级教程_第3张图片

四、js的数据类型

number 数字(包含了咱们的整数和浮点数)
String 字符串
boolean 布尔类型
object 对象
array 数组 特殊的object

1.首先在当前项目所在的文件夹外面创建一个test.js的文件,代码如下:

/*
	js的基本数据类型:
		1.number  包含了整数和小数
		2.String  字符串
		3.boolean  布尔
	关于js的语法格式的注意事项:
		1.如果js代码不换行写的话,必须带分号,代表一条语句结束
			以后会碰到不换行的写法吗?会,很多!!!
			不换行写的时候,执行效率高,但是可读性差
		2.变量的命名和java变量命名的规则一摸一样
*/
var num = 10;console.log(num)//控制台打印的一个变量num
//怎么知道这个num变量的数据类型呢  typeof
console.log(typeof num)//查看num这个数据类型的  number
var num1 = 3.141555;
console.log(num1)
console.log(typeof num1);//number

//声明字符串类型的数据
//可以使用单引号,也可以使用双引号
var str1 = "你好";
var str2 = '好的很';
console.log(str1)
console.log(str2)
console.log(typeof str1)//string类型的数据
// 字符串拼接输出打印你好好的很
console.log(str1 + str2)
document.write(str1 + str2);

// 布尔类型的数据只有两个值 true false
var ret1 = true;
var ret2 = false;
console.log(ret1)
console.log(ret2);
console.log(typeof ret1);

//字符串的一些操作,和java中的差不多
str2 = str2 + "睡吧";//字符串的拼接,一般用这个
console.log(str2)

str3 = '大肠刺身'.concat(",羊眼刺身");//字符串拼接方法
console.log(str3);

// 分割一个字符串,把一个字符串变成一个数组
var arr = "生吃鸡蛋,生吃韭菜,生吃腰子".split(",")
console.log(arr)//和java数组长的非常像
console.log(arr[2])//生吃腰子,下标从0开始
console.log(typeof arr)//数组也是object 数组也是一个对象

// 去除空格  trim
var str4 = "   干锅榴莲  ";
console.log(str4)
// str4 = str4.trim()//去除首尾空格
str4 = str4.trimLeft()
str4 = str4.trimRight()
console.log(str4)

代码如下(示例1):

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的数据类型title>
		<script>
			var num = 23;
			console.log(num)//控制台打印
			// 单行注释
			// 多行注释 /**/
		script>
		
		<script src="test.js">script>
	head>
	<body>
		
		<button onclick="alert('是一个弹窗效果')">点一下button>
	

你可能感兴趣的:(JavaWeb,javascript,html5,html)